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>
自動出題功能：
判錯功能：
計時功能：
