js 倒计时算法及定时器的应用
生活随笔
收集整理的這篇文章主要介紹了
js 倒计时算法及定时器的应用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
問題描述
實現倒計時效果
解決方案：
1. 利用+new Date()運算出時間差
1 核心算法：輸入的時間減去現在的時間就是剩余的時間，即倒計時 ，但是不能拿著時分秒
相減，比如 05 分減去25分，結果會是負數的。
2 用時間戳來做。用戶輸入時間總的毫秒數減去現在時間的總的毫秒數，得到的就是剩余時
間的毫秒數。
3 把剩余時間總的毫秒數轉換為天、時、分、秒 （時間戳轉換為時分秒）
轉換公式如下：
d = parseInt(總秒數/ 60/60 /24); // 計算天數
h = parseInt(總秒數/ 60/60 %24) // 計算小時
m = parseInt(總秒數 /60 %60 ); // 計算分數
s = parseInt(總秒數%60); // 計算當前秒數
2. 利用setInterval(fn,time)；定時器刷新頁面
<!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'); // 用戶輸入的系統時間總的毫秒數countDown();//先運行一次函數 防止第一頁面刷新的空白setInterval(countDown,1000); //每隔一秒調用一次countDown函數function countDown (time){var nowTime = +new Date(); //當前系統時間總的毫秒數 var times = (inputTime - nowTime) / 1000; // 剩余時間總的秒數var d = parseInt(times / 60 / 60 / 24); // 計算天數d = d < 10 ? '0' + d : d; //不滿足10時前面補0day.innerHTML = d;var h = parseInt(times / 60 / 60 % 24) // 計算小時h = h < 10 ? '0' + h : h; //不滿足10時前面補0hour.innerHTML = h;var m = parseInt(times / 60 % 60 ); // 計算分數m = m < 10 ? '0' + m : m; //不滿足10時前面補0minute.innerHTML = m;var s = parseInt(times % 60 ); // 計算當前秒數s = s < 10 ? '0' + s : s; //不滿足10時前面補0secound.innerHTML = s;// return d + '天' + h + '時' + m + '分' + s + '秒'; //可以輸出當前距離時間} </script> </body> </html>總結
以上是生活随笔為你收集整理的js 倒计时算法及定时器的应用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C++ 算法篇 位运算
- 下一篇： SSHサーバのRSA fingerpri