HTML+CSS+JS实现小学四则运算自动出题程序
要求
编写一个小学四则运算自动出题程序
要求:
1、100以内四则运算,题目自动生成;
2、页面需要有计算结果输入框,提交按钮;
3、用户提交结果之后系统能自动计算成绩;
4、系统能提示用户答错的题号,可以在答错的题号后做一个标记。
代码
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
.header{
margin-top: -30px;
height: 135px;
width: 40%;
margin-left: auto;
margin-right: auto;
/* margin: 30px auto; */
background: url(img/Logo.PNG);
background-position:-30px -42px;
/* border: red 1px solid; */
}
.content{
height: 510px;
width: 40%;
margin-left: auto;
margin-right: auto;
/* border: red 1px solid; */
background: url(img/timg.jpg);
}
.content-1{
width: 100%;
height: 50px;
/* border: red 1px solid; */
line-height: 50px;
margin-left: 250px;
}
.content-1 span{
font-size: 18px;
}
.content-1 input{
width: 30px;
}
.footer{
width: 40%;
height: 40px;
margin-left: auto;
margin-right: auto;
/* border: red 1px solid; */
}
form{
width: 25%;
height: 20px;
/* border: red 1px solid; */
margin-left: auto;
margin-right: auto;
margin-top: 10px;
position: relative;
}
.footer input{
width: 60px;
background-color: antiquewhite;
}
#bt2{
position: absolute;
right: 0;
}
</style>
</head>
<body>
<!-- 头部信息 -->
<div class="header">
<span id="id_M">00</span>
<span id="id_S">00</span>
</div>
<!-- 出题内容 -->
<div class="content">
<div class="content-1">
<span class="sp">3 + 3 = </span>
<input type="text" class="answer" value="" />
</div>
<div class="content-1">
<span class="sp">3 + 3 = </span>
<input type="text" class="answer" value="" />
</div>
<div class="content-1">
<span class="sp">3 + 3 = </span>
<input type="text" class="answer" value="" />
</div>
<div class="content-1">
<span class="sp">3 + 3 = </span>
<input type="text" class="answer" value="" />
</div>
<div class="content-1">
<span class="sp">3 + 3 = </span>
<input type="text" class="answer" value="" />
</div>
<div class="content-1">
<span class="sp">3 + 3 = </span>
<input type="text" class="answer" value="" />
</div>
<div class="content-1">
<span class="sp">3 + 3 = </span>
<input type="text" class="answer" value="" />
</div>
<div class="content-1">
<span class="sp">3 + 3 = </span>
<input type="text" class="answer" value="" />
</div>
<div class="content-1">
<span class="sp">3 + 3 = </span>
<input type="text" class="answer" value="" />
</div>
<div class="content-1">
<span class="sp">3 + 3 = </span>
<input type="text" class="answer" value="" />
</div>
</div>
<!-- 底部标签 -->
<div class="footer">
<form action="" method="">
<input type="button" id="bt1" value="判断" />
<input type="button" id="bt2" value="下一页" />
</form>
</div>
<!-- JS脚本 -->
<script type="text/javascript">
// 计时变量
var c = 0
var timer = null
var oBt1 = document.getElementById("bt1")
var oBt2 = document.getElementById("bt2")
var oContent = document.getElementsByClassName("sp")
var Answer = document.getElementsByClassName("answer")
var id_S = document.getElementById("id_S")
var id_M = document.getElementById("id_M")
// console.log(Answer)
// strs = str.split(",")
// console.log(oContent)
oBt1.onclick = function(){
var count = 0
for(var i = 0;i < oContent.length;i++){
strs = oContent[i].innerHTML.split(" ")
Ans = Answer[i].value
// console.log(Ans)
var add1 = strs[0]
var operator = strs[1]
var add2 = strs[2]
// console.log(strs)
// console.log(operator)
if(operator == "+"){
// alert(222)
if(Number(add1) + Number(add2) == Number(Ans)){
count++;
}else{
Answer[i].style.backgroundColor = "red";
}
}
if(operator == "-"){
if(Number(add1) - Number(add2) == Number(Ans)){
count++;
}else{
Answer[i].style.backgroundColor = "red";
}
}
}
// 新增计时功能,结束计时
c = 0
//数据清零
Min = id_M.innerText
S = id_S.innerText
id_S.innerHTML = "00"
id_M.innerHTML = "00"
alert("恭喜你答对了"+count+"题!"+"共用时"+Min+"分"+S+"秒!")
}
// 下一页 开始计时
oBt2.onclick = function(){
alert("success")
for(var i = 0;i < oContent.length;i++){
Answer[i].style.backgroundColor = "white";
Answer[i].value = " "
var add1 = parseInt(Math.random()*100)
var add2 = parseInt(Math.random()*100)
var ope = Math.round(Math.random())
strs = oContent[i].innerHTML.split(" ")
if(ope == 0){
strs[1] = "+"
}
if(ope == 1){
strs[1] = "-"
}
// console.log(oContent[i].innerText)
// console.log(strs)
strs[0] = add1
strs[2] = add2
// console.log(strs)
oContent[i].innerText = strs[0]+" "+strs[1]+" "+strs[2]+" "+strs[3]+" "+strs[4]+" "
}
// 新增计时功能,开始计时
timer = setInterval(function() {
c++;
// console.log(c)
// 需要改变页面上时分秒的值
// console.log($("id_S"))
id_S.innerHTML = showNum(c % 60)
id_M.innerHTML = showNum(parseInt(c / 60) % 60)
},1000)
}
//封装一个处理单位数字的函数
function showNum(num) {
if (num < 10) {
return '0' + num
}
return num
}
</script>
</body>
</html>
自动出题功能:
判错功能:
计时功能: