本技术包括：jquery.js 技术,bootstrap技术,html5的number控件技术等.
在上次基础上,增加了一个出题按钮,又增加了一个set.gif动画.
代码如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Add Demo</title> <link href="https://cdn.bootcss.com/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet"/> <script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.js"></script> <style type="text/css"> .mygreen { color: green; } .myred { color: red; } .input-group { margin-bottom: 20px; } .card { margin-top: 20px; margin-bottom: 20px; } .happy { background-image: url(pic/happy.gif); background-repeat: no-repeat; background-position: 180px; background-size: 100px 100px; } .angry { background-image: url(pic/angry.gif); background-repeat: no-repeat; background-position: 180px; background-size: 100px 100px; } .set { background-image: url(pic/set.gif); background-repeat: no-repeat; background-size: 100px 100px; background-position: 180px; animation: mymove 5s 2; -webkit-animation: mymove 5s 2; } @keyframes mymove { from { background-position: 180px; } to { background-position: 300px; } } @-webkit-keyframes mymove { from { background-position: 180px; } to { background-position: 300px; } } </style> </head> <body> <div class="container"> <div class="card"> <div class="card-header"> 加法算术练习 </div> <div id="cardbody" class="card-body"> <h5 class="card-title">温馨提示:</h5> <p id="tip" class="card-text">您好!</p > <a href="#" class="btn btn-primary">本人主页</a > </div> </div> <label for="FirstNum">请输入第1个数:</label> <div class="input-group input-group-lg"> <div class="input-group-prepend"> <span class="input-group-text" id="inputGroup-sizing-lg1">First Num: </span> </div> <input id="FirstNum" step="0.01" min="0" max="100" type="number" value="0" class="form-control" aria-describedby="inputGroup-sizing-lg"/> </div> <label for="SecondNum">请输入第2个数:</label> <div class="input-group input-group-lg"> <div class="input-group-prepend"> <span class="input-group-text" id="inputGroup-sizing-lg">Second Num:</span> </div> <input id="SecondNum" step="0.01" min="0" max="100" type="number" value="0" class="form-control" aria-describedby="inputGroup-sizing-lg"/> </div> <label for="SumNum">请输入第3个数:</label> <div class="input-group input-group-lg"> <div class="input-group-prepend"> <span class="input-group-text" id="inputGroup-sizing-lg">Sum Num: </span> </div> <input id="SumNum" step="0.01" min="0" max="100" type="number" value="0" class="form-control" aria-describedby="inputGroup-sizing-lg"/> </div> <button class="btn" id="set">随机出题</button> <button class="btn" id="cal">计算</button> </div> <script src="../jquery3-3-1/jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ $("#set").click(function(){ var a=Math.floor((Math.random()*100)+1); var b=Math.floor((Math.random()*100)+1); $("#FirstNum").val(a); $("#SecondNum").val(b); $("#tip").text("请看题目"); $("#cardbody").removeClass("angry"); $("#cardbody").removeClass("happy"); $("#cardbody").addClass("set"); $("#SumNum").addClass("mygreen"); }); $("#cal").click(function(){ var a=$("#FirstNum").val(); var b=$("#SecondNum").val(); var c=$("#SumNum").val(); var sumC=parseFloat(a)+parseFloat(b); var sumCC=parseFloat(c); if(Math.abs(sumC-sumCC)<0.001) { $("#tip").text("Bingo!"); $("#cardbody").removeClass("set"); $("#cardbody").removeClass("angry"); $("#cardbody").addClass("happy"); } else { $("#tip").text("Fool!"); $("#cardbody").removeClass("set"); $("#cardbody").removeClass("happy"); $("#cardbody").addClass("angry"); } $("#SumNum").removeClass("mygreen"); $("#SumNum").addClass("myred"); }); }) </script> </body> </html>
