JavaScript實現網頁跨年倒計時
JavaScript網頁?跨年倒計時，供大家參考，具體內容如下
最近學弟在追一個學妹，我在幫學弟出謀劃策。
學妹告訴學弟，我怕我們之間是因為這段時間接觸多了你才喜歡我的。等跨年的時候，如果你還喜歡我，那個時候我再給你答案。
于是今天我幫學弟做了一個跨年倒計時的網頁，希望他能夠堅持下去。
<!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’);//獲取秒數元素 var inputTime = +new Date(’2021-1-1 00:00:00’);//輸入一個時間 countDown ();//在定時器開啟之前先調用一次函數，防止一秒的空白期 //開啟定時器 setInterval(countDown, 1000); function countDown (){ //獲取當前的時間 var nowTime = +new Date(); var times = (inputTime - nowTime) / 1000;//times是剩余的總秒數 var d = parseInt(times / 60 / 60 /24); d = d < 10 ? ’0’+ d : d; //將剩余的小時數給小時的盒子 day.innerHTML = d+'天'; //小時 var h = parseInt(times / 60 / 60 % 24); h = h < 10 ? ’0’+ h : h; //將剩余的小時數給小時的盒子 hour.innerHTML = h+'時'; // 分鐘 var m = parseInt(times / 60 % 60); m = m < 10 ? ’0’+ m : m; //將剩余的分鐘數給分鐘的盒子 minute.innerHTML = m+'分'; //秒數 var s = parseInt(times % 60); s = s < 10 ? ’0’+ s : s; //將剩余的描述給秒的盒子 second.innerHTML = s+'秒'; } </script></body></html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
網公網安備