已知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.οnkeydοwn=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").οnclick=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>
1742
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
