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

jquery实现倒计时

时间:2017-03-07 12:44:17      阅读:221      评论:0      收藏:0      [点我收藏+]

标签:interval   java   text   style   tle   size   res   src   char   

 1 <html>
 2 <head>
 3     <meta charset="utf-8"/>
 4     <title>jquery实现倒计时</title>
 5     <script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
 6 </head> 
 7  
 8 <body> 
 9 <div id="remainTime" style="font-size:20px;font-weight:800;color:#FF9900"></div> 
10 
11 <script type="text/javascript">
12     $(function(){
13         var now=new Date();
14         var end=new Date(2018,2,3,16,10,00);//结束的时间:年,月,日,分,秒(月的索引是0~11)
15         /*两个时间相减,得到的是毫秒ms,变成秒*/
16         var result=Math.floor(end-now)/1000; 
17         
18         var interval=setInterval(sub,1000); //定时器 调度对象
19         /*封装减1秒的函数*/
20         function sub(){
21             if (result>1) {
22                result = result - 1; 
23                var second = Math.floor(result % 60);     // 计算秒 ,取余  
24                var minite = Math.floor((result / 60) % 60); //计算分 ,换算有多少分,取余,余出多少秒
25                var hour = Math.floor((result / 3600) % 24); //计算小时,换算有多少小时,取余,24小时制除以24,余出多少小时
26                var day = Math.floor(result / (3600*24));  //计算天 ,换算有多少天
27              
28                $("#remainTime").html(day + "天" + hour + "小时" + minite + "分" + second + "秒");
29             } else{
30                 alert("倒计时结束!");
31                 window.clearInterval(interval);//这里可以添加倒计时结束后需要执行的事件 
32             }
33         };
34     });
35 </script>
36 </body>
37 </html>

 

jquery实现倒计时

标签:interval   java   text   style   tle   size   res   src   char   

原文地址:http://www.cnblogs.com/tongzhou/p/6513962.html

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