javascript实现倒计时效果


Posted in Javascript onFebruary 17, 2020

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

首先先写一个布局

<!--倒计时-->
<!DOCTYPE html>
<html>

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <style>
  #numbers p {
   position: absolute;
   font-size: 100px;
   left: 50%;
   top: 30%;
   margin-left: -29px;
   display:none;
  }
 </style>
</head>

<body>
 <div id="numbers">
  <p>3</p>
  <p>2</p>
  <p>1</p>
 </div>
</body>

</html>

javascript实现倒计时效果

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

之后开始添加javascipt内容

<script type="text/javascript">
  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)
  }
</script>

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

至此,倒计时功能完成。

javascript实现倒计时效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 1.3 和 Validation 验证插件1.5.1
Jul 09 Javascript
DOM 中的事件处理介绍
Jan 18 Javascript
使用typeof判断function是否存在于上下文
Aug 14 Javascript
基于JavaScript实现智能右键菜单
Mar 02 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
Aug 03 Javascript
详解js中Json的语法与格式
Nov 22 Javascript
jQuery插件扩展操作入门示例
Jan 16 Javascript
js实现下拉菜单效果
Mar 01 Javascript
vue loadmore组件上拉加载更多功能示例代码
Jul 19 Javascript
实例详解JSON取值(key是中文或者数字)方式
Aug 24 Javascript
Vue分页插件的前后端配置与使用
Oct 09 Javascript
微信小程序实现watch监听
Jun 04 Javascript
JavaScript将数组转换为链表的方法
Feb 16 #Javascript
javascript canvas API内容整理
Feb 16 #Javascript
vue props 单项数据流实例分享
Feb 16 #Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
Feb 16 #Javascript
vue中axios防止多次触发终止多次请求的示例代码(防抖)
Feb 16 #Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
Feb 16 #Javascript
封装一下vue中的axios示例代码详解
Feb 16 #Javascript
You might like
地球防卫队:陪着奥特曼打小怪兽的人类力量 那些经典队服
2020/03/08 日漫
php实现无限级分类实现代码(递归方法)
2011/01/01 PHP
php断点续传之如何分割合并文件
2014/03/22 PHP
ThinkPHP的L方法使用简介
2014/06/18 PHP
Yii2表单事件之Ajax提交实现方法
2017/05/04 PHP
PHP的mysqli_stat()函数讲解
2019/01/23 PHP
IE中直接运行显示当前网页中的图片 推荐
2006/08/31 Javascript
在JS数组特定索引处指定位置插入元素的技巧
2014/08/24 Javascript
jQuery满意度星级评价插件特效代码分享
2015/08/19 Javascript
深入理解jquery跨域请求方法
2016/05/18 Javascript
老生常谈JavaScript 正则表达式语法
2016/08/20 Javascript
js模拟微博发布消息
2017/02/23 Javascript
Bootstrap栅格系统简单实现代码
2017/03/06 Javascript
Bootstrap禁用响应式布局的实现方法
2017/03/09 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
2018/04/28 Javascript
vue-for循环嵌套操作示例
2019/01/28 Javascript
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
2019/10/26 Javascript
[02:08]DOTA2英雄基础教程 马格纳斯
2014/01/17 DOTA
[10:39]DOTA2上海特级锦标赛音乐会纪录片
2016/03/21 DOTA
[05:00]第二届DOTA2亚洲邀请赛主赛事第三天比赛集锦.mp4
2017/04/04 DOTA
Centos7 Python3下安装scrapy的详细步骤
2018/03/15 Python
python微信公众号之关注公众号自动回复
2018/10/25 Python
python 计算积分图和haar特征的实例代码
2019/11/20 Python
纯css3实现效果超级炫的checkbox复选框和radio单选框
2014/09/01 HTML / CSS
The North Face北面法国官网:美国著名户外品牌
2019/11/01 全球购物
计算机本科生自荐信
2013/10/15 职场文书
ktv中秋节活动方案
2014/01/30 职场文书
秘书英文求职信范文
2014/01/31 职场文书
学习经验交流会主持词
2014/04/01 职场文书
中国梦口号
2014/06/13 职场文书
教师查摆问题自查报告
2014/10/11 职场文书
2014年副班长工作总结
2014/12/10 职场文书
单位病假条范文
2015/08/17 职场文书
CentOS8.4安装Redis6.2.6的详细过程
2021/11/20 Redis
yolov5返回坐标的方法实例
2022/03/17 Python
Mysql 如何合理地统计一个数据库里的所有表的数据量
2022/04/18 MySQL