web版在线打字程序
演示地址：
http://itkey.fun/index.jsp
代码：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>旭哥的五笔3-计时可暂停版本</title> <script src="/js/vue.js"></script> <style> .red{ color: red; font-weight:bold; } .green{ color: #006666; font-weight:bold; /*font-size: 2px; display: none;*/ text-decoration:line-through } .text-static{ font-size: 18px; } </style> </head> <body> <div id="app"> <div class="text-static" style="cursor:pointer;"> <span @click="searchInfo(item.z)" :class="{ red:item.f==1,green:item.f==2}" v-for="item in charList">{{item.z}}</span> </div> <textarea class="text-static" @focus="myFocus" v-model="message" style="width: 100%;height: 300px"></textarea> <p>已录入：{{inputLength}} 总数：{{exerciseTextLength}} 用时：{{totalTime}}秒 速度: {{speed}}</p> <form target="_blank" id="myform" action="https://www.52wubi.com/wbbmcx/search.php" method="post"> <input type="text" v-model="keyword" name="hzname" placeholder="请输入您要查询的汉字。新增支持拼音字母查询"> <input id="su" class="sb" type="submit" value="五笔搜索"> <input class="sb" type="button" @click="pause" value="暂停" :value="isPause==true?'继续':'暂停'"> </form> </div> </body> <script> var text = '冰灯是流行于中国北方的一种古老的民间艺术形式。因为独特的地域优势，黑龙江可以说是制作冰灯最早的地方。传说在很早以前，每到冬季的夜晚，在松嫩平原上，人们总会看到三五成群的农夫和渔民在悠然自得地喂马和捕鱼，他们所使用的照明工具就是用冰做成的灯笼。这便是最早的冰灯。当时制作冰灯的工艺也很简单，把水放进木桶里冻成冰坨，凿出空心，放个油灯在里面，用以照明，冰罩挡住了凛冽的寒风，黑夜里便有了不灭的灯盏，冰灯成了人们生活中不可缺少的帮手。'; var app = new Vue({ el: '#app', data: { intervalId: null, startTime: new Date().getTime(), keyword:'', //查询关键字 totalTime:0, message: '', charList:[], exerciseText:text, //练习的全部文本 isPause: false //是否暂停 }, created: function () { for (var i = 0; i < this.exerciseText.length; i++) { var zi = this.exerciseText.charAt(i); var item = { z:zi, f:0 } this.charList.push(item); } }, methods: { pause: function(){ if(this.isPause){ this.isPause = false; }else this.isPause = true }, //查询五笔编码 searchInfo: function(z){ this.keyword = z; function myfun(){ document.getElementById("myform").submit(); } setTimeout(myfun, 200); }, start() { this.startTime = new Date().getTime(); // 计时器正在进行中，退出函数 if (this.intervalId != null) { return; }; // 计时器为空，操作 this.intervalId = setInterval(() => { var flag = this.isPause; if(flag == true){ return; }else{ console.log(flag); this.totalTime ++; } }, 1000) }, //输入框获取焦点 myFocus: function () { if(this.inputLength<=0){ console.log('开始计时'); this.start(); } }, //变换颜色 changeColor: function (index,f) { var item = this.charList[index]; if(item){ item.f =f; } } }, computed: { // 计算属性的 getter inputLength: function () { //todo:遍历了所有的字符，后面可以优化性能 var exercLen = this.exerciseText.length; for (var i = 0; i < this.exerciseText.length; i++) { this.changeColor(i,0); } var len = this.message.length; //录入完成自动暂停 if(len==exercLen){ this.isPause = true; } if(len>=1){ for (var i = 0; i < len; i++) { var inputChar = this.message.charAt(i); var trueChar = this.exerciseText.charAt(i); //console.log("正确的字符："+trueChar+"输入的字符是："+ inputChar); if(inputChar==trueChar){ //输入正确 this.changeColor(i,2); //绿色 }else{ this.changeColor(i,1); //红色 } } } return len; }, exerciseTextLength: function () { return this.exerciseText.length; }, speed: function () { var zmmin = ((this.inputLength/this.totalTime))*60; //xxx字每分钟 zmmin = zmmin.toFixed(2); if(zmmin.indexOf(".00")>=0){ //后面是.00就去掉 zmmin = zmmin.substring(0,zmmin.length-3); } if(zmmin.indexOf("NaN")>=0){ zmmin = 0; } return zmmin+"字/分钟" } } }) </script> </html>
