js模拟网上打字测试

原创 2006年05月19日 15:25:00

<!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>

相关文章推荐

JS模拟打字练习

无标题文档 function $(id){ return document.getElementById(id); } var str="hello,welcome to study ...

用js实现自动打字动画效果

准备自己写一个博客,就先做了一个自动打字的页面demo,见到过用纯css做的,但是灵活性不强,只能一个个打字打完就完了,而用js的话可以来来回回反复地打字,效果更好。 放一张效果图,演示网址:htt...

JS实现简单的打字效果

无标题文档 function $(id){ return document.getElementById(id); } var str="hello,welcome to study ...

js 特效 html 特效 测试打字速度

  • 2011年06月13日 23:32
  • 12KB
  • 下载

java简单实现一个小型的打字测试软件

这次的实验室要做一个用java实现一个

[随便看看]JS打字效果

代码来自 http://fediafedia.com/neo/linux/index.html js代码: 1 /* 2 readDataFrom: 2014/07/04 15:1...

原生JS写打字游戏

新手第一次写出的完整项目,在火狐完美运行。 html lang="en"> head> meta charset="gbk"> title>气球title> style> ...

HTML5+JS游戏开发模块----canvas打字游戏升级版

之前发了简单版本打字游戏,现在增加图片,设置开始按钮,记录分数,字母显示也改成对象数组,直接操作对象而不是操作对象属性,孰好孰坏,我也不懂,我也是初学者。...

HTML5+JS游戏开发模块----canvas打字游戏

原本要继续研究塔防游戏,但发现寻路算法搞不定,其实算法压根看不懂,看的头晕,炮塔自动追踪移动物体也搞不定,塔防项目得延迟了。所以,就搞了另外一个游戏,键盘打字母游戏,老样子,因为初学javascrip...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js模拟网上打字测试
举报原因:
原因补充:

(最多只允许输入30个字)