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 IFrame 强制刷新代码
Jul 23 Javascript
基于json的jquery地区联动效果代码
Jul 06 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
Dec 17 Javascript
js获取页面description的方法
May 21 Javascript
多种JQuery循环滚动文字图片效果代码
Jun 23 Javascript
第一次接触神奇的Bootstrap表单
Jul 27 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
Oct 11 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
vue实现数字动态翻牌的效果(开箱即用)
Dec 08 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
Aug 11 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
Nov 02 Javascript
JavaScript实现移动小精灵的案例代码
Dec 12 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中$美元符号与Zen Coding冲突问题解决方法分享
2014/05/28 PHP
Laravel框架数据库CURD操作、连贯操作总结
2014/09/03 PHP
YII2.0之Activeform表单组件用法实例
2016/01/09 PHP
在PHP 7下安装Swoole与Yar,Yaf的方法教程
2017/06/02 PHP
php实现微信公众号企业转账功能
2018/10/01 PHP
符合标准的js表单提交的代码
2007/09/13 Javascript
让FireFox支持innerText的实现代码
2009/12/01 Javascript
json-lib出现There is a cycle in the hierarchy解决办法
2010/02/24 Javascript
jquery()函数的三种语法介绍
2013/10/09 Javascript
使用原生js写的一个简单slider
2014/04/29 Javascript
js中通过父级进行查找定位元素
2014/06/15 Javascript
jQuery中prevUntil()方法用法实例
2015/01/08 Javascript
jQuery+ajax实现局部刷新的两种方法
2017/06/08 jQuery
Angularjs上传图片实例详解
2017/08/06 Javascript
webpack分离css单独打包的方法
2018/06/12 Javascript
JS删除String里某个字符的方法
2021/01/06 Javascript
python获取酷狗音乐top500的下载地址 MP3格式
2018/04/17 Python
Python3实现的字典、列表和json对象互转功能示例
2018/05/22 Python
Python中三元表达式的几种写法介绍
2019/03/04 Python
Python企业编码生成系统之主程序模块设计详解
2019/07/26 Python
pymysql模块的操作实例
2019/12/17 Python
Python的对象传递与Copy函数使用详解
2019/12/26 Python
使用遗传算法求二元函数的最小值
2020/02/11 Python
Django实现从数据库中获取到的数据转换为dict
2020/03/27 Python
通过Python实现Payload分离免杀过程详解
2020/07/13 Python
Veronica Beard官网:在酷、经典和别致之间找到了平衡
2018/01/11 全球购物
美国孕妇装品牌:Destination Maternity
2018/02/04 全球购物
传统软件工程与面向对象的软件工程有什么区别
2012/05/31 面试题
汽车广告策划方案
2014/05/31 职场文书
感情真挚的毕业生求职信
2014/07/19 职场文书
学风建设演讲稿
2014/09/12 职场文书
银行转正自我鉴定
2014/09/29 职场文书
先进党支部申报材料
2014/12/24 职场文书
2015年小学实验室工作总结
2015/07/28 职场文书
解决jupyter notebook启动后没有token的坑
2021/04/24 Python
Django如何创作一个简单的最小程序
2021/05/12 Python