js模拟网上打字测试

78 阅读 0 评论 52 点赞

我是靠谱客的博主壮观绿茶，最近开发中收集的这篇文章主要介绍js模拟网上打字测试，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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