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>