打字小游戏 | 易学教程

打字小游戏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            h1{
                text-align: center;
            }
        </style>
    </head>
    <body>
    <div id="clock">
        倒计时：<span>10</span>秒
    </div>
        <h1></h1>
        <script type="text/javascript">
            var h1=document.querySelector("h1")
            var html=document.querySelector("html")
            var charcode;
            var num=0;
            var time=10;
            function rand(){
                var random = parseInt(Math.random()*26)
             charcode=65+random;
             //数字转换成字符
            var str = String.fromCharCode(charcode)
            h1.innerHTML=str;
            }
            rand()
            //键盘按键事件
            html.onkeydown=function(e){
                if(charcode==e.keyCode)
                 {num++;
                     rand()
                     
                 h1.style.color="#FFFF00"
                 //文本阴影
                 h1.style.textShadow="blue"
                 }
                 else{
                     rand()
                     h1.style.color="red"
                     
                 }
         
            }
            //计时器
            var clock= setInterval(function(){
                var span=document.querySelector("span")
                time--;
                span.innerHTML=time
                if(time==0)
                {
                    //删除计时器
                    clearInterval(clock)
                alert("你每分钟能打"+num*6+"字！！！")
                }
            },1000)
            
        </script>
    </body>
</html>

来源：https://www.cnblogs.com/a155-/p/12237894.html

标签

var

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!