JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)跨年倒計(jì)時(shí)
JavaScript網(wǎng)頁(yè)?跨年倒計(jì)時(shí)，供大家參考，具體內(nèi)容如下
最近學(xué)弟在追一個(gè)學(xué)妹，我在幫學(xué)弟出謀劃策。
學(xué)妹告訴學(xué)弟，我怕我們之間是因?yàn)檫@段時(shí)間接觸多了你才喜歡我的。等跨年的時(shí)候，如果你還喜歡我，那個(gè)時(shí)候我再給你答案。
于是今天我?guī)蛯W(xué)弟做了一個(gè)跨年倒計(jì)時(shí)的網(wǎng)頁(yè)，希望他能夠堅(jiān)持下去。
<!DOCTYPE html><html lang='zh-CN'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>倒計(jì)時(shí)</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;'>跨年倒計(jì)時(shí)：</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’);//獲取小時(shí)元素 var minute = document.querySelector(’.minute’);//獲取分鐘元素 var second = document.querySelector(’.second’);//獲取秒數(shù)元素 var inputTime = +new Date(’2021-1-1 00:00:00’);//輸入一個(gè)時(shí)間 countDown ();//在定時(shí)器開(kāi)啟之前先調(diào)用一次函數(shù)，防止一秒的空白期 //開(kāi)啟定時(shí)器 setInterval(countDown, 1000); function countDown (){ //獲取當(dāng)前的時(shí)間 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í)數(shù)給小時(shí)的盒子 day.innerHTML = d+'天'; //小時(shí) var h = parseInt(times / 60 / 60 % 24); h = h < 10 ? ’0’+ h : h; //將剩余的小時(shí)數(shù)給小時(shí)的盒子 hour.innerHTML = h+'時(shí)'; // 分鐘 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>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. asp讀取xml文件和記數(shù)2. Xml簡(jiǎn)介_(kāi)動(dòng)力節(jié)點(diǎn)Java學(xué)院整理3. 阿里前端開(kāi)發(fā)中的規(guī)范要求4. XML入門(mén)的常見(jiàn)問(wèn)題(一)5. html小技巧之td,div標(biāo)簽里內(nèi)容不換行6. 告別AJAX實(shí)現(xiàn)無(wú)刷新提交表單7. IE6/IE7/IE8/IE9中tbody的innerHTML不能賦值的完美解決方案8. 讀寫(xiě)xml文件的2個(gè)小函數(shù)9. webpack高級(jí)配置與優(yōu)化詳解10. 低版本IE正常運(yùn)行HTML5+CSS3網(wǎng)站的3種解決方案
網(wǎng)公網(wǎng)安備