关闭

js模拟网上打字测试

标签: functionbuttonhtmljavascript测试input
4285人阅读 评论(1) 收藏 举报
分类:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script language="javascript">
 var SourceString="网上打字测试,点开始之后可以开始打字,按下第一个键之后开始计时,打字结束之后可以按计算速度计算你刚才打字的速度,下方同时显示错误的字数、经过的时间。打错的字是红色显示,正确的用蓝色字,还没有打得用黑色。本程序用来娱乐的,如果要用于商业目的,请email给作者 fzsalx@163.com";
 var transtime=0;
 var ErrorCount=0; //错误数
 var tt;//循环显示时间对象
 var HaveEnter=false;
 function showtime(){
  transtime++;
  document.getElementById("ttime").innerText=transtime;
 }
 function Test(){
  var TargetObj=document.getElementById("TypeText");
  var temp="";
  if (TargetObj.value=="") return;
  var i;
  var tempcount=0;
  if (!HaveEnter){
   HaveEnter=true;
   transtime=0;
   tt=setInterval("showtime()",1000);
  }
  for (i=0;i<=SourceString.length-1;i++){
   if (i<TargetObj.value.length){
    if (TargetObj.value.substring(i,i+1)==SourceString.substring(i,i+1)){
     temp=temp + "<span class='right1'>" + SourceString.substring(i,i+1) + "</span>";
    }else{
     temp=temp + "<span class='error1'>" + SourceString.substring(i,i+1) + "</span>";
     tempcount++;
    }
   }else{
    temp =temp + SourceString.substring(i,i+1);
   }
  }
  ErrorCount=tempcount;
  document.getElementById('ss').innerHTML=temp;
  document.getElementById('error').innerText=ErrorCount;
 }
 function begin(){
  ErrorCount=0;
  document.getElementById('ss').innerText=SourceString;
  document.getElementById('TypeText') .value="";
  document.getElementById('TypeText').disabled=false;
  document.getElementById('TypeText').focus();
  document.getElementById('error').innerText=ErrorCount;

 }
 function finish(){
  clearInterval(tt);
  var sp;
  if (document.getElementById("TypeText").value=="")
   sp=0
  else
   sp=document.getElementById("TypeText").value.length*60/transtime;
  document.getElementById("speed").innerText=sp;
  document.getElementById('TypeText').disabled=true;
  HaveEnter=false;
 }
</script>

<style type="text/css">
<!--
.error1 {
 color: #FF0000;
}
.right1 {
 color: #0000FF;
}
-->
</style>
</head>

<body onLoad="document.getElementById('ss').innerText=SourceString;" onselectstart="return false";onpaste="return false";>
<p><span id="ss"></span>
    <textarea name="TypeText" cols="100" rows="10" id="TypeText" onKeyDown="Test();" disabled="true"></textarea>
</p>
<p>
  <input type="button" name="Submit" value="(重新)开始打字测试" onclick="begin();">
  <input type="button" name="Submit2" value="结束/计算速度" onclick="finish();">
</p>
<p>经过时间<span id="ttime">0</span>秒&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;错误数量<span id="error">0</span>个 &nbsp;&nbsp;&nbsp;速度<span id="speed">0</span>个/分</p>
</body>
</html>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:52310次
    • 积分:804
    • 等级:
    • 排名:千里之外
    • 原创:25篇
    • 转载:4篇
    • 译文:1篇
    • 评论:17条
    文章分类
    最新评论