已知bug -第一行最后一个字被删除第二行输入就会错误。
-如果点多次开始按钮，时间会加倍增长，基于时间的打字速度也会错误。
-点开始的时候打字速度回跳出undefin，因为初始值没有，要开始打字或者时间跳动才会正常。
-有张图片没有上传上来，所以图片是裂的。
如果有人有兴趣可以改改bug优化下功能。恩，就这么多。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style>
body{
padding: 0px;
margin: 0px;
background-color: aliceblue;
}
.top{
width: 100%;
height: 100px;
}
.side{
width: 300px;
height: 500px;
background-color: aliceblue;
float: left;
}
.dazi{
width: 720px;
height: 450px;
border: 5px solid white;
float: left;
background-color: #DDDDDD;
rgba(0.1);
}
.firstline{
width: 710px;
height: 30px;
margin: 10px 4px 0 4px ;
background-color: white;
font: 15px "微软雅黑";
}
.blue{
color: white;
background: blue;
}
.red01{
color: black;
background-color: red;
}
.lefthang{
width: 280px;
height: 50px;
font: 20px "微软雅黑";
text-align: center;
}
.lefshow{
width: 280px;
height: 200px;
border: 1px solid black;
margin: 0 10px 0 10px;
}
</style>
</head>
<body>
<div class="top">
<img src="img/top.png" style="width: 1366px;"/>
</div>
<div class="side">
<div class="lefthang"></div>
<div class="lefthang"></div>
<div class="lefshow">
<div id="sudu" class="lefthang">
</div>
<div id="time" class="lefthang">
</div>
<div id="zhengqulv" class="lefthang"></div>
<div id="zhengquesudu" class="lefthang"></div>
</div>
<input type="button" id="begin" class="lefthang" value="开始" style="margin: 0 10px 0 10px; background-color: #0000FF;"/>
</div>
<div class="dazi">
<div class="firstline" id="one">
<span id="onehang">you showed me that nothing lasts forever miracles sometimes occur but one has to work terribly</span>
</div>
<input type="text" id="firstline" class="firstline" style="border: 0px;"/>
<div class="firstline" id="two">
<span id="twohang">talents come from diligence and knowledge is gained by accumulation</span>
</div>
<input type="text" id="twoline" class="firstline" style="border: 0px;"/>
</div>
<div class="side"></div>
</body>
<script>
var zifu={"65":"a","66":"b","67":"c","68":"d","69":"e","70":"f","71":"g","72":"h","73":"i","74":"j","75":"k","76":"l","77":"m","78":"n","79":"o","80":"p","81":"q","82":"r","83":"s","84":"t","85":"u","86":"v","87":"w","88":"x","89":"y","90":"z",32:" "};
var jieshouzifu=new Array();
var ziid=1;
var a="";
var time=1;
var b;
var right=0;
var c=0;
var t;
var one1="one";
var two1="two";
var onehang="you showed me that nothing lasts forever miracles sometimes occur but one has to work terribly";
var twohang="talents come from diligence and knowledge is gained by accumulation";
document.onkeydown=function(e){
var zhegnquelv1=(right)/jieshouzifu.length;
var zhegnquelv= toDecimal(zhegnquelv1);
var zhegnque="<span>正确率:"+zhegnquelv+"</span>";
document.getElementById("sudu").innerHTML=zhegnque;
if(jieshouzifu.length==onehang.length){
document.getElementById("twoline").focus();
a="";
time=time-onehang.length;
var sameword=0;
if(e.keyCode==8){
delectworld(twohang,two1);
ziid--;
time--;
}else{
for(var key in zifu){
if(key==e.keyCode){
sameword++;
}
}
if(sameword==1){
show(e.keyCode,twohang,two1);
ziid++;
time++;
}
}
}else if(jieshouzifu.length>onehang.length){
var sameword=0;
if(e.keyCode==8){
delectworld(twohang,two1);
ziid--;
time--;
}else{
for(var key in zifu){
if(key==e.keyCode){
sameword++;
}
}
if(sameword==1){
show(e.keyCode,twohang,two1);
ziid++;
time++;
}
}
}else{
var sameword=0;
if(e.keyCode==8){
delectworld(onehang,one1);
ziid--;
time--;
}else{
for(var key in zifu){
if(key==e.keyCode){
sameword++;
}
}
if(sameword==1){
show(e.keyCode,onehang,one1);
ziid++;
time++;
}
}
}
}
function show(keycode,hang,q){
console.log(hang)
console.log(q)
var allzifu;
var str1;
var str=hang.substr(time-1,1);
var remain=hang.substring(time,hang.length);
for(var key in zifu){
str1=zifu[keycode];
}
if(str==str1){
jieshouzifu.push(str);
a+="<span id="+(ziid)+" class=blue>"+str+"</span>";
allzifu=a+remain;
document.getElementById(q).innerHTML=allzifu;
right++;
}else{
jieshouzifu.push(str);
a+="<span id="+(ziid)+" class=red01>"+str+"</span>";
allzifu=a+remain;
document.getElementById(q).innerHTML=allzifu;
}
}
function delectworld(hang,q){
jieshouzifu.length--;
var str=hang.substr(time-2,1);
var restr=hang.substr(time-2,1);
var remainstr=hang.substring(time-2,hang.length);
var newa=document.getElementById(q).innerHTML;
var colo=document.getElementById(ziid-1).className;
var del="<span id="+'"'+(ziid-1)+'"'+' class="'+colo+'">'+str+"</span>";
var allzifureplace=newa.replace(del,restr);
var newwwa=allzifureplace.replace(remainstr,"");
document.getElementById(q).innerHTML=allzifureplace;
a=newwwa;
if(colo=="blue"){
right--;
}
}
document.getElementById("begin").onclick=function(){
document.getElementById("firstline").focus();
timedCount();
}
function toDecimal(x) {
var f = parseFloat(x);
if (isNaN(f)) {
return;
}
f = Math.round(x*100)/100;
return f;
}
function timedCount()
{
var time='<span id="dazishijian">已用时:'+c+"秒</span>";
document.getElementById('time').innerHTML=time;
c=c+1
t=setTimeout("timedCount()",1000)
sudu();
zhengquesudu();
return c;
}
function sudu(){
var str=document.getElementById("dazishijian").innerHTML;
var str1=str.substr(4,2);
var str3=parseInt(str1);
var str2=toDecimal(jieshouzifu.length/str3);
var sudu='<span id="sudu">打字速度为:'+str2+"个/秒</span>";
document.getElementById("zhengqulv").innerHTML=sudu;
}
function zhengquesudu(){
var str=document.getElementById("dazishijian").innerHTML;
var str1=str.substr(4,2);
var str3=parseInt(str1);
var str2=toDecimal(right/str3);
var sudu='<span id="sudu">正确的打字速度为:'+str2+"个/秒</span>";
document.getElementById("zhengquesudu").innerHTML=sudu;
}
function flash(){
}
</script>
</html>
相关推荐
功能： 普通用户：可以选择练习的难度、语言、篇幅大小，系统自动根据用户的选择显示满足条件的文本进行练习；可以选择具体的文章进行练习；可以设定预定时间，用户练习过程中可以暂停；练习结束显示用户的正确率、...
这段代码实现了一个打字练习软件，通过命令行界面提供了两种练习模式：自由练习和打字导师模式。自由练习随机选取预设的练习句子，用户输入后统计准确率和速度，打字导师模式则实时检测用户的输入准确率和速度。用户...
包里有可执行的打字程序。 教程里面有一步一步的截图，可按图操作实现。 欢迎大家批评指正。
软件工程打字软件需求分析，专门为程序员设计的打字练习软件。
用vb编写的一个模拟打字的打字软件。 Public Class Form1 Inherits System.Windows.Forms.Form #Region " Windows 窗体设计器生成的代码 " Public Sub New() MyBase.New() '该调用是 Windows 窗体设计器所...
C++打字练习软件是一款用于提高打字速度和准确性的工具。下面是对这个软件的源码描述，不包含具体的代码实现： 用户界面：源码会包含一个用户界面，以便用户能够方便地进行打字练习。用户界面可能包括菜单栏、工具...
金山打字通2003是金山公司2003年度推出的系列教育软件之一，金山打字2003主要由金山打字通和金山打字游戏两部分构成是一款功能齐全、数据丰富、界面友好的、集打字练习和测试于一体的打字软件。 金山打字通2003特点...
小时候很好用的打字软件，亲测可用
TT 打字软件，用于练习和提高英文的录入速度。属于 DOS 系统上的打字软件，除了 DOS 系统，也可以运行在 windows系统上。通过跟随屏幕上的文字进行打字，软件会给出 wpm 等数据。需要使用dosbox。问键解压后在Dosbox...
采用Java编写的打字软件，里面还有打字训练和多个打字游戏
java开发的打字软件 java开发的打字软件 java开发的打字软件 java开发的打字软件 java开发的打字软件 java开发的打字软件
学打字练习打字
在普通用户界面中用户可实行打字功能和查看排名功能。 2、管理员账户为admin，密码为623，在管理员账户中可以实现以下功能： a、打字练习； b、增加或删减普通用户个数； c、查看打字成绩排名； d、增加词库...
用java实现的键盘打字程序， 用java实现的键盘打字程序， 用java实现的键盘打字程序， 用java实现的键盘打字程序，
金山打字通2008是一款学习打字软件具有英文打字、拼音打字、五笔打字、打字游戏等功能,让您简单快乐的学习打字。 【金山打字通 2008 正式版基本介绍】 《金山打字通 2008》！它是金山公司推出的两款教育系列软件之...
JavaScript实现金山打字功能 全面了解键盘与网页之间的交互！
软件功能强大，操作简单，使用方便，赶紧给家里的老人下载使用吧 老年人打字软件的原理很简单，只要让儿女输入一些常用的字到字库，字库中字会显示在界面提供给老年人选择,，选择组成一串句子后点复制，接着就可
打字练习软件、打字比赛软件，服务端+客户端，非常好用，可输入姓名和规定时间，可方便学校老师提供给学生练习和比赛用，在线统计学生打字速度、正确率和成绩。
一款经久不衰的DOS五笔打字练习软件，培训班都用这个练习的``
万能打字练习是一款练习打字的软件，所谓万能是指无论您使用何种输入法，您的打字水平如何，都可以使用本软件进行练习。 功能介绍 1、界面简洁，功能实用，容易上手。 2、软件包含打字练习与打字游戏两大部分。打字...