JS实现简单网页倒计时器

制作一个简单的网页倒计时器（js原生代码），供大家参考，具体内容如下

实现一个简单的网页倒计时（距离xx年x月x日还剩多少时间），效果是这样的

首先HTML代码部分，我们需要简单编写一个html代码，用来接收倒计时时间显示。

<div id="box"></div>

接下来就是JS代码部分。

首先要知道当前的时间，然后还需要指定一个到期时间，拿到当前时间和指定时间的时间差

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毫秒更新一次

setInterval(antitime, 1000);

总体JS部分代码加上注释给大家放这里了

<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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

查看更多关于JS实现简单网页倒计时器的详细内容...