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>