显示时间与倒计时
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 }
View Code
此demo倒计时每4秒更新一次，也是醉了。。。
转载于:https://www.cnblogs.com/cc156676/p/5766193.html
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/108908.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...