js 倒计时算法及定时器的应用
生活随笔
收集整理的這篇文章主要介紹了
js 倒计时算法及定时器的应用
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
問題描述
實(shí)現(xiàn)倒計(jì)時(shí)效果
解決方案：
1. 利用+new Date()運(yùn)算出時(shí)間差
1 核心算法：輸入的時(shí)間減去現(xiàn)在的時(shí)間就是剩余的時(shí)間，即倒計(jì)時(shí) ，但是不能拿著時(shí)分秒
相減，比如 05 分減去25分，結(jié)果會(huì)是負(fù)數(shù)的。
2 用時(shí)間戳來做。用戶輸入時(shí)間總的毫秒數(shù)減去現(xiàn)在時(shí)間的總的毫秒數(shù)，得到的就是剩余時(shí)
間的毫秒數(shù)。
3 把剩余時(shí)間總的毫秒數(shù)轉(zhuǎn)換為天、時(shí)、分、秒 （時(shí)間戳轉(zhuǎn)換為時(shí)分秒）
轉(zhuǎn)換公式如下：
d = parseInt(總秒數(shù)/ 60/60 /24); // 計(jì)算天數(shù)
h = parseInt(總秒數(shù)/ 60/60 %24) // 計(jì)算小時(shí)
m = parseInt(總秒數(shù) /60 %60 ); // 計(jì)算分?jǐn)?shù)
s = parseInt(總秒數(shù)%60); // 計(jì)算當(dāng)前秒數(shù)
2. 利用setInterval(fn,time)；定時(shí)器刷新頁面
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 50px;height: 40px;background: black;margin: 20px 20px;float: left;color: aliceblue;line-height: 40px;font-size: 25px;text-align: center;}</style> </head> <body><div class="day">00</div><div class="hour">00</div><div class="minute">00</div><div class="second">00</div><script> var day = document.querySelector('.day');var hour = document.querySelector('.hour');var minute = document.querySelector('.minute');var secound = document.querySelector('.second');var inputTime = +new Date('2022-8-24 00:00:00'); // 用戶輸入的系統(tǒng)時(shí)間總的毫秒數(shù)countDown();//先運(yùn)行一次函數(shù) 防止第一頁面刷新的空白setInterval(countDown,1000); //每隔一秒調(diào)用一次countDown函數(shù)function countDown (time){var nowTime = +new Date(); //當(dāng)前系統(tǒng)時(shí)間總的毫秒數(shù) var times = (inputTime - nowTime) / 1000; // 剩余時(shí)間總的秒數(shù)var d = parseInt(times / 60 / 60 / 24); // 計(jì)算天數(shù)d = d < 10 ? '0' + d : d; //不滿足10時(shí)前面補(bǔ)0day.innerHTML = d;var h = parseInt(times / 60 / 60 % 24) // 計(jì)算小時(shí)h = h < 10 ? '0' + h : h; //不滿足10時(shí)前面補(bǔ)0hour.innerHTML = h;var m = parseInt(times / 60 % 60 ); // 計(jì)算分?jǐn)?shù)m = m < 10 ? '0' + m : m; //不滿足10時(shí)前面補(bǔ)0minute.innerHTML = m;var s = parseInt(times % 60 ); // 計(jì)算當(dāng)前秒數(shù)s = s < 10 ? '0' + s : s; //不滿足10時(shí)前面補(bǔ)0secound.innerHTML = s;// return d + '天' + h + '時(shí)' + m + '分' + s + '秒'; //可以輸出當(dāng)前距離時(shí)間} </script> </body> </html>總結(jié)
以上是生活随笔為你收集整理的js 倒计时算法及定时器的应用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C++ 算法篇 位运算
- 下一篇： SSHサーバのRSA fingerpri