简单倒计时效果实现

龙宇@天翔

已于 2023-01-31 17:15:22 修改

阅读量472

点赞数 2

文章标签： javascript 前端开发语言

于 2023-01-07 00:54:29 首次发布

本文链接：https://blog.csdn.net/weixin_44950875/article/details/128586729

版权

本文介绍了如何使用JavaScript实现简单的倒计时效果，详细解释了实现思路，包括理解格林威治时间、获取时间毫秒数差以及使用setInterval进行定时更新。提供了HTML、CSS和JavaScript代码示例，并展示了在VSCode中运行成功后的倒计时效果。

摘要由CSDN通过智能技术生成

js实现简单的倒计时效果

功能要求：

显示距离目标日期还有多少天，多少小时，多少分钟，多少秒，实现倒计时的效果并显示在页面中

功能实现思路：
要先了解什么是格林威治时间

格林威治时间：
1.在编程的世界里面，有一个特殊的时间，是1970年01月01日00时00分00秒这个时间我们叫做格林威治时间
2.所有的编程世界里面，这个时间都是一样的，而且格林威治时间 的数字是 0
3.从格林威治时间开始，每经过1毫秒数字就会 +1所以我们可以获取到任意一个时间节点到格林威治时间的毫秒数然后在用两个毫秒数相减，就能得到两个时间点之间相差的毫秒数
4.我们在通过这个毫秒数得到准确的时间

具体的实现步骤

第一步：获取当前时间距离格林威治时间的毫秒数
第二步：获取将来的时间距离格林威治时间的毫秒数
第三步：使用获取到的将来时间毫秒数减去现在时间的毫秒数，得到相差的毫秒数，这个相差的毫秒数就是具体要倒计时的时间段
第四步：使用setInterval定时器来每秒调用执行一次，实现页面上时间的刷新

代码实现：

HTML部分代码展示，这里只展示body中的主要代码

<div class="box">
        <div class="xiaobox"></div>
        <div class="xiaobox"></div>
        <div class="xiaobox"></div>
        <div class="xiaobox"></div>
        <span class="txt1">天</span>
        <span class="txt2">时