<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Last Work</title>
<style type="text/css">
#gif {
150px;
height: 150px;
background-color: #CCC;
background-size: 100% 100%;
}
.setques {
background-image: url(gif/lookfarward.gif);
}
.right {
background-image: url(gif/happy.gif);
}
.wrong {
background-image: url(gif/babyAngry.gif);
}
table, td {
border: solid 1px grey;
}
</style>
</head>
<body>
<div id="gif" class="setques"></div>
<table width="300" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>运算次数:</td>
<td id="count">0</td>
</tr>
<tr>
<td>正确次数:</td>
<td id="rightcnt">0</td>
</tr>
<tr>
<td>错误次数:</td>
<td id="wrongcnt">0</td>
</tr>
</table>
<br/>
<input name="FirstNum" type="text" id="FirstNum" readonly>
+
<input name="SecondNum" type="text" id="SecondNum" readonly>
=
<input type="text" name="SumNum" id="SumNum">
<br/>
<br/>
<button id="SetQues">随机出题</button>
<button id="Veri">验证</button>
<script src="jquery-3.4.0.min.js"></script>
<script type="text/javascript">
$(function (){
var count=0;
var rightcnt=0;
var wrongcnt=0;
var c;
$("#SetQues").click(function(){
var a=Math.floor((Math.random()*100)+1);
var b=Math.floor((Math.random()*100)+1);
$("#FirstNum").val(a);
$("#SecondNum").val(b);
c=a+b;
count=count+1;
$("#count").text(count)
});
$("#Veri").click(function(){
var sum=$("#SumNum").val();
s=parseInt(sum);
if(s==c)
{
$("#gif").removeClass();
$("#gif").addClass("right");
rightcnt=rightcnt+1;
$("#rightcnt").text(wrongcnt);
}
else{
$("#gif").removeClass();
$("#gif").addClass("wrong");
wrongcnt=wrongcnt+1;
$("#wrongcnt").text(wrongcnt);
}
});
});
</script>
</body>
</html>