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

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

首先是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();});});

欢迎朋友来交流。

用JQuery实现简单计时答题游戏相关推荐

投色子抽奖游戏 html,jQuery实现简单的抽奖游戏
今天要写的是,利用jQuery写一个抽奖的案例,页面包含四个组件,两个按钮分别是开始和停止的按钮.两个box,分别盛放人员和奖品.当点击开始按钮时,人员不停地进行切换.抽奖的box中显示等待抽奖结果. ...
python编写赛车游戏单机版_使用Python中OrderedDict模拟一个简单的竞速游戏排名
上一篇,我们梳理了Python中关于字典排序的一些常用方法(杂乱无章的数据结构如何进行排序,简明讲述Python字典排序那些事).其中,我们讲到了Python的collections模块中的Order ...
游戏开发：js实现简单的板球游戏
js实现简单的板球游戏大家好,本次我们来使用js来实现一个简单的板球游戏.截图如下: 首先,设计页面代码,页面代码很简单,因为整个几乎是使用js编写的,页面几乎没有代码,如下: <!DOCTY ...
pygame简单的俄罗斯方块游戏和简单的打字游戏
1.pygame简单的俄罗斯方块游戏一.对战的方块管理定义一个BlockManage管理对战的方块根据BlockManage根据传入的玩家id返回方块,保证每个玩家拿到的方块序列是一致的,所以在 ...
pygame做一个简单的打字游戏
pygame做一个简单的打字游戏 1.基本代码下面的代码完成了每一秒在界面的顶部随机生成一个新的字母 # -*- coding=utf-8 -*- import pygame from pygame ...
C++编写简单的俄罗斯方块游戏
代码地址如下: http://www.demodashi.com/demo/14593.html C++编写简单的俄罗斯方块游戏使用C++编写一个简单的俄罗斯方块游戏. 1 环境要求使用C++图形 ...
用Python做一个超简单的小游戏（一听就懂）
前言有的人可能学过一点Python基础,但不知道干什么好.今天就教大家做一个简单的小游戏未经允许,禁止转载文章目录前言写它会用到源码先抛出来知识讲解 random 介绍语法方法参数表 ...
百万英雄类答题游戏的程序员打开方式
最近知识答题类的app应用和网站都很火所以机器人多了,,百度度秘.搜狗小汪等 Python发挥了很大作用 <百万英雄><冲顶大会><头脑王者><一站到 ...
简单的Windows游戏-第1部分：游戏框架
我已决定使用C#和WinForms创建一个简单的Windows游戏,从而得出一系列见解. 还有其他方法可以完成此任务,但我选择了使事情保持简单并演示如何制作游戏的方法. 更有经验的开发人员会注意到我的 ...
目前大部分的游戏框架_简单的Windows游戏-第1部分：游戏框架
目前大部分的游戏框架我已决定使用C#和WinForms创建一个简单的Windows游戏,从而得出一系列见解. 还有其他方法可以完成此任务,但我选择了使事情保持简单并演示如何制作游戏的方法. 经验丰富 ...

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

用JQuery实现简单计时答题游戏相关推荐

最新文章

热门文章