用JQuery实现简单计时答题游戏

最新推荐文章于 2024-07-03 02:56:15 发布

小小舍

最新推荐文章于 2024-07-03 02:56:15 发布

阅读量1.4k

点赞数 3

分类专栏： jquery

本文链接：https://blog.csdn.net/qq_43560721/article/details/83722552

版权

jquery 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

题的大概效果图是这样的：

首先是body里的页面显示代码：

<body onload="setNumber()">
<div class="div">
    <div class="div2">
        计时:<label></label><br>
        积分:<label>0</label>
    </div>
    <div class="div3">
        答对:<label>0题</label><br>
        答错:<label>0题</label>
    </div>
    <div class="div4">
        <label>数一</label>
        <label>运算符</label>
        <label>数二</label>&nbsp;=
        <input type="text" class="div5">
    </div>
    <div class="div6">
        <label>确定</label>
    </div>
</div>
</body>

然后是css外部样式代码：

@charset "utf-8";
*{
    color: white;
}
.div{
    background-image: url("black.png");
    width: 800px;
    height: 513px;
    margin:10px auto;
    border: 1px solid white
}
.div2{
    margin-left: 80px;
    margin-top: 60px;
    color: white;
    width: 80px;
    height: 60px;
    float: left
}
.div3{
    margin-right: 80px;
    margin-top: 60px;
    color: white;
    width: 80px;
    height: 60px;
    float: right
}
.div4{
    width: 320px;
    height: 50px;
    margin:200px auto auto auto;
    font-size: 40px;
    color: white;
}
.div5{
    width: 100px;
    height: 50px;
    background:rgba(255,255,255,0);
    border-left-style: none;
    border-right-style: none;
    border-top-style: none;
    color: white;
    outline:none;
    font-size: 40px;
}
.div6{
    width: 80px;
    height: 50px;
    margin:80px auto auto auto;
    font-size: 40px;
    color: white;
}
.div7{
    cursor: pointer;
}

（别忘了把样式链接进来，当然了也可以用内部样式）

<link rel="stylesheet" type="text/css" charset="utf-8" href="t1.css">

最后是实现功能的代码，写在script标签内：（代码还需完善，这里没有实现回车提交答案的功能）

    <script src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
    </script>

（1）显示倒计时

var i = 35;
        var j = 1;
        //时间的判断
        function test(){
            i--;
            $("label:eq(0)").html(i+"秒");
            if(i == 0){
                clearInterval(flag);
                alert("时间到!");
            }
        }
        var flag = setInterval(test,1000);

（2）获取随机数和运算符

var opt ="";
        var firstNumber = 0;
        var secondNumber = 0;
        //获取随机数和运算符
        function setNumber(){
            firstNumber = Math.floor(Math.random()*100);
            $("label:eq(4)").html(firstNumber);
            secondNumber = Math.floor(Math.random()*100);
            $("label:eq(6)").html(secondNumber);
            var optArray = new Array("+","-","*","/");
            var i = Math.floor(Math.random()*4);
            opt = optArray[i];
            $("label:eq(5)").html(opt);
        }

（3）显示答错的题

var x = 1;
        function falseNumber(){
            $("label:eq(3)").html(x + "题");
            x++;
        }

（4）写入接下来计算会用到的加减乘除方法

//加法
        function sum(i,j){
            return i+j;
        }
        //减法
        function sub(i,j){
            return i-j;
        }
        //乘法
        function mul(i,j){
            return i*j;
        }
        //除法
        function div(i,j){
            return i/j;
        }

（5）点击确定进行对应的判断

$(function(){
            $("label:eq(7)").click(function(){
                var result = "";
                var fNumber = parseFloat(firstNumber);
                var sNumber = parseFloat(secondNumber);
                if(opt == "+"){
                    result = sum(fNumber,sNumber);
                }
                if(opt == "-"){
                    result = sub(fNumber,sNumber);
                }
                if(opt == "*"){
                    result = mul(fNumber,sNumber);
                }
                if(opt == "/"){
                    result = div(fNumber,sNumber);
                }
                var inputResult = $("input").val();
                if(inputResult == result){
                    $("label:eq(2)").html(j+"题");
                    $("label:eq(1)").html(j);
                    j++;
                }else{
                    falseNumber();
                }
                setNumber();
            });
        });

欢迎朋友来交流。