js实现的文章输入检查与测速。

在群里聊天，一个群友求助。说要实现 文章对比输入，出错了标红，正确的标绿。 同时还需要统计正确率。

 

我一开始以为很容易，结果搞了半天。最后折腾出来了。

 

这里的思路如下：利用js的数组。将文章和输入的内容，都转为数组，一对一进行比对。找到错误的，就修改对应的数组元素。加入Html标签。

 

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="jquery.js"></script>

<style type="text/css">
    
    #articleArea{
        width: 100%;
        height: 150px;
        border: 1px solid #000;
        display:none;

    }
    #userinput{
        width: 100%;
        height: 150px;
        border: 1px solid #000；


    }






</style>
</head>
<body>

    <p id="article">鲁迅同时又是20世纪世界文化巨人之一。他创造了内外两面，都和世界的时代思潮合流，而又并未梏亡中国的民族性并具有独特的个人风格的“现今想要参与世界上的事业的中国人”的文学。他与同时期的世界杰出的思想家和文学家一样，在关注本民族的同时，也在关注着人类共同面临的问题，并做出了自己的独特贡献
    </p>

    <textarea id="articleArea" >

        
    </textarea>


    <textarea id="userinput">
    </textarea>

    <p id="info"></p>



    


    <script type="text/javascript">

        Date.prototype.format = function(format){ 
            var o = { 
    "M+" : this.getMonth()+1, //month 
    "d+" : this.getDate(), //day 
    "h+" : this.getHours(), //hour 
    "m+" : this.getMinutes(), //minute 
    "s+" : this.getSeconds(), //second 
    "q+" : Math.floor((this.getMonth()+3)/3), //quarter 
    "S" : this.getMilliseconds() //millisecond 
    } 

    if(/(y+)/.test(format)) { 
        format = format.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length)); 
    } 

    for(var k in o) { 
        if(new RegExp("("+ k +")").test(format)) { 
            format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length)); 
        } 
    } 
    return format; 
    } 

    //获取p标签的内容
    
    var articleStr = $("#article").text(); //全局变量
     articleStr = articleStr.replace(/(^\s*)|(\s*$)/g,'');
    var count = 0;//发现的错字数量。

    var start = false; //开始计时。
    var startTime = 0;//开始的时间
    var startTimeStr = "";//开始时间的字符串





    function checkError () {


        
        //获取输入的字符串
        var userInputstr = $("#userinput").val();
        //去掉空白
        userInputstr.replace(/(^\s*)|(\s*$)/g,'');

        if(userInputstr.length<=1){
            return;
        }

        //开始计时
        if(!start){
            start = true;
            startTime = new Date().getTime();
            startTimeStr = new Date().format("yyyy-MM-dd hh:mm:ss");
        }



        //转换数组
        var userInputarray = new Array();

        for (var i = 0; i < userInputstr.length; i++) {
        
            userInputarray[i] = userInputstr.charAt(i);
        };

        //用户输入的字符串长度
        var userInputlength = userInputarray.length;
        
        var articleArray = new Array();

        for (var i = 0; i < articleStr.length; i++) {
        
            articleArray[i] = articleStr.charAt(i);
        };

        

        //新建数组保存检查后的结果
        var resultArray = new Array();
        resultArray = articleArray.slice(0); //复制一份

        //2个数组进行对比
        for (var i = 0; i < userInputarray.length; i++) {
            if(userInputarray[i] != articleArray[i]){
                //发现不同。
                count++; //错误字数量增加一个
                //标注错误的字符串。
                resultArray[i] = "<span style='background-color:red;'>"+articleArray[i]+"</span>";
                


            }else{
                resultArray[i] = "<span style='background-color:#00DD00;'>"+articleArray[i]+"</span>";

            }

        };

        //计算输入速度。
        var endTime = new Date().getTime();
        var spendTime =  parseInt((endTime - startTime)/1000);

        var spendMinute = Math.floor(spendTime/60);
        if(spendMinute<=0){
            spendMinute =1;
        }
        var speed =Math.floor(userInputlength / spendMinute);

        

        //输出内容
        var result = resultArray.join("");
        var info = "统计信息：";
        info += "开始时间："+startTimeStr;
        

        info+="花费时间:"+spendTime+"秒";

        
        info +="每分钟输入："+speed;

        info +="已经输入："+userInputlength;
        info +="正确字数："+ (userInputlength-count);
        info +="正确率："+Math.round((userInputlength-count) /userInputlength *100)+"%";



        $("#article").html(result);
        

        $("#info").html(info);

        //清空
        count ="";
        
    
        
    }

    var timename=setInterval("checkError();",1000);
    


    </script>
    
