已知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>
相关推荐
这段代码实现了一个打字练习软件，通过命令行界面提供了两种练习模式：自由练习和打字导师模式。自由练习随机选取预设的练习句子，用户输入后统计准确率和速度，打字导师模式则实时检测用户的输入准确率和速度。用户...
本文将深入解析一款基于C# WinForms技术编写的“追梦打字软件”，并提供详细的实现步骤，旨在帮助开发者理解和学习如何构建类似的桌面应用。 首先，我们要明确的是，“追梦打字软件”是一款使用C#语言，并结合了...
在IT行业中，打字软件是一种常见的工具，尤其在专业技能培训领域，如邮政服务，它能够帮助员工提升打字速度和准确性。...对于任何希望通过打字技能提升工作表现的个人来说，这类软件都是一个值得尝试的选择。
“洪恩小翅膀打字软件”便是这一时期的代表作，它通过游戏化的教学模式，使枯燥的打字练习变得趣味横生。 二、软件特色与功能 1. **互动式教学**：软件采用卡通形象和生动的故事背景，将打字练习融入到游戏中，使...
综上所述，这款专门针对程序员设计的打字练习软件不仅能够满足其日常编程需求，还能通过一系列实用功能帮助他们提高打字速度和准确性。通过不断地迭代优化，相信该软件能够在程序员群体中得到广泛的应用和好评。
Java打字软件游戏是一款利用Java编程语言开发的教育软件，主要目标是帮助用户提升打字速度和准确性。在这款软件中，用户不仅可以进行基础的打字训练，还可以通过各种打字游戏来增加学习的趣味性，使打字变得更加轻松...
"打字先锋"就是这样一款专为提升打字技能而设计的软件，它以其独特的功能和易用性，为用户提供了高效的学习平台。 "打字先锋"软件小巧精悍，占用系统资源少，但其提供的功能却非常全面。这款软件特别适合那些希望...
《VB打字软件源码详解——字符处理与交互设计》 VB（Visual Basic）作为Microsoft公司推出的可视化编程工具，以其直观易用的界面...因此，无论是为了学习还是研究，"VB打字软件源码"都是一个值得深入探索的宝贵资源。
功能： 普通用户：可以选择练习的难度、语言、篇幅大小，系统自动根据用户的选择显示满足条件的文本进行练习；可以选择具体的文章进行练习；可以设定预定时间，用户练习过程中可以暂停；练习结束显示用户的正确率、...
打字比赛软件是一种专为提高打字技巧和速度设计的应用，通常包含服务端和客户端两部分。服务端负责处理和管理所有的比赛数据，而客户端则是用户进行实际打字操作的平台。这款“打字比赛软件（服务端+客户端）”提供...
Java开发的打字软件是一款基于Java编程语言构建的应用程序，旨在帮助用户提高打字速度和准确性。Java作为一种跨平台的编程语言，具有“一次编写，到处运行”的特性，因此使用Java开发的打字软件能够在多种操作系统上...
《Type Tutor(TT)：一款穿越时代的经典打字软件》 在信息技术日新月异的今天，各种软件如雨后春笋般涌现，但有一款软件，历经岁月洗礼，依然深受用户喜爱，那就是"Type Tutor(TT)"——一款经典的打字训练软件。这款...
而“WT WBX”五笔打字练习软件，则是这一时期的杰出代表，它以其独特的教学方式和实用性，深受广大用户，尤其是打字培训学校的喜爱。 五笔字型，由王永民先生于1983年发明，是基于汉字笔画和部首的编码方式，将每个...
其次，计分测试功能是打字测试软件的核心特性之一。软件会实时监测用户的打字速度和准确率，通过科学的算法计算出得分，帮助用户了解自己的打字水平。这种即时反馈机制能够激发用户的学习动力，通过不断的挑战自我，...
本项目“java实现打字程序”就是利用Java编程语言设计的一个键盘打字练习软件。这个程序的目标是帮助用户提高打字速度和准确性，通过模拟真实的打字环境，提供文本输入的练习。 Java实现打字程序通常会包含以下几个...
C++打字练习软件是一款用于提高打字速度和准确性的工具。下面是对这个软件的源码描述，不包含具体的代码实现： 用户界面：源码会包含一个用户界面，以便用户能够方便地进行打字练习。用户界面可能包括菜单栏、工具...
标题中的“一款经典的打字练习软件”指的是这款软件在打字训练领域有着广泛的认可和历史。这类软件的主要目的是帮助用户提高打字速度和准确性，通常包含各种练习模式和进度跟踪功能。 描述中提到的“简单的图形界面...
在这个“简单的JAVA打字软件”项目中，我们将深入探讨如何利用JAVA实现一个单机版的打字练习程序。 一、JAVA基础 JAVA是一种面向对象的编程语言，由Sun Microsystems（现已被Oracle收购）于1995年发布。它的主要...
"学生打字速度测试软件"是专为学生群体定制的，旨在帮助他们提升打字技巧，提高学习效率，特别是在数字化学习日益普及的今天，良好的打字能力成为一项基本技能。 该软件的主要功能可能包括： 1. **速度测试**：...