本技术包括：jquery.js 技术,bootstrap技术,html5的number控件技术等.
代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Add Demo</title>
<link rel="stylesheet" type="text/css" href="../bootstrap-v4/css/bootstrap.css">
<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;
}
</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">计算</button>
</div>
<script src="../jquery3-3-1/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
$(".btn").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("angry");
$("#cardbody").addClass("happy");
}
else
{
$("#tip").text("fool!");
$("#cardbody").removeClass("happy");
$("#cardbody").addClass("angry");
}
$("#SumNum").removeClass("mygreen");
$("#SumNum").addClass("myred");
});
})
</script>
</body>
</html>
angry.gif 及 happy.gif 动画gif图片下载:
https://files.cnblogs.com/files/exesoft/PicGif.zip
bootstrap.css文件和jquery-3.3.1.min.js文件下载
https://share.weiyun.com/5xo9Lbg
最终作业提交方式:
看懂上面代码,并复制到到自定义html文件中,进行预览测试。
用手机抓页面预览动态演示视频,最后把视频传至我的邮箱:ma@exesoft.cn
邮件名称类似:
2018电商1班-18-张三-4-13-网页作业,红字要符合自己.