在群里聊天，一个群友求助。说要实现 文章对比输入，出错了标红，正确的标绿。 同时还需要统计正确率。
我一开始以为很容易，结果搞了半天。最后折腾出来了。
这里的思路如下：利用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);
最后的效果：
