JS实现网页版的键盘指法练习功能

最新推荐文章于 2023-02-24 23:19:39 发布

打杂人

最新推荐文章于 2023-02-24 23:19:39 发布

阅读量3.1k

点赞数 1

文章标签： border class function div javascript scroll

Web 前端乱炖专栏收录该内容

341 篇文章 3 订阅

订阅专栏

<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">时间:0秒正确:0个错误:0个正确率:100% 速度:0个/秒</div>
 <hr> 
 <center>
 A
 
 <div align="center" style="border:1px dotted gray;padding:20px;width:600px;">
 QWERTYUIO 
 ASDFGHJKL 
 ZXCVBNM
 </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.οnkeydοwn=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.οnkeyup=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>
 
 <hr>
 <div style="font-size:9pt"><a href="http://www.pigzz.com">键位练习</a></div>
 
 </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>

打杂人

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS实现网页版的键盘指法练习功能

JS指法练习软件 span { margin-top:10px; margin-left:10px; margin-right:10px; font-size:20pt; border:1px solid gray; padding-top:5px; padding-bottom:5p
复制链接

扫一扫