使用原生js，写了一个心算口算天天练

最新推荐文章于 2022-05-24 18:59:06 发布

Oneself_lsl

最新推荐文章于 2022-05-24 18:59:06 发布

阅读量688

点赞数

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/qq_45503103/article/details/121267213

版权

代码不基于任何库，可以直接复制使用改进。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }
    input[type="number"] {
        -moz-appearance: textfield;
    }

    </style>
</head>
<body>
    <div style="display: flex; align-items: center; flex-direction: column;">
        <h1>心算口算天天练</h1>
        <div style="display: flex;">
            <div id="fistText"></div>
            <div id ="signText"></div>
            <div id ="lastText"></div>
            <div>=</div>
            <input style="width: 40px;" type="number" id="value" >
            <div onclick="mySuer()" style="margin-left: 10px;border: 1px solid #999; padding: 1px 3px; border-radius: 3px;">确定</div>
        </div>
    </div>
    <script>
        let result;
        start()
        function start(){
        let firstNum=Math.floor(Math.random()*(99))+1
        //这里只有三个运算方式 + - * 。
        //如果要做除的话可以使用两个数的乘积来得到 firstNum
        let sign = Math.floor(Math.random()*(3))+1
        let lastNum=Math.floor(Math.random()*(99))+1;
        let num;
        if(firstNum<lastNum){
            num=firstNum
            firstNum = lastNum
            lastNum = num
        }
            //随机生成的sign为那种运算
        switch(sign){
            case 1 :
                result=firstNum+lastNum
                textDom(firstNum,"+",lastNum)
            break
            case 2 :
                result=firstNum-lastNum
                textDom(firstNum,"-",lastNum)
            break
            case 3:
            //如果两个数都大于10 则选择小一点的数作为后面的乘数（感觉有点问题）
            //保证第二位为个位数或者最大只能为10
                if(firstNum>10&&lastNum>10){
                    lastNum = Math.round(lastNum/10)+1
                }
                result = firstNum*lastNum
                textDom(firstNum,"×",lastNum)
            break
        }
        }
        document.onkeydown = function (e) { // 回车提交表单
        // 兼容FF和IE和Opera
            var theEvent = window.event || e;
            var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
            if (code == 13) {
                mySuer()
               
            }
        }
        //判断函数
        function mySuer(){
            let value = document.querySelector("#value")
                if(value.value-0===result){
                    alert("正确")
                    value.value=""
                   start()
                }else{
                    alert("错误！答案是："+result)
                }
        }
        //修改页面值函数
        function textDom(a,b,c){
            let fistT = document.querySelector("#fistText")
            let signT = document.querySelector("#signText")
            let lastT = document.querySelector("#lastText")
            fistT.innerHTML=a
            signT.innerHTML=b
            lastT.innerHTML=c
        }
</script>
</body>
</html>

Oneself_lsl

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用原生js，写了一个心算口算天天练

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
复制链接

扫一扫