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 相关文章推荐
JS中使用Array函数shift和pop创建可忽略参数的例子
May 28 Javascript
jQuery内置的AJAX功能和JSON的使用实例
Jul 27 Javascript
jQuery 判断图片是否加载完成方法汇总
Aug 10 Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
Mar 30 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
Oct 31 Javascript
yarn的使用与升级Node.js的方法详解
Jun 04 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
Jul 17 Javascript
React Native中Mobx的使用方法详解
Dec 04 Javascript
Node.js Windows Binary二进制文件安装方法
May 16 Javascript
JS实现动态添加外部js、css到head标签的方法
Jun 05 Javascript
vue实现标签云效果的方法详解
Aug 28 Javascript
vue a标签点击实现赋值方式
Sep 07 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之第十天
2006/10/09 PHP
PHP与MySQL开发的8个技巧小结
2010/12/17 PHP
php获取用户浏览器版本的方法
2015/01/03 PHP
浅谈thinkphp的实例化模型
2015/01/04 PHP
PHP写API输出的时用echo的原因详解
2019/04/28 PHP
Laravel创建数据库表结构的例子
2019/10/09 PHP
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
2006/12/27 Javascript
JavaScript 放大镜 移动镜片效果代码
2011/05/09 Javascript
js格式化金额可选是否带千分位以及保留精度
2014/01/28 Javascript
js对图片base64编码字符串进行解码并输出图像示例
2014/03/17 Javascript
jQuery实现可高亮显示的二级CSS菜单效果
2015/09/01 Javascript
javascript实现tab切换的两个实例
2015/11/05 Javascript
浅谈jQuery中ajaxPrefilter的应用
2016/08/01 Javascript
jQuery实现Select左右复制移动内容
2016/08/05 Javascript
jquery如何实现点击空白处隐藏元素
2017/12/05 jQuery
用React-Native+Mobx做一个迷你水果商城APP(附源码)
2017/12/25 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
2020/08/27 Javascript
[53:52]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python入门篇之数字
2014/10/20 Python
Python中用Spark模块的使用教程
2015/04/13 Python
python求解水仙花数的方法
2015/05/11 Python
python实现复制整个目录的方法
2015/05/12 Python
Python实现字符串与数组相互转换功能示例
2017/09/22 Python
python中的计时器timeit的使用方法
2017/10/20 Python
python+opencv像素的加减和加权操作的实现
2019/07/14 Python
详解python中的生成器、迭代器、闭包、装饰器
2019/08/22 Python
在Python中字符串、列表、元组、字典之间的相互转换
2019/11/15 Python
django实现将后台model对象转换成json对象并传递给前端jquery
2020/03/16 Python
中文专业毕业生自荐书范文
2014/01/04 职场文书
关于青春的演讲稿
2014/05/05 职场文书
白血病募捐倡议书
2014/05/14 职场文书
计算机求职信
2014/07/02 职场文书
建筑学专业自荐书
2014/07/09 职场文书
《假如》教学反思
2016/02/17 职场文书
干货分享:推荐信写作技巧!
2019/06/21 职场文书
2019年个人工作总结范文(3篇)
2019/08/27 职场文书