JS实现倒计时功能
Posted 唯爱小喵
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS实现倒计时功能相关的知识，希望对你有一定的参考价值。
<!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> body { margin: 100px 100px; } span { display: inline-block; width: 40px; height: 40px; background-color: red; color: #fff; line-height: 40px; text-align: center; } </style> <script> window.addEventListener(\'load\', function() { var d = document.querySelector(\'.day\'); var h = document.querySelector(\'.hours\'); var m = document.querySelector(\'.minutes\'); var s = document.querySelector(\'.seconds\'); var innerTime = new Date(\'2021-6-23 18:00\'); getDate(); setInterval(getDate, 1000); // 获取时间 function getDate() { var time = Date.now(); var newTime = (innerTime - time) / 1000; var day = parseInt(newTime / 60 / 60 / 24); day = day < 10 ? \'0\' + day : day; d.innerHTML = day; // 计算小时 var hours = parseInt(newTime / 60 / 60 % 24); hours = hours < 10 ? \'0\' + hours : hours; h.innerHTML = hours; // 计算分钟 var minutes = parseInt(newTime / 60 % 60); minutes = minutes < 10 ? \'0\' + minutes : minutes; m.innerHTML = minutes; // 计算秒数 var seconds = parseInt(newTime % 60); seconds = seconds < 10 ? \'0\' + seconds : seconds; s.innerHTML = seconds; } }); </script> </head> <body> <span class="day">1</span> <span class="hours">1</span> <span class="minutes">1</span> <span class="seconds">1</span> </body> </html>
以上是关于JS实现倒计时功能的主要内容，如果未能解决你的问题，请参考以下文章