JavaScript實現(xiàn)網(wǎng)頁跨年倒計時
JavaScript網(wǎng)頁?跨年倒計時，供大家參考，具體內(nèi)容如下
最近學(xué)弟在追一個學(xué)妹，我在幫學(xué)弟出謀劃策。
學(xué)妹告訴學(xué)弟，我怕我們之間是因為這段時間接觸多了你才喜歡我的。等跨年的時候，如果你還喜歡我，那個時候我再給你答案。
于是今天我?guī)蛯W(xué)弟做了一個跨年倒計時的網(wǎng)頁，希望他能夠堅持下去。
<!DOCTYPE html><html lang='zh-CN'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>倒計時</title> <style> div { margin-top: 200px; margin-left: 500px; line-height: 50px; font-size: 20px; font-weight: 900; }li { float: left; margin: 2px; list-style: none; width: 50px; height: 50px; color:white; line-height: 50px; text-align: center; background-color: black; font-size: 20px; font-weight: 900; } </style></head><body> <div> <li style = 'width: 135px;'>跨年倒計時：</li> <li class='day'>0</li> <li class='hour'>1</li> <li class='minute'>2</li> <li class='second'>3</li> </div> <script> //獲取元素 var day = document.querySelector(’.day’); var hour = document.querySelector(’.hour’);//獲取小時元素 var minute = document.querySelector(’.minute’);//獲取分鐘元素 var second = document.querySelector(’.second’);//獲取秒數(shù)元素 var inputTime = +new Date(’2021-1-1 00:00:00’);//輸入一個時間 countDown ();//在定時器開啟之前先調(diào)用一次函數(shù)，防止一秒的空白期 //開啟定時器 setInterval(countDown, 1000); function countDown (){ //獲取當(dāng)前的時間 var nowTime = +new Date(); var times = (inputTime - nowTime) / 1000;//times是剩余的總秒數(shù) var d = parseInt(times / 60 / 60 /24); d = d < 10 ? ’0’+ d : d; //將剩余的小時數(shù)給小時的盒子 day.innerHTML = d+'天'; //小時 var h = parseInt(times / 60 / 60 % 24); h = h < 10 ? ’0’+ h : h; //將剩余的小時數(shù)給小時的盒子 hour.innerHTML = h+'時'; // 分鐘 var m = parseInt(times / 60 % 60); m = m < 10 ? ’0’+ m : m; //將剩余的分鐘數(shù)給分鐘的盒子 minute.innerHTML = m+'分'; //秒數(shù) var s = parseInt(times % 60); s = s < 10 ? ’0’+ s : s; //將剩余的描述給秒的盒子 second.innerHTML = s+'秒'; } </script></body></html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. ASP基礎(chǔ)入門第三篇(ASP腳本基礎(chǔ))2. 低版本IE正常運行HTML5+CSS3網(wǎng)站的3種解決方案3. phpstudy apache開啟ssi使用詳解4. 解析原生JS getComputedStyle5. IE6/IE7/IE8/IE9中tbody的innerHTML不能賦值的完美解決方案6. XML解析錯誤：未組織好 的解決辦法7. XML入門的常見問題(二)8. 阿里前端開發(fā)中的規(guī)范要求9. ASP基礎(chǔ)入門第八篇（ASP內(nèi)建對象Application和Session）10. ASP中格式化時間短日期補0變兩位長日期的方法
網(wǎng)公網(wǎng)安備