JS 显示时间与倒计时练习

时间：2024-12-23 13:37:32

显示时间与倒计时

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秒更新一次，也是醉了。。。

相关文章