编程 Javascript

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实现倒计时效果

- Author -

Romantic mystery LH

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本

Sep 22 Javascript

HTML上传控件取消选择

Mar 06 Javascript

javascript 禁用IE工具栏,导航栏等等实现代码

Apr 01 Javascript

js 操作select与option(示例讲解)

Dec 20 Javascript

IE10中flexigrid无法显示数据的解决方法

Jul 26 Javascript

功能强大的Bootstrap效果展示（二）

Aug 03 Javascript

javascript 四十条常用技巧大全

Sep 09 Javascript

js事件委托和事件代理案例分享

Jul 25 Javascript

JS实现生成由字母与数字组合的随机字符串功能详解

May 25 Javascript

javascript中的event loop事件循环详解

Dec 14 Javascript

微信小程序实现聊天室

Aug 21 Javascript

js和jquery判断数据类型的4种方法总结

Aug 28 jQuery

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