扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
本文小编为大家详细介绍“JavaScript如何构建一个倒数计时器”，内容详细，步骤清晰，细节处理妥当，希望这篇“JavaScript如何构建一个倒数计时器”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。
左权网站建设公司创新互联,左权网站设计制作，有大型网站制作公司丰富经验。已为左权上千多家提供企业网站建设服务。企业网站搭建\外贸网站建设要多少钱，请找那个售后服务好的左权做网站的公司定做！
首先，你需要设置一个有效的结束日期。这应该是JavaScript的 Date.parse() 方法可以理解的任何格式的字符串。例如：
ISO 8601格式：
const deadline = '2015-12-31';
简短格式：
const deadline = '31/12/2015';
或者，长格式：
const deadline = 'December 31 2015';
这些格式中的每一种都允许你指定一个准确的时间和一个时区(或者在ISO日期的情况下指定一个与UTC的偏移)。例如：
const deadline = 'December 31 2015 23:59:59 GMT+0200';
3.计算剩余时间下一步是计算剩余时间。我们需要编写一个函数，该函数需要一个表示给定结束时间的字符串(如上所述)。然后，我们计算该时间与当前时间之间的时差。看起来像这样：
function getTimeRemaining(endtime){ const total = Date.parse(endtime) - Date.parse(new Date()); const seconds = Math.floor( (total/1000) % 60 ); const minutes = Math.floor( (total/1000/60) % 60 ); const hours = Math.floor( (total/(1000*60*60)) % 24 ); const days = Math.floor( total/(1000*60*60*24) ); return { total, days, hours, minutes, seconds }; }首先，我们要创建一个变量 total 以保留到截止日期为止的剩余时间。Date.parse() 函数将时间字符串转换为毫秒值，这样我们就可以将两次相减，得到中间的时间量。
const total = Date.parse(endtime) - Date.parse(new Date());
4.将时间转换为可用格式
现在我们要将毫秒转换为天，小时，分钟和秒。让我们以秒为例：
const seconds = Math.floor( (t/1000) % 60 );
让我们分解一下这里发生的事情。
鸿蒙官方战略合作共建——HarmonyOS技术社区
将毫秒除以1000可转换为秒：(t/1000)
将总秒数除以60，然后取余数。你不需要所有的秒，只需要计算分钟数后剩下的那些：(t/1000) % 60
四舍五入到最接近的整数。这是因为你需要完整的秒数，而不是几分之一秒：Math.floor((t/1000)%60)
重复此逻辑，将毫秒转换为分钟，小时和天。
5.将时钟数据输出为可重复使用的对象
在准备好几天，几小时，几分钟和几秒钟之后，我们现在可以将数据作为可重复使用的对象返回：
return { total, days, hours, minutes, seconds };这个对象允许你调用你的函数，并获得任何计算值。这是如何获取剩余分钟数的示例：
getTimeRemaining(deadline).minutes
方便吧?
6.在页面上显示时钟，并在时钟为零时停止时钟
现在我们有了一个可以吐出剩余天数、小时、分钟和秒数的函数，我们就可以建立我们的时钟了。首先，我们将创建以下HTML元素来保存时钟：
然后，我们将编写一个函数，在新的div中输出时钟数据：
function initializeClock(id, endtime) { const clock = document.getElementById(id); const timeinterval = setInterval(() => { const t = getTimeRemaining(endtime); clock.innerHTML = 'days: ' + t.days + '
' + 'hours: '+ t.hours + '
' + 'minutes: ' + t.minutes + '
' + 'seconds: ' + t.seconds; if (t.total <= 0) { clearInterval(timeinterval); } },1000); }该函数有两个参数，这两个参数是包含时钟的元素的id，以及倒计时的结束时间。在函数内部，我们将声明一个 clock 变量，并使用它来保存对时钟容器div的引用。这意味着我们不必一直查询DOM。
接下来，我们将使用 setInterval 每秒执行一个匿名函数。此功能将执行以下操作：
计算剩余时间。
将剩余时间输出到我们的div。
如果剩余时间为零停止计时。
此时，剩下的唯一步骤是像这样运行时钟：
initializeClock('clockdiv', deadline);
恭喜你!现在，你仅用18行JavaScript就拥有了一个基本时钟。
7.准备展示你的时钟
在设置时钟样式之前，我们需要进行一些改进。
消除初始延迟，使你的时钟立即显示。
让时钟脚本更有效率，这样它就不会连续重建整个时钟。
根据需要添加前导零。
7.1 消除初始延迟
在时钟中，我们使用 setInterval 每秒更新一次显示。多数情况下，这很好，除非在开始时会有一秒钟的延迟。要消除此延迟，我们必须在间隔开始之前更新一次时钟。
让我们将传递给 setInterval 的匿名函数移到其自己的单独函数中，我们可以将此函数命名为 updateClock。在 setInterval 外调用一次 updateClock 函数，然后在 setInterval 内再次调用。
在你的JavaScript中，替换这个
const timeinterval = setInterval(() => { ... },1000);新代码
function updateClock(){ const t = getTimeRemaining(endtime); clock.innerHTML = 'days: ' + t.days + '
' + 'hours: '+ t.hours + '
' + 'minutes: ' + t.minutes + '
' + 'seconds: ' + t.seconds; if (t.total <= 0) { clearInterval(timeinterval); } } updateClock(); // 首先运行一函数能以避免延迟 var timeinterval = setInterval(updateClock,1000);7.2 避免不断重建时钟
我们需要使时钟脚本更高效，我们只想更新时钟中的数字，而不是每秒重建整个时钟。实现此目的的一种方法是将每个数字放在 span 标签内，并仅更新这些 span 的内容。
这是HTML：