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 相关文章推荐
javascript学习网址备忘
May 29 Javascript
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
Jan 15 Javascript
基于jquery打造的百分比动态色彩条插件
Sep 19 Javascript
jquery实现更改表格行顺序示例
Apr 30 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
May 01 Javascript
ionic 上拉菜单(ActionSheet)实例代码
Jun 06 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
Jun 22 Javascript
实例详解jQuery的无new构建
Aug 02 Javascript
微信小程序开发入门基础教程
Apr 19 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
Dec 07 Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
May 10 Javascript
react koa rematch 如何打造一套服务端渲染架子
Jun 26 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
php+mysql分页代码详解
2008/03/27 PHP
Laravel框架学习笔记(二)项目实战之模型(Models)
2014/10/15 PHP
PHP之sprintf函数用法详解
2014/11/12 PHP
又拍云异步上传实例教程详解
2016/04/19 PHP
PHP实现导出excel数据的类库用法示例
2016/10/15 PHP
node.js chat程序如何实现Ajax long-polling长链接刷新模式
2012/03/13 Javascript
JS实现的另类手风琴效果网页内容切换代码
2015/09/08 Javascript
JS实现自动变化的导航菜单效果代码
2015/09/09 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
2020/06/23 Javascript
Bootstrap精简教程
2015/11/27 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
2015/12/01 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
2016/01/27 Javascript
jquery实现下拉框功能效果【实例代码】
2016/05/06 Javascript
微信小程序 登录实例详解
2017/01/16 Javascript
详解在Node.js中发起HTTP请求的5种方法
2019/01/10 Javascript
Python中的自定义函数学习笔记
2014/09/23 Python
python实现应用程序在右键菜单中添加打开方式功能
2017/01/09 Python
Python实现对象转换为xml的方法示例
2017/06/08 Python
详解python破解zip文件密码的方法
2020/01/13 Python
使用python 的matplotlib 画轨道实例
2020/01/19 Python
Python 时间戳之获取整点凌晨时间戳的操作方法
2020/01/28 Python
Python3查找列表中重复元素的个数的3种方法详解
2020/02/13 Python
详解如何在pyqt中通过OpenCV实现对窗口的透视变换
2020/09/20 Python
把Anaconda中的环境导入到Pycharm里面的方法步骤
2020/10/30 Python
Python并发爬虫常用实现方法解析
2020/11/19 Python
详解Python Celery和RabbitMQ实战教程
2021/01/20 Python
HTML5获取当前地理位置并在百度地图上展示的实例
2020/07/10 HTML / CSS
世界上最大的冷却器制造商:Igloo Coolers
2019/07/23 全球购物
军神教学反思
2014/02/04 职场文书
企业法人授权委托书
2014/09/25 职场文书
交通局领导班子群众路线教育实践活动对照检查材料思想汇报
2014/10/09 职场文书
质量整改报告范文
2014/11/08 职场文书
幼儿园教师师德表现自我评价
2015/03/05 职场文书
刘胡兰观后感
2015/06/16 职场文书
党风廉政承诺书2016
2016/03/25 职场文书
微信小程序 WeUI扩展组件库的入门教程
2022/04/21 Javascript