Last Work-随机出题加法游戏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Last Work</title>
<style type="text/css">
#gif {
	width: 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>
Last Work-随机出题加法游戏

猜你喜欢
