显示时间与倒计时
HTML
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>显示系统时间</title> 6 <link rel="stylesheet" href="css/style.css"> 7 </head> 8 9 <body> 10 <div id="container"> 11 <h2>当前时间为：</h2> 12 <h3 id="current">显示当前时间时间</h3> 13 <h2>距离2017年1月1日还有：</h2> 14 <h3 id="deadline">显示倒计时</h3> 15 </div> 16 <script src="js/script.js"></script> 17 </body> 18 </html>
CSS
1 #container { 2 width:300px; 3 margin:50px auto; 4 } 5 6 #container h3:nth-of-type(1) { 7 color:cyan; 8 margin-bottom:50px; 9 } 10 11 12 #container h3:nth-of-type(2) { 13 color:red; 14 height:50px; 15 line-height:50px; 16 font-size:24px; 17 }
JavaScript
1 window.onload = function() { 2 showCurrentTime(); 3 showEndTime(); 4 }; 5 6 function checkTime(i) { 7 if(i < 10) { 8 i = "0" + i; 9 } 10 return i; 11 } 12 13 function showCurrentTime() { 14 var now = new Date(); 15 var year = now.getFullYear(); 16 var month = now.getMonth() + 1; 17 var day = now.getDate(); 18 var d = now.getDay(); 19 var hour = now.getHours(); 20 var min = now.getMinutes(); 21 var sec = now.getSeconds(); 22 23 hour = checkTime(hour); 24 min = checkTime(min); 25 sec = checkTime(sec); 26 27 var weekday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]; 28 29 var show = document.getElementById("current"); 30 var time = year + "年" + month + "月" + day + "日 " + weekday[d] + " " + hour + ":" + min + ":" + sec; 31 show.innerHTML = time; 32 //将setTimeout写在showTime内部，这是一个递归调用 33 setTimeout(showCurrentTime, 1000); 34 }; 35 36 //如果要将时间更新写在showTime外部，则需要setInterval方法 37 // setInterval(showTime, 1000); 38 39 function showEndTime() { 40 var now = new Date(); 41 var deadline = new Date(2017, 0, 1); 42 var left_time = parseInt((deadline.getTime() - now.getTime()) / 1000); 43 var day = parseInt(left_time / (60 * 60 * 24)); 44 var hour = parseInt(left_time / (60 * 60) % 24); 45 var min = parseInt(left_time / 60 % 60); 46 var sec = parseInt(left_time & 60); 47 48 day = checkTime(day); 49 hour = checkTime(hour); 50 min = checkTime(min); 51 sec = checkTime(sec); 52 53 var time = day + "天 " + hour + "时 " + min + "分 " + sec + "秒"; 54 var show = document.getElementById("deadline"); 55 56 if(left_time < -60*60*24) { 57 show.innerHTML = "时间已过！" 58 } else if(left_time < 0) { 59 show.innerHTML = "就是今天！" 60 } else { 61 show.innerHTML = time; 62 } 63 setTimeout(showEndTime, 1000); 64 }
此demo倒计时每4秒更新一次，也是醉了。。。