码迷,mamicode.com
首页 > Web开发 > 详细

bobojQuery实现倒计时效果

时间:2014-07-11 22:11:57      阅读:273      评论:0      收藏:0      [点我收藏+]

标签:style   http   java   color   使用   文件   

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

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

         <head>

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

         <script src="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>

bobojQuery实现倒计时效果,布布扣,bubuko.com

bobojQuery实现倒计时效果

标签:style   http   java   color   使用   文件   

原文地址:http://www.cnblogs.com/nice41/p/3833090.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!