本文详细介绍如何使用原生JavaScript编写一个简单的网页倒计时器。通过获取当前时间与指定到期时间的时间差，利用Math.floor进行天、时、分、秒的计算，并结合setInterval实现每秒刷新显示。文章涵盖HTML结构搭建、DOM操作及定时器逻辑，适合初学者学习前端基础。
原生JavaScript实现网页倒计时器教程
本文将展示如何使用原生JavaScript代码制作一个简单的网页倒计时器，供读者参考学习。
目标是实现一个计算距离特定日期（如某年某月某日）剩余时间的倒计时功能，具体效果如下所示。
HTML结构搭建
首先处理HTML部分，需要编写基础的HTML结构，用于接收并展示倒计时的时间显示结果。
<div id="box"></div>JavaScript核心逻辑实现
接下来重点介绍JavaScript代码的实现部分。
逻辑的核心在于获取当前系统时间，并设定一个目标到期时间，随后计算这两个时间点之间的时间差值。
function antitime() {
var now = new Date(); //获取当前时间
var to = new Date(2032, 1, 1, 0, 0, 0); //指定到期时间
// 然后拿到当前时间和指定时间的时间差，注意 是毫秒数
var deltaTime = (to - now) / 1000; //到期时间和当前时间相差的毫秒数/1000换算出总的秒数，方便后边用
// console.log(deltaTime)需要判断时间状态，如果当前时间已超过到期时间，则应停止倒计时过程。
if (deltaTime <= 0) {
// 停止计时器
window.clearInterval(antitime);
}基于计算出的总秒数，进一步换算为天、小时、分钟和秒。此过程涉及取整运算，可根据需要选择parseInt()或Math.floor()，本文示例中采用Math.floor()进行取整赋值，以便后续直接使用。
// 计算天数并给其赋值
var d = Math.floor(deltaTime / 3600 / 24),
// 计算小时并给其赋值
h = Math.floor(deltaTime / 3600 % 24),
// 计算分钟并给其赋值
m = Math.floor(deltaTime / 60 % 60),
// 计算秒数并给其赋值
s = Math.floor(deltaTime % 60);这本质上是时间单位换算的基础数学运算，理解原理后，只需将相关逻辑封装为函数即可简化代码结构。
为提升用户体验，将时间数值转换为字符串格式，若分、秒、毫秒不足10，则前面补0。 此处应有更优封装方法，为便于理解，采用当前写法。
if (d < 10) {
d = '0' + d;
} else if (h < 10) {
h = '0' + h;
} else if (m < 10) {
m = '0' + m;
} else if (s < 10) {
s = '0' + s;
}接着定义一个空字符串变量，用于接收并最终拼接成完整的倒计时显示字符串。
var timer01 = '';
timer01 = '距离2032年1月1日还有' + d + '天' + h + '小时' + m + '分' + s + '秒';
document.getElementById('box');
box.innerHTML = timer01;利用document.getElementById()方法获取对应的DOM元素节点，以便向该节点填充数据并展示在页面上。通过box.innerHTML = timer01，将id为box的元素节点内容更新为timer01变量的值。
最后，启动定时器，设置每1000毫秒（即1秒）执行一次更新操作。
setInterval(antitime, 1000);完整代码示例
以下是完整的JavaScript代码部分，已添加详细注释，供读者参考。
<script>
// 指定计时器到期时间，首先先封装函数antitime()
function antitime() {
var now = new Date(); //获取当前时间
var to = new Date(2032, 1, 1, 0, 0, 0); //指定到期时间
// 然后拿到当前时间和指定时间的时间差，注意 是毫秒数
var deltaTime = (to - now) / 1000; //到期时间和当前时间相差的毫秒数/1000换算出总的秒数，方便后边用
// console.log(deltaTime)
// 判断 如果时间超了，停止倒计时
if (deltaTime <= 0) {
// 停止计时器
window.clearInterval(antitime);
}
// 已知毫秒数，计算天数时分秒
// 这里用到了取整数的方法，用到哪在哪除，并给其定义赋值，方便后面取用，
// 用parseInt()取整或者Math.floor()取整,在这里用的是Math.floor()。
// 计算天数并给其赋值
var d = Math.floor(deltaTime / 3600 / 24),
// 计算小时并给其赋值
h = Math.floor(deltaTime / 3600 % 24),
// 计算分钟并给其赋值
m = Math.floor(deltaTime / 60 % 60),
// 计算秒数并给其赋值
s = Math.floor(deltaTime % 60);
//为了增加用户体验，把时间的数字转成字符串，如果分秒毫秒不足10，则前面补0。
// 这里应该有更好的方法进行封装，为了更好理解，这样写出来。
if (d < 10) {
d = '0' + d;
} else if (h < 10) {
h = '0' + h;
} else if (m < 10) {
m = '0' + m;
} else if (s < 10) {
s = '0' + s;
}
// 定义一个空的字符串用来接收最后的值
var timer01 = '';
timer01 = '距离2032年1月1日还有' + d + '天' + h + '小时' + m + '分' + s + '秒';
// document.getElementById() 获取DOM元素节点，方便向节点填入数据并显示
document.getElementById('box');
// 让id拥有box属性的元素节点在页面显示timer01中的内容
box.innerHTML = timer01;
}
// 开启定时器，并让其1000毫秒更新一次
setInterval(antitime, 1000);
</script>
以上就是本文的全部内容，希望能为各位的学习带来帮助，也欢迎大家继续支持本站。