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引擎( ...
随机推荐
- HDU 2489 Minimal Ratio Tree (DFS枚举+最小生成树Prim)
Minimal Ratio Tree Time Limit : 2000/1000ms (Java/Other) Memory Limit : 32768/32768K (Java/Other) ...
- oracle xe client 如何设置 tnsnames.ora（解决无法使用pl/sql developer的问题）
10.2版本xe的服务器和客户端安装都很方便,由于xe的服务器只允许建立一个实例,实例名字会直接默认为xe,客户端默认安装在C:\XEClient目录下,使用sqlplus连接服务器: sqlplus ...
- XML回顾
xml加强 一.sax解析 1)原理: 读取xml的某个部分,解析一部分(读取一点,解析一点) 2)步骤: SAXParserFactory factory = SAXPa ...
- Android开发之如何保证Service不被杀掉（broadcast+system/app）
序言 最近项目要实现这样一个效果:运行后,要有一个service始终保持在后台运行,不管用户作出什么操作,都要保证service不被kill,这可真是一个难题.参考了现今各种定制版的系统和安全厂商牛虻 ...
- 设置HTML表格细边框
简介:WEB前端|这是关于怎么设置HTML表格细边框的问题,把表格边框设置为细小的线条边框一般我们用表格的时候总会给它个border属性,比如:<tableborder="1" ...
- Anroid ListView分组和悬浮Header实现
Anroid ListView分组和悬浮Header实现 分类: Android2014-01-27 12:26 6585人阅读 评论(13) 收藏 举报 listviewheadersection分 ...
- Python3基础 函数 默认值参数示例
镇场诗: 诚听如来语,顿舍世间名与利.愿做地藏徒,广演是经阎浮提. 愿尽吾所学,成就一良心博客.愿诸后来人,重现智慧清净体.-------------------------------------- ...
- MIME小知识
http://www.alixixi.com/program/a/2008020514775.shtml 用户可以通过使用MIME以设置服务器传送多媒体如声音和动画信息,这一切可能通过CGI脚本来进行 ...
- [iOS]C语言技术视频-15-指针变量高级用法练习一(函数指针完成动态排序)
下载地址: 链接: http://pan.baidu.com/s/1o6MOzX4 密码: xzxn
- Unity3d之剥离alpha通道
unity中, 将图集的 alpha 通道剥离出来可减少包体大小和内存使用大小. 方法是将原来的一张 rgba 图分成一张 rgb 和一张 alpha 图,android上rgb和alpha图均采用e ...