jquery实现倒计时
生活随笔
收集整理的這篇文章主要介紹了
jquery实现倒计时
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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>
?
轉載于:https://www.cnblogs.com/tongzhou/p/6513962.html
總結
以上是生活随笔為你收集整理的jquery实现倒计时的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 抛弃鼠标的神器——Vimium
- 下一篇： 最牛营业部——国信泰然九路揭秘