字母打字练习--键盘事件onkeydown--keycode - css

最新推荐文章于 2022-05-30 08:53:54 发布

Rki-dor

最新推荐文章于 2022-05-30 08:53:54 发布

阅读量280

点赞数

原文链接：http://www.cnblogs.com/web-learning/p/10483019.html

版权

字母打字练习--键盘事件onkeydown--keycode - css，效果如图所示

html

<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="common.js"></script>
<script>
    // 按键正确： "animated zoomIn";
    // 按键错误： "animated shake error";
    //页面加载  char中随机显示 A--Z之间的任意一个字符   65 --- 90
    //在页面中显示A--Z之间的任意一个字符
    //初始化页面显示随机字母

    //1给页面初始化随机大写字母，在char中显示

    //2.给document注册一个onkeydowng事件
    //3.获取char的innderHTML值 cVal;
    //4.获取对应的按键的键码值
    //5.根据键码值得一个字符  String.fromCharCode(键码值);
    //6.用字符与cVal进行判断，如果相等表示输入正确，否则表示输入错误
    //7.正确，难char设置正确class动画效果
    //立即给char切换到下一个字母
    //统计正确个数
    //统计正确率
    //8.错误，难char设置错误class动画效果
    //统计错误个数
    //统计正确率
    function toPercent(point) {
        var str = Number(point * 100).toFixed(1);
        str += "%";
        return str;
    }

    let $letter = $('#char');
    let $content = $('#result');
    let rigCount = 0;
    let errCount = 0;

    $letter.innerHTML = String.fromCharCode(getRandom(90, 65));
    document.onkeydown = function (e) {
        e = e || window.event;
        var code = e.keyCode || e.which
        let key = String.fromCharCode(e.keyCode)
        //   console.log(key);
        //   console.log($letter.innerHTML)
        if (key == $letter.innerHTML) {
            $letter.innerHTML = String.fromCharCode(getRandom(90, 65));
            $letter.className = 'animated zoomIn';
            rigCount++;
        }
        else {
            $letter.className = 'animated shake error';
            errCount++;
            let count = rigCount / (rigCount + errCount);
            
            $content.innerHTML = "答对" + errCount + "道，答错" + rigCount + "道，正确率" + toPercent(count);
        }
    }

</script>

转载于:https://www.cnblogs.com/web-learning/p/10483019.html

Rki-dor

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
字母打字练习--键盘事件onkeydown--keycode - css

字母打字练习--键盘事件onkeydown--keycode - css，效果如图所示html<html><head> <meta charset="utf-8"> <title>打字游戏</title>  <link rel="s...
复制链接

扫一扫