zoukankan      html  css  js  c++  java
  • 字母打字练习

    <html>
    <head>
    <meta charset="utf-8">
    <title>打字游戏</title>
    <!--引入animate.css动画库-->
    <link rel="stylesheet" href="animate.css">
    <style>
    body{
    margin: 0;
    /*开启弹性布局,并让弹性布局中的子元素
    水平居中对齐,垂直居中对齐*/
    display: flex;
    justify-content: center;
    align-items: center;
    /*文字居中*/
    text-align: center;
    /*设置背景颜色的经像渐变*/
    background: radial-gradient(circle,#444,#111,#000);
    }
    #char{
    font-size: 400px;
    color: lightgreen;
    /*设置文字阴影*/
    /*text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色*/
    /*位置可以为负值*/
    text-shadow: 0 0 50px #666;
    }
    #result{
    font-size: 20px;
    color: #888;
    }
    /*找到id为char及类名为error的div元素*/
    #char.error{
    color: red;

    }
    </style>
    </head>
    <body>
    <mian>
    <div id="char">A</div>
    <div id="result">请在按键上按下屏幕上显示的字母</div>
    </mian>
    </body>
    </html>
    <script src="../public.js"></script>
    <script>
        // 按键正确: "animated zoomIn";
        // 按键错误: "animated shake error";
    /*
    1、页面加载后 随机出现一个大写字母
    2、当按下键盘的某个按键时,判断按下的是否是页面显示的字母
     如果按键正确,统计正确个数
         再次随机出现一个大写字母
         添加 "animated zoomIn" 动画类名
     如果按键错误 , 统计错误个数
         添加 "animated shake error" 动画的类名
    */
     
    //定义一个函数 功能 获取随机大写字母
    function showBigLetter(){
        code = rand(65,90);//随机获取大写字母的ASCII码值
        var ch = String.fromCharCode( code ); //获取code对应的大写字母
        $id("char").innerHTML = ch ;//将大写字母显示到页面上
    }
    showBigLetter();
     
    var okCount = 0 , errCount = 0;
    //添加键盘按下事件
    document.onkeydown = function(e){
        var e = e || event;
        var keycode = e.keyCode || e.which; //获取当前按下键的keyCode值
         if( code == keycode ){
             okCount++;
             $id("char").className = "animated zoomIn";
             showBigLetter();
         }else{
             errCount++;
             $id("char").className = "animated shake error";
         }
         //动画完成后 将class清空
       setTimeout( function(){
             $id("char").className = "";
       },800 )
       
       //正确率
       $id("result").innerHTML = "正确"+okCount+"个,错误"+errCount+"个,正确率是 : " + ( 100*okCount/(okCount+errCount) ).toFixed(2) + "%";
    }
    </script>
  • 相关阅读:
    mac c++编译出现segmentation fault :11错误
    ssh 连接缓慢解决方法
    237. Delete Node in a Linked List
    203. Remove Linked List Elements
    Inversion of Control Containers and the Dependency Injection pattern
    82. Remove Duplicates from Sorted List II
    83. Remove Duplicates from Sorted List
    SxsTrace
    使用CCleaner卸载chrome
    decimal and double ToString problem
  • 原文地址:https://www.cnblogs.com/tis100204/p/10319272.html
Copyright © 2011-2022 走看看