zoukankan      html  css  js  c++  java
  • 第三方前端库的技术综合演练-1

    本技术包括: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-网页作业,红字要符合自己.

  • 相关阅读:
    firefox和ie下面的初始化checkbox
    全球宽带排名出炉 韩国第一中国未入榜(附表)
    逆向查询所有父栏目
    js的点点滴滴
    Treeview绑定数据源 层叠结构数据源的应用
    asp.net读取服务器端文件夹列表
    Treeview绑定数据源 层叠结构数据源的应用(续--完善篇)
    VC数据类型
    jQuery核心文档(翻译中)
    iscroll 下拉刷新,上拉加载
  • 原文地址:https://www.cnblogs.com/exesoft/p/12692535.html
Copyright © 2011-2022 走看看