JavaScript實現網頁跨年倒計時
阿新 • • 發佈:2020-12-03
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 class="text" 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>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。