js实现简单网页倒计时器操作,js实现简单网页倒计时器的方法,JS实现简单网页倒计时器

本文主要详细介绍了简单web倒计时器的JS实现。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。

做一个简单的网页倒计时器(js原生代码)供大家参考。具体情况如下

实现一个简单的网页倒计时(从xx到XX还剩多少时间)，效果如下

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

div id='box'/div

接下来是JS代码部分。

首先，您需要知道当前时间，然后您需要指定一个到期时间，以获得当前时间和指定时间之间的时间差。

函数antitime() {

var now=new Date()；//获取当前时间

var to=新日期(2032，1，1，0，0，0)；//指定到期时间

//然后获取当前时间与指定时间的时间差。注意是毫秒。

var delta time=(to-now)/1000；//过期时间与当前时间的差值以毫秒/1000为单位，转化为总秒数，方便以后使用。

//console.log(deltaTime)

如果时间到了，停止倒计时。

if (deltaTime=0) {

//停止计时器

window . clear interval(anti time)；

}

已知秒的总数，天数以分、秒计算。

在这里，我们使用的方法是取整数，在我们使用它们的地方将它们分开，并为它们定义和赋值以备后用。我们用parseInt()或者Math.floor()对它们进行四舍五入，这里用的是Math.floor()。

//计算天数并给它赋值

var d=math . floor(delta time/3600/24)，

//计算小时并给它赋值

h=Math.floor(deltaTime/3600 % 24)，

//计算分钟数并给它们赋值

m=Math.floor(deltaTime/60 % 60)，

//计算秒数并给它赋值

s=math . floor(delta time % 60)；

其实就是时间转换的基本操作。这里理解起来就简单多了，只需要封装函数就可以了。

为了增加用户体验，将时间的数字转换成字符串，如果分、毫秒小于10，前面加0。

这里应该有更好的包装方式。为了更好的理解，这样写出来。

如果(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定时器01=“”；

Timer01='离2032年1月1日还有' d '天' h '小时' m '分钟'秒；

document . getelementbyid(' box ')；

box.innerHTML=timer01

Document.getElementById()获取DOM元素节点，方便将数据填入节点并显示。

让id具有Box属性的元素节点在页面上显示timer01中的内容。

最后，启动计时器，让它每1000毫秒更新一次。

setInterval(反时间，1000)；

一般的JS代码和注释放在这里。

脚本

//指定定时器到期时间，先封装函数antitime()。

函数antitime() {

var now=new Date()；//获取当前时间

var to=新日期(2032，1，1，0，0，0)；//指定到期时间

//然后获取当前时间与指定时间的时间差。注意是毫秒。

var delta time=(to-now)/1000；//过期时间与当前时间的差值以毫秒/1000为单位，转化为总秒数，方便以后使用。

//console.log(deltaTime)

//判断时间是否结束，停止倒计时

if (deltaTime=0) {

//停止计时器

window . clear interval(anti time)；

}

//毫秒数已知，天数以分、秒计算。

//这里用的是取整数的方法，在哪里分，定义赋值，方便后面存取。

//用parseInt()或Math.floor()舍入，其中使用了Math.floor()。