JS实现简单网页倒计时器
作者:小杨不香菜
这篇文章主要为大家详细介绍了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。