<!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>