js打字练习

这是初始的图片

 

运行之后的图片，每次都会计算你对了几个，错了几个，以及正确率

 html代码：

<mian>

        <div id="char">A</div>

        <div id="result">请在按键上按下屏幕上显示的字母</div>

    </mian>

css样式：

 body {

            margin: 0;

            display: flex;

            justify-content: center;

            align-items: center;

            text-align: center;

            background: radial-gradient(circle, #444, #000, #000);

        }

        #char {

            font-size: 400px;

            color: lightgreen;

            text-shadow: 0 0 50px #666;

        }

        #result {

            font-size: 20px;

            color: #888;

        }

        #char.error {

            color: red;

        }

js代码：

 var code;

    var okCount = 0;

    var errorCount = 0;

    var charBox = document.getElementById('char');

    var result = document.getElementById('result');

    function show() {

        var rand = Math.random();

        code = rand * 26;

        code = Math.floor(code);

        code = code + 65;

        var char = String.fromCharCode(code);

        charBox.innerHTML = char;

    }

    show();

    window.onkeydown = function (ev) {

        var key = ev.keyCode;

        if (key == code) {

            okCount++;

            show();

        } else {

            errorCount++;

        }

        showResult();

    }

    function showResult() {

        var rate = 100 * okCount / (okCount + errorCount);

        result.innerHTML = '正确' + okCount + '个' + '错误' + errorCount + '个' +

            '正确率' + rate.toFixed(2) + '%';

    }

代码比较简单，有需要的自取!