JS 显示时间与倒计时练习

全栈程序员-站长 • 2021年9月17日上午7:00 • 未分类 • 阅读 48

显示时间与倒计时

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>

View Code

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 }

View Code

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 }