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);

最后的效果：

js实现的文章输入检查与测速。的更多相关文章

js实现的文章输入检查与测速。(纯js版本)
朋友又提出一些需求.希望不要jquery .于是修改成js版本. <!DOCTYPE html> <html> <head> <meta charset=&q ...
js限制input只能输入有效的数字，有且只有一个小数点，第一个不能为小数点-备
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
js正则实现用户输入银行卡号的控制及格式化
//js正则实现用户输入银行卡号的控制及格式化 <script language="javascript" type="text/javascript"& ...
[推荐]InfoQ上的深入浅出Node.js的系列文章
InfoQ上的深入浅出Node.js的系列文章详情如下链接:http://www.heiboard.com/?p=2081
网址测速JS
/*.route_nav li a:hover{background: #3c7f84 url(title.png) no-repeat;border-color:#84a3a5;}*/ .route ...
BJSV-P-002高精度测速一体机
测速.抓拍.录像于一体,产品处于行业顶尖水平. 1 测速一体机参数 2 接口和资源 3 相机接口 1. 前面板接口测速一体机镜头接口采用C-Mount ...
iOS炫酷动画图案、多种选择器、网络测速、滑动卡片效果等源码
iOS精选源码对网络进行测速自实现大标题,配合原生骨架屏demo 简单方便的pickerVIew记录数据 LZPickerView 科技风绘制组件,简单快速"画"出炫酷图案 R ...
网络测速神器：SpeedTest深度指南
最近在测试一个项目,里面涉及到一个测试case:在linux服务器上,当网络带宽较差时,观察服务的消息处理能力和表现.限制网卡带宽有许多方法,比如Wondershaper或者ethtool.那验证限速 ...
fio硬盘测速windows+linux
一.FIO工具简介 Fio工具的介绍网上有很多,都是可以通用的,这里就不做太多个人描述了,直接借鉴一下 fio是一种I / O工具,用于基准测试和压力/硬件验证.它支持19种不同类型的I / O引擎( ...

随机推荐

java 线程安全
要认识java线程安全,必须了解两个主要的点:java的内存模型,java的线程同步机制.特别是内存模型,java的线程同步机制很大程度上都是基于内存模型而设定的. 浅谈java内存模型: 不同的平台 ...
android touchEvent事件学习
学习网址:http://www.apkbus.com/forum.php?mod=viewthread&tid=44296 1:Android Touch事件传递机制解析 android系统中 ...
FOJ 2203 单纵大法好
二分答案+验证 #include<cstdio> #include<cstring> #include<cmath> #include<algorithm&g ...
解决IIS网站.woff 404 (Not Found)问题
一.在没有权限操作IIS管理器的情况下,在Web.config中的system.webServer节点进行如下配置: <system.webServer> <staticConten ...
移动web开发常用属性
 <!doctype html> <!-- lang 属性设置,中文页面尽量不要设置为 "en",这会开启 ...
angularjs中动态为audio绑定src
今天在angularjs中用audio的时候碰到的这些问题,查阅http://www.cnblogs.com/rachelanlan/p/3598070.html获得解决,感谢! <div cl ...
JSP内置对象--out对象(了解即可)
out对象是javax.servlet.jsp.JspWriter类的实例化对象,主要功能就是完成页面的输出操作,使用println()或print()输出.但是使用纪律很少,都会使用表达式完成输出的 ...
Struts2 语法--result type
result type: dispatcher,redirect:只能跳转到jsp,html之类的页面,dispatcher属于服务器跳转, redirect属于客户端跳转 chain: 等同于for ...
jna
http://topmanopensource.iteye.com/blog/1752355
FusionCharts参数大全及详细说明（中文）
概述:本文主要整理了FusionCharts图表控件所包含的各类参数(中文说明),包含了图表,字体,网格,数字格式等参数,便于大家在FusionCharts使用过程中查找所需要的各类参数. 本文主要整 ...

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

js实现的文章输入检查与测速。的更多相关文章

随机推荐

热门专题