第三方前端库的技术综合演练-2

本技术包括：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:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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>
  &nbsp;
  <button class="btn" id="cal">计算</button>
</div>
<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>

angry.gif 及 happy.gif 、set.gif 动画图片下载:

https://files.cnblogs.com/files/exesoft/pic.zip

bootstrap.css文件和jquery-3.3.1.min.js文件下载
https://share.weiyun.com/5xo9Lbg

最终作业提交方式:

看懂上面代码,并复制到到自定义html文件中,进行预览测试。
用手机抓页面预览动态演示视频,最后把视频传至我的邮箱:ma@exesoft.cn
邮件名称类似:

2018电商1班-18-张三-4-13-网页作业,红字要符合自己.