JS小练习
实现一个简单的页面
点击开始答题按钮,进入答题页面,倒计时30s,答对积分,答错不扣分,时间结束后回到初始状态,点击答题记录按钮,出现上一次的答题记录,若答题记录较多,会出现滚动条
<!DOCTYPE>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>WebWork7</title>
<style type="text/css">
.div_one{
margin: 0 auto;
overflow:hidden;
width: 600px;
height: 600px;
background-color: rgb(221, 221, 221);
border:3px solid #000;
}
.div_two{
margin: 0 auto;
width: 600px;
height: 600px;
background-color: white;
display: none;
border:3px solid #000;
}
#result{
width: 260px;
height: 400px;
display: none;
background-color:rgb(221, 221, 221);
border-style: none;
}
#div1_1{
text-align: center;
margin-top: 100px;
}
#div1_2{
text-align: center;
margin-top: 10px;
overflow:hidden;
}
#div2_1{
padding-top: 30px;
padding-left: 50px;
}
#div2_2{
padding-top: 40px;
padding-left: 50px;
}
#div2_3{
padding-top: 40px;
padding-left: 50px;
}
</style>
</head>
<body>
<div id="div1" class="div_one">
<div id="div1_1">
<button id="btn_start" onclick="start()">开始答题</button>
<button id="btn_recod" onclick="record()">答题记录</button>
</div>
<div id="div1_2">
<textarea id="result"></textarea>
</div>
</div>
<div id="div2" class="div_two">
<div id="div2_1">
<a>倒计时:</a>
<a id="a_time">30</a>
<a>S</a>
<a style="padding-left: 250px;">得分:</a>
<a id="a_score">0</a>
</div>
<div id="div2_2">
<a id="a_adden1">12</a>
<a>+</a>
<a id="a_adden2">12</a>
<a>=</a>
<input id="input_answer"/>
</div>
<div id="div2_3">
<button onclick="sub_answer()">提交答案</button>
</div>
</div>
<script>
var answer = ['arr'];
div1 = document.getElementById("div1");
div2 = document.getElementById("div2");
btn_start = document.getElementById("btn_start");
btn_recod = document.getElementById("btn_recod");
a_time = document.getElementById("a_time");
a_score = document.getElementById("a_score");
a_adden1 = document.getElementById("a_adden1");
a_adden2 = document.getElementById("a_adden2");
result = document.getElementById("result");
input_answer = document.getElementById("input_answer")
var add1 = Math.round(Math.random()*100);
var add2 = Math.round(Math.random()*100);
if(add1<10){
add1+=10;
}
if(add2<10){
add2+=10;
}
var maxtime = 29 ;
var score = 0;
function CountDown(){
if (maxtime >= 0){
seconds = Math.floor(maxtime % 60);
a_time.innerHTML = seconds;
--maxtime;
}else{
div1.style.display="block";
div2.style.display="none";
clearInterval(timer);
}
}
function sub_answer(){
var_input_answer = input_answer.value;
console.log(var_input_answer)
console.log(a_adden1.innerHTML)
answer.push(a_adden1.innerHTML)
answer.push(a_adden2.innerHTML)
answer.push(var_input_answer)
if(parseInt(var_input_answer)==parseInt(a_adden1.innerHTML)+parseInt(a_adden2.innerHTML)){
score += 10;
a_score.innerHTML = score;
answer.push("对")
}else{
answer.push("错")
}
console.log(answer)
input_answer.value = null;
var add1 = Math.round(Math.random()*100);
var add2 = Math.round(Math.random()*100);
if(add1<10){
add1+=10;
}
if(add2<10){
add2+=10;
}
a_adden1.innerHTML = add1;
a_adden2.innerHTML = add2;
}
function start(){
score = 0;
maxtime =29;
a_score.innerHTML = score;
a_time.innerHTML = "30";
answer = ['arr'];
result.style.display = "none";
div1.style.display="none";
div2.style.display="block";
timer = setInterval("CountDown()", 1000);
a_adden1.innerHTML = add1;
a_adden2.innerHTML = add2;
}
function record(){
result.style.display = "inline-block";
if(answer.length>2 && result.innerHTML==""){
for(var i=0;i<answer.length/4-1;i++){
if(answer[i*4+3]==""){
result.innerHTML += answer[i*4+1] + "+" + answer[i*4+2]+"="+answer[i*4+3]+" "+"结果:"+answer[i*4+4];
}else{
if(parseInt(answer[i*4+3])>100){
result.innerHTML += answer[i*4+1] + "+" + answer[i*4+2]+"="+answer[i*4+3]+"   "+"结果:"+answer[i*4+4];
}else{
result.innerHTML += answer[i*4+1] + "+" + answer[i*4+2]+"="+answer[i*4+3]+" "+"结果:"+answer[i*4+4];
}
}
}
}
}
</script>
</body>
</html>