js页面倒计时7天 java_javascript实现倒计时效果

本文实例为大家分享了javascript实现倒计时效果的具体代码，供大家参考，具体内容如下

首先先写一个布局

#numbers p {

position: absolute;

font-size: 100px;

left: 50%;

top: 30%;

margin-left: -29px;

display:none;

}

用position:absolute使数字重合(display不为none时)

之后开始添加javascipt内容

window.onload = function () {

var numbers = document.getElementById('numbers');

var number = numbers.getElementsByTagName('p');

var i = 0;

number[i].style.display = 'block';

i = 1;

timer = setInterval(function () {

if (i != number.length) {

number[i - 1].style.display = 'none';

number[i].style.display = 'block';

} else {

number[i - 1].style.display = 'none';

clearInterval(timer);

}

i++;

}, 1000)

}

倒计时主要通过setInterval()来实现，每1秒刷新一次。那么问题来了，在页面加载完成后一秒，setInterval()中的内容才开始执行，倘若我们需要在打开页面后立马开始倒计时的话，就应先把3这个数字即number[0]展示出来。之后每秒需要显示相应的数字，并将前一个数字隐藏。从1开始，当i的值不为number.length的时候，都执行相同的指令。当i为number.length时，只需将number[2]即1隐藏，并且清除定时器，否则倘若找不到对应的元素，就会出现Uncaught TypeError: Cannot read property ‘style' of undefined的错误。

至此，倒计时功能完成。

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

js页面倒计时7天 java_javascript实现倒计时效果相关推荐

js页面倒计时7天 java_javascript实现倒计时跳转页面
本文给大家介绍了如何使用javascript实现倒计时跳转到其他页面的方法以及实现原理,非常的简单实用,有需要的小伙伴可以参考下. 很多网页都有类似的效果,那就是经过指定的时间能够跳转到其他页面,如果 ...
js开发实例 —— 发送短信验证码倒计时5S钟之后自动跳转页面
十九.发送短信验证码倒计时思路: ① 按钮点击之后,会禁用disabled为true. ② 同时按钮里面的内容会变化,注意button里面的内容通过innerHTML修改. ③ 里面秒数是有变化的, ...
js实现倒计时，定时器--完成时间倒计时
js实现倒计时,定时器–完成时间倒计时 //每秒刷新一次 setInterval(function showtime() {//结束时间var endTime = document.getElemen ...
页面显示格式化的时间、倒计时效果、学成在线案例（创建、添加节点）、学生信息表（重点）、5秒钟之后跳转页面（location.href应用）、学生信息表(页面刷新数据不丢失)（重点）——API练习案例
目录 1. 页面显示格式化的时间 2. 倒计时效果 3. 学成在线案例(创建节点.添加节点) 4.学生信息表案例(重点) 5. 5秒钟之后跳转页面(location.href的应用) 6. 学生信息表 ...
php ajax 考试倒计时,ajax实现在线考试倒计时
基于的C/S模式单机版的考试系统,我记得那种单机版的考试系统在进入考试以后界面就会自动的最大化,从而使考生的界面只能停留在考试界面而不能进行其他的操作,那样的话保证了考试系统的安全性.那么现在基于B/ ...
基于jQuery倒计时插件实现团购秒杀效果
倒计时一般是用来表示未来某一时刻距现在时刻还剩多少时间.倒计时在WEB上应用非常广泛,如考试系统倒计时,团购网站中的优惠活动倒计时等等.今天,我们来使用jQuery倒计时超级实现团购秒杀效果,感兴趣的 ...
android倒计时录制视频下载,什么软件可以制作倒计时视频?安卓手机制作倒计时片头的方法...
注意此教程方案是『安卓手机端教程方案』如果在手机端操作不方便或对眼睛不好也可以用另外电脑端的教程方案操作:10秒倒计时视频[找更多方案] 今天要介绍怎样制作视频片头是在安卓手机上制作一段倒计时片头 ...
网页通过CSS写出生日倒计时（利用：日期倒计时、元素自动旋转、边框视觉按钮效果）[直接复制代码即可实现、含注释]
图片效果 ↓(代码为粉图,生日歌自动播放) 视频效果 ↓(音乐为自动播放) 网页通过CSS写出生日倒计时(利用:日期倒计时.元素自动旋转.边框视觉按钮效果) 代码 ↓(可直接复制使用,音乐引用网易云音 ...
java中刷新页面的js,[Java教程]js页面刷新之实现框架内外刷新（整体、局部）
[Java教程]js页面刷新之实现框架内外刷新(整体.局部) 0 2016-10-12 12:00:56 这次总结的是框架刷新: 框架内外的按钮均可以定义网页重定向, 框架内部页面的按钮可以实现局部刷 ...

js页面倒计时7天 java_javascript实现倒计时效果

js页面倒计时7天 java_javascript实现倒计时效果相关推荐

最新文章

热门文章