Vue实现的打字通

web版在线打字程序

 演示地址：

http://itkey.fun/index.jsp

代码：

  
  旭哥的五笔3-计时可暂停版本
  
  
    .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;
    }
  



  

    {{item.z}}
  
  
  
已录入：{{inputLength}}  总数：{{exerciseTextLength}}  用时：{{totalTime}}秒  速度: {{speed}}

  
    
    
    

  





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=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+"字/分钟"
      }
    }
  })