打字游戏

最新推荐文章于 2022-05-09 09:38:38 发布

养乐多掺水不加冰

最新推荐文章于 2022-05-09 09:38:38 发布

阅读量219

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/qq_41654485/article/details/103959024

版权

前端开发专栏收录该内容

8 篇文章 0 订阅

订阅专栏

效果图如下在这里插入图片描述

<!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>打字动画显示特效</title>
    <style>
        main{
            width: 500px;
            height: 600px;
            /* 弹性布局 应该写在父元素
            display:flex;
            align-items: center;
            justify-content:center; */
            background-color: bisque;
            /* 设置字体 */
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
            text-align: center;
            font-size: 30px;
        }
        body{
            /* 弹性布局 */
            display:flex;
            /* 竖直在父元素内居中，若不设置父元素的高度，则父元素高度为子元素的内容高度，因此设置main的父元素 body的高度为100%  */
            align-items: center;
            justify-content:center;
        }
        html body{
            ight: 100%;
        }
        #letter{
            width: 500px;
            height: 500px;
            border: 1px royalblue solid;
            background-color: lightgray;
            border-radius: 50%;
            line-height: 500px;
            font-size: 300px;
            
        }
        #resulr{
            margin: 0 auto;
            padding: 0;
            display: inline-block;

        }
        /* 做帧动画 */
        .fadein{
            animation: fadin 1s;
        }
        /* 做关键帧动画 */
        @keyframes fadin {
            0% {
                scale: (0.1);
            }
            100%{
                scale: (1);
            }
        }
        .shake{
            animation: shake 1s;
        }
        @keyframes shake {
            0%{
                transform: translate(0,0);
                
            }
            25%{
                transform: translate(-100px,0);
            }
            50%{
                transform: translate(0,0);
            }
            75%{
                transform: translate(100px,0);
            }
            100%{
                transform: translate(0,0);
            }
        }
    </style>
</head>
<body>
    <main>
        <div id="letter">F</div>
        <hr style="margin:16px 0 0 0;padding: 0;">
        <p id="result">正确0个，错误0个，正确率0%</p>
    </main>
<script>

    var rightNum = 0;
    var wrongNum = 0;
    var letterdiv = document.getElementById("letter");
    // 将随机生成字母封装在一个方法里
    function changLetter(){
            // 随机数Math.random 是一个[0,1)的小数，而A~Z的ASCII码是65~90的整数 ASCII码
    var num = Math.random()*26;
    // 向下取整转换成[0,26)整数,再加65变成[65,90]的整数
    num= Math.floor(num)+65;
    //再将ASCII码转化为字母
    var displayLetter=String.fromCharCode(num)
    // 显示在id为“letter”的div里
    letterdiv.textContent=displayLetter;
    }

    changLetter();
    //键盘被点击
    document.body.onkeydown = function(e){
        // e为键盘所输入的信息
        // 控制台输出日志 打印e的信息
        console.log(e);
        // 显示的字母的ASCII码
        var disLetter=letterdiv.textContent.charCodeAt();
        //键盘键入的字母的ASCII码
        var pressLetter= e.keyCode; //keyCode C一定要大写 ！！！！
        //如果二者相同
        if(disLetter==pressLetter){
            // 调用一次改变字母方法
            changLetter();
            // 增加div的类名，添加动画
            letterdiv.classList.add("fadein");
            // 延迟执行，再移除类，否则动画只显示一次
            setTimeout(() => {
                letterdiv.classList.remove("fadein");
            }, 300); //单位毫秒
            rightNum++;
        }else{
            // 不相等时，同上
            letterdiv.classList.add("shake");
            setTimeout(() => {
                letterdiv.classList.remove("shake");
            }, 300);
            wrongNum++;
        }
        
        var result = rightNum/(rightNum+wrongNum);
         
         result = result.toFixed(2);

        document.getElementById("result").textContent ="正确"+rightNum+"个,错误"+wrongNum+"个,正确率"+result+"%";
    }
</script>
</body>
</html>

动画讲述链接
https://www.jianshu.com/p/15f2adfbdad0

养乐多掺水不加冰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
打字游戏

<!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-U...
复制链接

扫一扫