简易版打字机（只有大写字母的）

1.根据ASCII码值转化成对应的字母或字符：

 char = String.fromCharCode(ASCword);

2.显示正确率：
防止出现无限小数，.toFixed(2)可以只保留两位小数

resultBox.innerHTML = "正确："+correct +"个"+" 错误："+
						error+"个"+"正确率："+percent.toFixed(2)+"%";

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding: 0;margin: 0;
        }
        body,html{
            width: 100%;
            height: 100%;
            background-color: grey;
            text-align: center;
        }
        .wrapper{
            width: 100%;
            height: 100%;
        }
        .char{
            font-size: 400px;
            color: lightgreen;
        }
        .result{
            font-size: 20px;
            color:black;
        }
        .error{
            color: red !important;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="char">A</div>
        <div class="result">请在按键上按下屏幕上显示的字母</div>
    </div>
    <script>
        window.onload = function(){
            var temp;
            var char = 0,
                correct = 0,
                error = 0,
                percent;

            var charBox = document.getElementsByClassName('char')[0];
            var resultBox = document.getElementsByClassName('result')[0];
            // 1.初始界面：每次打开页面的都不一样，随机出现的
            // 检测键盘按下事件：按下，获取按下的值。与屏幕中出现的值对比，改变底下result的内容。
            showWord();
            window.onkeydown = function (e){
                var keyCode = e.keyCode;
                if(keyCode == temp){
                    // 正确，页面刷新
                    charBox.className = "char";
                    showWord();
                    correct++;
                    percent = (correct/(correct+error))*100;
                    resultBox.innerHTML = "正确："+correct +"个"+" 错误："+error+"个"+"正确率："+percent.toFixed(2)+"%";
                }else{
                    // 错误，页面变红
                    error++;
                    charBox.className = "char error";
                    percent = (correct/(correct+error))*100;
                    resultBox.innerHTML = "正确："+correct +"个"+" 错误："+error+"个"+"正确率："+percent.toFixed(2)+"%";
                }
            }
            function showWord(){
                //   ABCDEFG HIJKLMN OPQIST UVWXYZ ZHANSHI 展示大写字母，其ASCII码值范围在65~90
                temp = Math.floor(Math.random()*25+65);
                char = String.fromCharCode(temp);
                console.log(char);
                charBox.innerHTML = char;
            }
        }
    
    </script>
</body>
</html>

简易版打字机（只有大写字母的）

猜你喜欢