显示时间与倒计时
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秒更新一次，也是醉了。。。
时间： 2024-08-08 18:34:29