js实现的文章输入检查与测速。(纯js版本)
朋友又提出一些需求。希望不要jquery .于是修改成js版本。
<!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"> body,div,p{
background-color: #000;
color: #fff;
} .wrap{
width: 600px;
margin: 0 auto;
} #article{
width: 600px;
height: 150px;
border: 1px solid #fff;
overflow-y:scroll; }
#userInput{
width: 600px;
height: 150px;
border: 1px solid #000； } #info{
color: red;
} #level{ padding: 0px;
list-style: none; }
#level li{
float: left;
list-style-image: none;
width: 50px;
border: 1px solid #fff;
text-align: center;
}
.currentlevel{
background-color: red;
} </style>
</head>
<body> <div class="wrap"> <p id="article">鲁迅同时又是20世纪世界文化巨人之一。他创造了内外两面，都和世界的时代思潮合流，而又并未梏亡中国的民族性并具有独特的个人风格的“现今想要参与世界上的事业的中国人”的文学。他与同时期的世界杰出的思想家和文学家一样，在关注本民族的同时，也在关注着人类共同面临的问题，并做出了自己的独特贡献
</p> <textarea id="userInput" rows="10" cols="10"></textarea> <p id="info">统计信息：</p> <ul id="level">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul> </div> <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 =document.getElementById("article").innerHTML; //全局变量 articleStr = articleStr.replace(/(^\s*)|(\s*$)/g,'');
var count = 0;//发现的错字数量。 var start = false; //开始计时。
var startTime = 0;//开始的时间
var startTimeStr = "";//开始时间的字符串 function checkError () { //获取输入的字符串
var userInputstr = document.getElementById("userInput").value; //打印
//console.info(userInputstr); //去掉空白
userInputstr.replace(/(^\s*)|(\s*$)/g,''); //如果为空则不继续，同时计算为开始时间
if(userInputstr.length<=1){
startTime = new Date().getTime();
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 +="每分钟输入："+speed+"  "; info +="已经输入："+userInputlength+"  ";
info +="正确字数："+ (userInputlength-count)+"  ";
info +="正确率："+Math.round((userInputlength-count) /userInputlength *100)+"%"; document.getElementById("article").innerHTML= result;
document.getElementById("info").innerHTML = info; //设置等级
setLevel(userInputlength-count); //清空
count =""; } function setLevel (argument) {
if(window.console){
console.log("等级文字"+argument);
} //计算等级
var levelNum = parseInt(argument/10); if(window.console){
console.log("等级为"+levelNum);
} //设置等级
var levelWrap = document.getElementById("level"); //var levelLi = levelWrap.childNodes; //该方法存在问题。会获得2倍子元素
var levelLi = levelWrap.getElementsByTagName("li"); for (var i = 0; i <levelLi.length; i++) {
if(window.console){
console.log("第"+i+"标签");
}
//修改等级
if(i<levelNum){
levelLi.item(i).className="currentlevel";
}else{
levelLi.item(i).className=""; } };
} var timename=window.setInterval("checkError();",1000); </script> </body>
</html>
效果图如下：
js实现的文章输入检查与测速。(纯js版本)的更多相关文章
- js实现的文章输入检查与测速。
在群里聊天,一个群友求助.说要实现 文章对比输入,出错了标红,正确的标绿. 同时还需要统计正确率. 我一开始以为很容易,结果搞了半天.最后折腾出来了. 这里的思路如下:利用js的数组.将文章和输入的内 ...
- JavaScript--动态添加元素（纯js书写table并删除数据）
本文是对上一篇博文的扩展,用js书写表格,并添加和删除数据,详细代码解释见代码页. 对于文中使用的script脚本函数,下载地址如下:https://pan.baidu.com/s/13OFnj7nc ...
- js限制input只能输入有效的数字，有且只有一个小数点，第一个不能为小数点-备
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js正则实现用户输入银行卡号的控制及格式化
//js正则实现用户输入银行卡号的控制及格式化 <script language="javascript" type="text/javascript"& ...
- xss 防止攻击,恶意用户将输入的信息当成html或js代码执行,办法是将用户输入的信息改为text格式,或特殊符号转义
xss 防止攻击,恶意用户将输入的信息当成html或js代码执行,办法是将用户输入的信息改为text格式,或特殊符号转义 XSS攻击的防范 XSS攻击造成的危害之所以会发生,是因为用户的输入变成了可执 ...
- [推荐]InfoQ上的深入浅出Node.js的系列文章
InfoQ上的深入浅出Node.js的系列文章 详情如下链接:http://www.heiboard.com/?p=2081
- hexo next主题深度优化(十一)，next主题中加入scrollReveal.js，让文章随着鼠标的滚动，出现点小动作。
文章目录 效果 scrollReveal简单介绍以及简单操作 参考文档: next主题中加入scrollReveal 给article标签添加属性 给底部的不蒜子添加属性 本地引入依赖并且编写启动函数 ...
- 网址测速JS
/*.route_nav li a:hover{background: #3c7f84 url(title.png) no-repeat;border-color:#84a3a5;}*/ .route ...
- 推酷文章中编写js组件系列文章整理
一步一步实现JS拖拽插件 http://www.tuicool.com/articles/RBbmMjY JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享 http://ww ...
随机推荐
- lucene中Field.Index,Field.Store的一些设置
lucene在doc.add(new Field("content",curArt.getContent(),Field.Store.NO,Field.Index.TOKENIZE ...
- Chapter 1 First Sight——16
I drove around the school, following the line of traffic. 我开车绕学校随着交通线. 我开车穿过校园,紧跟着大部队. I was glad to ...
- 【转】bootstrap 的 affix.js 插件
我觉得 Twitter Bootstrap 提供的 JavaScript 插件可用性非常高,但文档多数简单.按部就班操作了,有效果当然好,没效果的话简直不知道为什么.之前我写过 Scrollspy 用 ...
- postfix中recipient/client/sender/helo四者的区别<转载>
postfix在main.cf中用下面四个做限制,那么这四者到底有什么区别? smtpd_recipient_restrictions smtpd_client_restrictions smtpd_ ...
- iis7支持asp（访问页面，页面存在仍然提示404）
1. win7下安装IIS时ASP一般被默认不选中的状态,因此需要打开IIS检查功能视图栏中是否存在ASP选项,若没有则需要从控制面板->程序和 功能->打开或关闭Windows功能-&g ...
- iOS原生refresh（UIRefreshControl）
转载:http://www.2cto.com/kf/201504/392431.html // // ViewController.m // 代码自定义cell // // Created by ma ...
- ztree异步加载
Ztree异步加载的意思就是: 当点击展开树节点时,才去请求后台action返回点击节点的子节点数据并加载. 直接贴代码(SpringMvc+Mybatis): 前台页面ztreeList.jsp: ...
- JSON资料整理（转）
目录 1.什么是json 2.json语法规则 3.json基础结构 4.json基础示例 5.JSON和XML比较 6. .NET操作JSON 原始方式 通用方式 内置方式 契约方式 通过序列化将. ...
- HDU 1434 幸福列车（优先队列）
优先队列的应用 #include<iostream> #include<cstdio> #include<cstring> #include<queue> ...
- mysql----快速删除数据表（drop,truncate.delete）
概念: 三者均可删除数据表 TRUNCATE TABLE 在功能上与不带 WHERE 子句的 DELETE 语句相同:二者均删除表中的全部行.但 TRUNCATE TABLE 比 DELETE 速度快 ...