JS 显示时间与倒计时练习

显示时间与倒计时

HTML

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
         <title>显示系统时间</title>
         <link rel="stylesheet" href="css/style.css">
     </head>

     <body>
         <div id="container">
             <h2>当前时间为：</h2>
             <h3 id="current">显示当前时间时间</h3>
             <h2>距离2017年1月1日还有：</h2>
             <h3 id="deadline">显示倒计时</h3>
         </div>
     <script src="js/script.js"></script>
     </body>
 </html>

CSS

 #container {
     width:300px;
     margin:50px auto;
 }

 #container h3:nth-of-type(1) {
     color:cyan;
     margin-bottom:50px;
 }

 #container h3:nth-of-type(2) {
     color:red;
     height:50px;
     line-height:50px;
     font-size:24px;
 } 

JavaScript

 window.onload = function() {
     showCurrentTime();
     showEndTime();
 };

 function checkTime(i) {
     if(i < 10) {
         i = "0" + i;
     }
     return i;
 }

 function showCurrentTime() {
     var now = new Date();
     var year = now.getFullYear();
     var month = now.getMonth() + 1;
     var day = now.getDate();
     var d = now.getDay();
     var hour = now.getHours();
     var min = now.getMinutes();
     var sec = now.getSeconds();

     hour = checkTime(hour);
     min = checkTime(min);
     sec = checkTime(sec);

     var weekday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];

     var show = document.getElementById("current");
     var time = year + "年" + month + "月" + day + "日 " + weekday[d] + " " + hour + ":" + min + ":" + sec;
     show.innerHTML = time;
     //将setTimeout写在showTime内部，这是一个递归调用
     setTimeout(showCurrentTime, 1000);
 };

 //如果要将时间更新写在showTime外部，则需要setInterval方法
 // setInterval(showTime, 1000);

 function showEndTime() {
     var now = new Date();
     var deadline = new Date(2017, 0, 1);
     var left_time = parseInt((deadline.getTime() - now.getTime()) / 1000);
     var day = parseInt(left_time / (60 * 60 * 24));
     var hour = parseInt(left_time / (60 * 60) % 24);
     var min = parseInt(left_time / 60 % 60);
     var sec = parseInt(left_time & 60);

     day = checkTime(day);
     hour = checkTime(hour);
     min = checkTime(min);
     sec = checkTime(sec);

     var time = day + "天 " + hour + "时 " + min + "分 " + sec + "秒";
     var show = document.getElementById("deadline");

     if(left_time < -60*60*24) {
         show.innerHTML = "时间已过！"
     } else if(left_time < 0) {
         show.innerHTML = "就是今天！"
     } else {
         show.innerHTML = time;
     }
     setTimeout(showEndTime, 1000);
 }

此demo倒计时每4秒更新一次，也是醉了。。。