JS网页版的键位指法练习软件源代码

答案：<html>
<head>
<title>JS指法练习软件</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
span
{
margin-top:10px;
margin-left:10px;
margin-right:10px;
font-size:20pt;
border:1px solid gray;
padding-top:5px;
padding-bottom:5px;
padding-left:10px;
padding-right:10px;
background:#fffff0;
border-width:0 1px 1px 0;
}
.span1
{
color:red;
border:none;
padding:0;
margin:0;
background:silver;
}
</style>
</head>
<body bgcolor="silver" style="margin:0" scroll="no">
<div align="center" style="font-size:10pt;color:green">时间:<span class="span1" id="spantime">0</span>秒 正确:<span class="span1" id="rig">0</span>个 错误:<span class="span1" id="err">0</span>个 正确率:<span class="span1" id="spanpercent">100%</span> 速度:<span class="span1" id="spanspeed">0</span>个/秒</div>
<hr><br><br><br>
<center>
<span style="color:red;font-weight:bold;font-size:40pt;padding:5px;" id="sys">A</span>

<br><br><br>
<div align="center" style="border:1px dotted gray;padding:20px;width:600px;">
<span id="Q">Q</span><span id="W">W</span><span id="E">E</span><span id="R">R</span><span id="T">T</span><span id="Y">Y</span><span id="U">U</span><span id="I">I</span><span id="O">O</span><span id=""></span><br><br><br><br>
<span id="A">A</span><span id="S">S</span><span id="D">D</span><span id="F">F</span><span id="G">G</span><span id="H">H</span><span id="J">J</span><span id="K">K</span><span id="L">L</span><br><br><br><br>
<span id="Z">Z</span><span id="X">X</span><span id="C">C</span><span id="V">V</span><span id="B">B</span><span id="N">N</span><span id="M">M</span>
</div>

<script language="javascript">
var var1,word,killword,rig02=0,err02=0,num=0,num2=0,numper=0
function sysword()
{
word="QWERTYUIOPLKJHGFDSAZXCVBNM".charAt(Math.floor(Math.random()*26));
document.getElementById(word).style.background="pink"
sys.innerText=word;
}
sysword()

document.onkeydown=function()
{
var1=String.fromCharCode(event.keyCode)
if(var1==word)
{
rig.innerText=(++rig02)
}
else
{
err.innerText=(++err02)
diverr.style.visibility="visible"
setTimeout("diverr.style.visibility='hidden'",500)

}

document.getElementById(word).style.background="#fffff0"
if(/[^A-Z]/g.test(var1))
{
alert("请按字母键!");
}
else
{
document.getElementById(var1).style.background="red";
sysword();
}
}

document.onkeyup=function()
{
document.getElementById(var1).style.background="#fffff0";
num=rig02+err02
num2=rig02/num
num2=num2*100
num2=Math.round(num2)
spanpercent.innerText=num2+"%"
numper=num/vartime
numper=numper*10
numper=Math.round(numper)
numper=numper/10
spanspeed.innerText=numper

}
var vartime=0
setInterval("spantime.innerText=(++vartime)",1000)
</script>
<br><br>
<hr>
<div style="font-size:9pt">键位练习</div>
<br><br><br><br>
</center>
<div style="position:absolute;z-index:100;filter:alpha(style=1,opacity=50) shadow(color=yellow,strength=100);color:maroon;font-size:95pt;font-weight:bold;top:40;left:0;width:100%;height:100%;visibility:hidden" align="center" id="diverr">错误</div>
</body>
</html>
上一个：IE VML技术生成书法字体
下一个：JavaScript使用正则提取括号或者div的内容
更多图片编程知识: