简易的倒计时代码
在一些活動項目中，大多會涉及倒計時。以下為倒計時代碼，供小白參考。
關鍵詞：計時器、時間差
具體代碼如下：
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>倒計時代碼</title><style type="text/css">* {margin: 0;padding: 0;font-family: "微軟雅黑";font-size: 20px;}.time {overflow: hidden;margin: 100px auto;border: 1px solid blue;text-align: center;background: #65ed45;border-radius: 10px;padding: 20px;width: 530px;}.time h3 {font-size: 30px;text-align: center;padding-bottom: 30px;letter-spacing: 5px;}.time h3 input {border: none;width: 100px;height: 35px;text-align: center;border-radius: 8px;background: #f2f2f2;}.time .even,.time .odd {float: left;height: 50px;text-align: center;line-height: 50px;margin-right: 10px;border-radius: 8px;}.time .even {width: 35px;padding: 0 20px;background: #b34e0a;color: #ffffff;}.time .odd {width: 20px;padding: 0 10px;background: #ffffff;}#lastDiv {margin-right: 0;}</style></head><body><div class="time"><h3>距離2021年元旦還有:</h3><div id="residueDays" class="even"></div><div class="odd">天</div><div id="residueHours" class="even"></div><div class="odd">時</div><div id="residueMinutes" class="even"></div><div class="odd">分</div><div id="residueSeconds" class="even"></div><div class="odd" id="lastDiv">秒</div></div></body></html> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript">function countDownTime() {// 倒計時截止時間var EndTime = new Date('2021/01/01 00:00:00');// 現(xiàn)在的事件var NowTime = new Date();// 時間差（時間單位：ms）var t = EndTime.getTime() - NowTime.getTime();var d = 0;var h = 0;var m = 0;var s = 0;if(t >= 0) {// 向下取整d = Math.floor(t / 1000 / 60 / 60 / 24);h = Math.floor(t / 1000 / 60 / 60 % 24);m = Math.floor(t / 1000 / 60 % 60);s = Math.floor(t / 1000 % 60);}// 如果是一位數(shù)，前面拼接"0"function toDouble(num) {return num < 10 ? '0' + num : num;}$("#residueDays").html(d);$("#residueHours").html(toDouble(h));$("#residueMinutes").html(toDouble(m));$("#residueSeconds").html(toDouble(s));}setInterval(countDownTime, 1000) </script>效果圖：
總結(jié)
- 上一篇： linux 达人养成计划 II笔记
- 下一篇： 安装包制作工具 Inno Setup 6