JavaScript實(shí)現(xiàn)網(wǎng)頁跨年倒計時
JavaScript網(wǎng)頁?跨年倒計時，供大家參考，具體內(nèi)容如下
最近學(xué)弟在追一個學(xué)妹，我在幫學(xué)弟出謀劃策。
學(xué)妹告訴學(xué)弟，我怕我們之間是因?yàn)檫@段時間接觸多了你才喜歡我的。等跨年的時候，如果你還喜歡我，那個時候我再給你答案。
于是今天我?guī)蛯W(xué)弟做了一個跨年倒計時的網(wǎng)頁，希望他能夠堅(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>倒計時</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. python實(shí)現(xiàn)讀取類別頻數(shù)數(shù)據(jù)畫水平條形圖案例2. python中PyQuery庫用法分享3. python操作數(shù)據(jù)庫獲取結(jié)果之fetchone和fetchall的區(qū)別說明4. PHP獲取時間戳等相關(guān)函數(shù)匯總5. JSP+Servlet實(shí)現(xiàn)文件上傳到服務(wù)器功能6. Ajax實(shí)現(xiàn)頁面無刷新留言效果7. php5.6不能擴(kuò)展redis.so的解決方法8. python 爬取嗶哩嗶哩up主信息和投稿視頻9. CSS3實(shí)現(xiàn)動態(tài)翻牌效果 仿百度貼吧3D翻牌一次動畫特效10. AJAX實(shí)現(xiàn)數(shù)據(jù)的增刪改查操作詳解【java后臺】
網(wǎng)公網(wǎng)安備