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

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()。

//计算天数并给它赋值

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()获取DOM元素节点,方便将数据填入节点并显示。

document . getelementbyid(' box ');

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

box.innerHTML=timer01

}

//启动计时器,让它每1000毫秒更新一次。

setInterval(反时间,1000);

/脚本

这就是本文的全部内容。希望对大家的学习有帮助,支持我们。

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

相关文章阅读

  • 使用js实现简单的图片切换功能的方法,使用js实现简单的图片切换功能命令
  • 使用js实现简单的图片切换功能的方法,使用js实现简单的图片切换功能命令,使用JS实现简单的图片切换功能
  • 使用js实现数据格式化命令,使用js实现数据格式化的方法
  • 使用js实现数据格式化命令,使用js实现数据格式化的方法,使用js实现数据格式化
  • js选择日期,js日期选择控件,JS实现时间选择器
  • js轮播图视频教程,html5幻灯片图片轮播,js实现幻灯片轮播图
  • js轮播图菜鸟教程,js实现轮播图原理及示例
  • js轮播图菜鸟教程,js实现轮播图原理及示例,JS实现轮播图效果的3种简单方法
  • js获取dom节点的方法,js移除dom元素,JS实现DOM删除节点操作示例
  • js自动复制,网页一键复制,JS实现一键复制
  • js自动切换图片效果,js实现图片切换效果怎么做
  • js用数组实现图片切换,js中图片切换效果怎么实现,js实现图片数组中图片切换效果
  • js星空特效,js流星雨特效,js实现星星闪特效
  • js日期加减算天数,js实现日期按月份加减
  • js日期加减算天数,js实现日期按月份加减,js中日期的加减法
  • 留言与评论(共有 条评论)
       
    验证码: