倒计时：精确到天时分秒的计时器html前端设计
生活随笔
收集整理的這篇文章主要介紹了
倒计时：精确到天时分秒的计时器html前端设计
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
想設置桌面倒計時顯示不？
我們 今天學習到web中的計時器屬性，可以用倒計時的方式在網頁中通過設定一個日期進行動態倒計時器哦！快來看看吧。
我們首先簡單的設置幾個盒子和樣式。
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;background-color: antiquewhite;}/* 清除浮動 */.clearfix:after {visibility: hidden;clear: both;display: block;content: ".";height: 0;}.clearfix {*zoom: 1;}.time {width: 280px;margin: 50px auto;line-height: 30px;text-align: center;}.time h3 {font-size: 25px;margin-bottom: 20px;}.time .day {float: left;margin: 10px 0 10px;width: 50px;height: 30px;color: #ff55ff;}.time .hours,.time .minutes,.time .seconds {float: left;margin: 10px;width: 50px;height: 30px;background-color: #ff92fe;border-radius: 8px;color: #ffffff;font-weight: 700;box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, .2);}</style> </head><body><div class="time clearfix"><h3>距離20歲生日，還有</h3><div class="day"></div><div class="hours"></div><div class="minutes"></div><div class="seconds"></div></div> </body> </html>然后，我們通過js對其進行計時器控制，換算時間差為秒數，通過簡單的計算化為天數 ，小時數，分鐘數和秒數，最后綁定計時器進行倒計時變化。
<script>window.addEventListener('load', function () {var day = document.querySelector('.day')var hours = document.querySelector('.hours')var minutes = document.querySelector('.minutes')var seconds = document.querySelector('.seconds')function countDown(time) {var nowTime = +new Date(); // 返回當前時間總的毫秒數var inputTime = +new Date(time); // 返回輸入時間總的毫秒數var times = (inputTime - nowTime) / 1000; //剩余時間總的秒數 var d = parseInt(times / 60 / 60 / 24).toString().padStart(2, '0') // 天var h = parseInt(times / 60 / 60 % 24).toString().padStart(2, '0') //時var m = parseInt(times / 60 % 60).toString().padStart(2, '0') // 分var s = parseInt(times % 60).toString().padStart(2, '0')// 當前的秒day.innerHTML = d + '天'hours.innerHTML = h + '時'minutes.innerHTML = m + '分'seconds.innerHTML = s + '秒'}// countDown('2022-12-12 00:00:00')setInterval(function () {countDown('2022-12-20 00:00:00')}, 1000)})</script>最后效果圖就是這樣啦，實際是動態的秒數會隨著當前時間的流逝不斷減少，只需要更改指定日期和標題就可以獲得你想要的倒計時啦！學到的同學記得點贊評論哦！
總結
以上是生活随笔為你收集整理的倒计时：精确到天时分秒的计时器html前端设计的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 研发团队使用的管理平台对比
- 下一篇： 网上英语听写系统