JS之倒計時效果
阿新 • • 發佈：2022-05-26
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{ margin: 200px; } span { display: inline-block; width: 40px; height: 40px; background-color: #333; font-size: 20px; color: #fff; text-align: center; line-height: 40px; }</style> </head> <body> <div> <span class="hour">1</span> <span class="minute">2</span> <span class="second">3</span> </div> <script> // 1. 獲取元素 var hour = document.querySelector('.hour'); // 小時的黑色盒子 var minute = document.querySelector('.minute'); // 分鐘的黑色盒子 var second = document.querySelector('.second'); // 秒數的黑色盒子 var inputTime = +new Date('2019-5-1 18:00:00'); // 返回的是使用者輸入時間總的毫秒數 countDown(); // 我們先呼叫一次這個函式，防止第一次重新整理頁面有空白 // 2. 開啟定時器 setInterval(countDown, 1000); function countDown() { var nowTime = +new Date(); // 返回的是當前時間總的毫秒數 var times = (inputTime - nowTime) / 1000; // times是剩餘時間總的秒數 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>