京東秒殺(倒計時效果)
阿新 • • 發佈：2022-04-18
<style> div { width: 400px; height: 200px; background-color: cornsilk; } span { float: left; margin-right: 10px; background-color: black; width: 50px; height: 50px; color: white; font-size: 20px; }</style> </head> <body> <div class="a1"> <span class="h">1</span> <span class="m">2</span> <span class="s">3</span> </div> </body> <script> // 獲取元素 var hour = document.querySelector(".h"); var minute = document.querySelector(".m"); var second = document.querySelector(".s"); var inputTime = +new Date("2022-4-18 18:00:00"); //返回的是使用者輸入時間總的毫秒數 conuntDown(); // 開啟定時器 setInterval(conuntDown, 1000); //每隔一秒重新整理一次 function conuntDown() { var nowTime = +new Date(); // 返回的是當前時間總的毫秒數var times = (inputTime - nowTime) / 100; //time是剩餘時間總的秒數 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>