js時鐘倒計時

JS倒計時Date

代碼如下：

 1 <style type="text/css">
 2 * {
 3 margin: 0;
 4 padding: 0;
 5 }
 6 
 7 #box {
 8 border: 1px solid cyan;
 9 background-color: #000;
10 height: 50px;
11 width: 500px;
12 margin: 100px auto 0;
13 border-radius: 20px;
14 text-align: center;
15 }
16 
17 #sj {
18 margin: 5px 0 5px 0;
19 color: darkgray;
20 width: 500px;
21 border-radius: 20px;
22 height: 40px;
23 font-size: 30px;
24 text-shadow: 2px 10px 5px #FFFFF0;
25 }
26 
27 #djs {
28 height: 120px;
29 width: 500px;
30 color: darkgray;
31 text-align: center;
32 border-radius: 20px;
33 margin: 100px auto 0;
34 background-color: #000;
35 border: 1px solid cyan;
36 }
37 </style>
38 
39  
40 
41  
42 
43 <body>
44 <div id="box">
45 <p id="sj"></p>
46 </div>
47 <h1 id="djs"></h1>
48 <script type="text/javascript">
49 var time = new Date;
50 //加上定時器，讓它每隔一秒刷新
51 setInterval(function() {
52 var time = new Date;
53 var year = time.getFullYear();
54 var month = time.getMonth() + 1;
55 var dat = time.getDate();
56 var hours = time.getHours();
57 var mm = time.getMinutes();
58 var ss = time.getSeconds();
59 sj.innerText = year + "年" + month + "月" + dat + "日" + hours + "時" + mm + "分" + ss + "秒";
60 }, 1000);
61 
62 //倒計時：
63 //我們來定義一個未來時間 用它來進行倒計時。
64 setInterval(function(){
65 var time = new Date;
66 var future = new Date(2019, 04, 02, 0, 0, 0);
67 
68 
69 var p = (future - time) / 1000;
70 //時分秒轉換公式     
71 var day = Math.floor(p / 86400);
72 var h = Math.floor(p % 86400 / 3600);
73 var m = Math.floor(p % 86400 % 3600 / 60);
74 var s = Math.floor(p % 60);
75 //我們加了</br>標簽，所以要改用djs.innerHTML
76 djs.innerHTML ="距離4月2號還有：</br></br>"+ day + "日" + h + "時" + m+ "分" + s + "秒";
77 },1000);
78 
79 
80 //另外有兩個寫很不錯打的可以直接引用 http://momentjs.cn day.js
81 </script>
82 </body>

轉載于:https://www.cnblogs.com/xuyx/p/10637109.html

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/387775.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/387775.shtml
英文地址，請注明出處：http://en.pswp.cn/news/387775.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！