</body>
</html>

 

 

主要的js代码：

        Date.prototype.format = function(format){ 
            var o = { 
    "M+" : this.getMonth()+1, //month 
    "d+" : this.getDate(), //day 
    "h+" : this.getHours(), //hour 
    "m+" : this.getMinutes(), //minute 
    "s+" : this.getSeconds(), //second 
    "q+" : Math.floor((this.getMonth()+3)/3), //quarter 
    "S" : this.getMilliseconds() //millisecond 
    } 

    if(/(y+)/.test(format)) { 
        format = format.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length)); 
    } 

    for(var k in o) { 
        if(new RegExp("("+ k +")").test(format)) { 
            format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length)); 
        } 
    } 
    return format; 
    } 

    //获取p标签的内容
    
    var articleStr = $("#article").text(); //全局变量
     articleStr = articleStr.replace(/(^\s*)|(\s*$)/g,'');
    var count = 0;//发现的错字数量。

    var start = false; //开始计时。
    var startTime = 0;//开始的时间
    var startTimeStr = "";//开始时间的字符串





    function checkError () {


        
        //获取输入的字符串
        var userInputstr = $("#userinput").val();
        //去掉空白
        userInputstr.replace(/(^\s*)|(\s*$)/g,'');

        if(userInputstr.length<=1){
            return;
        }

        //开始计时
        if(!start){
            start = true;
            startTime = new Date().getTime();
            startTimeStr = new Date().format("yyyy-MM-dd hh:mm:ss");
        }



        //转换数组
        var userInputarray = new Array();

        for (var i = 0; i < userInputstr.length; i++) {
        
            userInputarray[i] = userInputstr.charAt(i);
        };

        //用户输入的字符串长度
        var userInputlength = userInputarray.length;
        
        var articleArray = new Array();

        for (var i = 0; i < articleStr.length; i++) {
        
            articleArray[i] = articleStr.charAt(i);
        };

        

        //新建数组保存检查后的结果
        var resultArray = new Array();
        resultArray = articleArray.slice(0); //复制一份

        //2个数组进行对比
        for (var i = 0; i < userInputarray.length; i++) {
            if(userInputarray[i] != articleArray[i]){
                //发现不同。
                count++; //错误字数量增加一个
                //标注错误的字符串。
                resultArray[i] = "<span style='background-color:red;'>"+articleArray[i]+"</span>";
                


            }else{
                resultArray[i] = "<span style='background-color:#00DD00;'>"+articleArray[i]+"</span>";

            }

        };

        //计算输入速度。
        var endTime = new Date().getTime();
        var spendTime =  parseInt((endTime - startTime)/1000);

        var spendMinute = Math.floor(spendTime/60);
        if(spendMinute<=0){
            spendMinute =1;
        }
        var speed =Math.floor(userInputlength / spendMinute);

        

        //输出内容
        var result = resultArray.join("");
        var info = "统计信息：";
        info += "开始时间："+startTimeStr;
        

        info+="花费时间:"+spendTime+"秒";

        
        info +="每分钟输入："+speed;

        info +="已经输入："+userInputlength;
        info +="正确字数："+ (userInputlength-count);
        info +="正确率："+Math.round((userInputlength-count) /userInputlength *100)+"%";



        $("#article").html(result);
        

        $("#info").html(info);

        //清空
        count ="";
        
    
        
    }

    var timename=setInterval("checkError();",1000);

 最后的效果：

posted on 2015-03-09 10:38  jsRunner  阅读(280)  评论(0)  编辑  收藏  举报

导航