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
總結
- 上一篇： 做梦梦到熟人是怎么回事
- 下一篇： 小程序如何封装自定义组件（Toast）