首页 > 代码库 > bobojQuery实现倒计时效果

bobojQuery实现倒计时效果

使用jQuery实现倒计时效果,这个实例是在页面上显示剩余几天几小时几分几秒的效果。

        在头部引用最新的jQuery.js文件:

         <head>

         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

         <script src="http://www.mamicode.com/jQuery.js" type="text/javascript"></script>

         </head>

         前台页面:

         <body>
         <div id="remainSeconds" style="display:none">180000</div>
         <div id="remainTime" style="font-size:20px;font-weight:800;color:#FF9900"></div>
         </body>

          jQuery代码:

          <script type="text/javascript" language="javascript">
          var SysSecond;
          var InterValObj;
          $(document).ready(function() {
          SysSecond = parseInt($("#remainSeconds").html());
          InterValObj = window.setInterval(SetRemainTime, 1000);
          });
          function SetRemainTime() {
          if (SysSecond > 0) {
          SysSecond = SysSecond - 1;
          var second = Math.floor(SysSecond % 60); 
          var minite = Math.floor((SysSecond / 60) % 60);
          var hour = Math.floor((SysSecond / 3600) % 24); 
          var day = Math.floor((SysSecond / 3600) / 24);
          $("#remainTime").html(day + "天" + hour + "小时" + minite + "分" + second + "秒");
           } else {
           window.clearInterval(InterValObj);
           }
           }
           </script>