JavaScript使用setTimeout实现倒计时效果


Posted in Javascript onFebruary 19, 2021

为了加强对JavaScript原生代码的编写能力,以及巩固setTimeout()的使用方法,制作了一个倒计时的demo,倒计时在现在的网站中算是一个常见的小功能,如果大家喜欢的话可以留下,就当作一个日常实用的小脚本。

实现思路

1、先获取小时值 将小时值减1开始进行倒计时 分钟59 秒数59
2、秒数的个位从9开始递减,当秒数个位小于0时,秒数的十位减1
3、秒数的十位小于0时,分钟的个位减1
4、分钟的个位小于0时,分钟的十位减1
5、分钟的十位小于0时,小时减1
6、小时数小于0后停止计时全部为0

实现代码

html

<p>倒计时:</p>
<span id="hour">5</span>
<span>:</span>
<span id="minuteTen">0</span>
<span id="minuteBit">0</span>
<span>:</span>
<span id="secondTen">0</span>
<span id="secondBit">0</span>

css

span{
 display: inline-block;
 width: 20px;
 height: 20px;
 background-color: #000000;
 color: #ffffff;
 text-align: center;
 }

JavaScript

function time(){
 /*小时*/
 var hourTxt = document.getElementById("hour");
 var hour = parseInt(document.getElementById("hour").innerHTML);
 /*分钟*/
 var minuteTenTxt = document.getElementById("minuteTen");
 var minuteBitTxt = document.getElementById("minuteBit");
 var minuteTen = parseInt(document.getElementById("minuteTen").innerHTML);
 var minuteBit = parseInt(document.getElementById("minuteBit").innerHTML);
 /*秒*/
 var secondTenTxt = document.getElementById("secondTen");
 var secondBitTxt = document.getElementById("secondBit");
 var secondTen = parseInt(document.getElementById("secondTen").innerHTML);
 var secondBit = parseInt(document.getElementById("secondBit").innerHTML);
 function start(){
 hour--;
 hourTxt.innerHTML = hour;
 minuteTen = 5;
 minuteTenTxt.innerHTML = minuteTen;
 minuteBit = 9;
 minuteBitTxt.innerHTML = minuteBit;
 secondTen = 5;
 secondTenTxt.innerHTML = secondTen;
 secondBit = 9;
 secondBitTxt.innerHTML = secondBit;

 /*secondBit开始自减*/
 function second(){
  secondBit--;
  secondBitTxt.innerHTML = secondBit;

  /*十秒过后*/
  if(secondBit < 0){
  secondTen--;
  secondTenTxt.innerHTML = secondTen;
  secondBit = 9;
  secondBitTxt.innerHTML = secondBit;
  /*继续倒计时*/
  setTimeout(second,1000);

  /*一分钟过后*/
  if(secondTen < 0){
   minuteBit--;
   minuteBitTxt.innerHTML = minuteBit;
   secondTen = 5;
   secondTenTxt.innerHTML = secondTen;
   secondBit = 9;
   secondBitTxt.innerHTML = secondBit;

   /*十分钟过后*/
   if(minuteBit < 0){
   minuteTen--;
   minuteTenTxt.innerHTML = minuteTen;
   minuteBit = 9;
   minuteBitTxt.innerHTML = minuteBit;
   }

   /*一个小时过后*/
   if(minuteTen < 0){
   hour--;
   hourTxt.innerHTML = hour;
   minuteTen = 5;
   minuteTenTxt.innerHTML = minuteTen;
   minuteBit = 9;
   minuteBitTxt.innerHTML = minuteBit;
   secondTen = 5;
   secondTenTxt.innerHTML = secondTen;
   secondBit = 9;
   secondBitTxt.innerHTML = secondBit;
   }

   /*倒计时结束*/
   if(hour < 0 ){
   hour = 0;
   hourTxt.innerHTML = hour;
   minuteTen = 0;
   minuteTenTxt.innerHTML = minuteTen;
   minuteBit = 0;
   minuteBitTxt.innerHTML = minuteBit;
   secondTen = 0;
   secondTenTxt.innerHTML = secondTen;
   secondBit = 0;
   secondBitTxt.innerHTML = secondBit;
   clearTimeout(second);
   clearTimeout(start);
   }
  }
  }else{
  setTimeout(second,1000);
  }
 }
 setTimeout(second,1000);

 }
 setTimeout(start,1000);
}

执行页面

JavaScript使用setTimeout实现倒计时效果

结束页面

JavaScript使用setTimeout实现倒计时效果

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

Javascript 相关文章推荐
JSON传递bool类型数据的处理方式介绍
Sep 18 Javascript
怎么判断js脚本加载完成
Feb 28 Javascript
javascript快速排序算法详解
Sep 17 Javascript
Three.js学习之正交投影照相机
Aug 01 Javascript
jQuery简单获取DIV和A标签元素位置的方法
Feb 07 Javascript
基于es6三点运算符的使用方法(实例讲解)
Oct 12 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
Jan 15 Javascript
浅谈vue引入css,less遇到的坑和解决方法
Jan 20 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
Feb 26 Javascript
Vue2.0 事件的广播与接收(观察者模式)
Mar 14 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
May 16 Javascript
Vue中引入svg图标的两种方式
Jan 14 Vue.js
react项目从新建到部署的实现示例
Feb 19 #Javascript
原生JavaScript实现幻灯片效果
Feb 19 #Javascript
JavaScript 实现继承的几种方式
Feb 19 #Javascript
JavaScript 生成唯一ID的几种方式
Feb 19 #Javascript
JavaScript实现打字游戏
Feb 19 #Javascript
JS+CSS实现动态时钟
Feb 19 #Javascript
js动态添加带圆圈序号列表的实例代码
Feb 18 #Javascript
You might like
php读取数据库信息的几种方法
2008/05/24 PHP
php 随机生成10位字符代码
2009/03/26 PHP
PHP header()函数常用方法总结
2014/04/11 PHP
php操作memcache缓存方法分享
2015/06/03 PHP
php简单实现sql防注入的方法
2016/04/22 PHP
php解压缩zip和rar压缩包文件的方法
2019/07/10 PHP
父子窗体间传递JSON格式的数据的代码
2010/12/25 Javascript
artDialog双击会关闭对话框的修改过程分享
2013/08/05 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
2014/07/04 Javascript
node.js中的fs.fchmodSync方法使用说明
2014/12/16 Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
2015/03/04 Javascript
JavaScript之AOP编程实例
2015/07/17 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
2015/11/05 Javascript
跟我学习javascript的prototype使用注意事项
2015/11/17 Javascript
12 款 JS 代码测试必备工具(翻译)
2016/12/13 Javascript
javascript循环链表之约瑟夫环的实现方法
2017/01/16 Javascript
AngularJS 验证码60秒倒计时功能的实现
2017/06/05 Javascript
[原创]jquery判断元素内容是否为空的方法
2018/05/04 jQuery
微信小程序云开发之云函数详解
2019/05/16 Javascript
借助云开发实现小程序短信验证码的发送
2020/01/06 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
2020/04/13 Javascript
[05:08]第一届“网鱼杯”DOTA2比赛精彩集锦
2014/09/05 DOTA
八大排序算法的Python实现
2021/01/28 Python
Python tkinter模块中类继承的三种方式分析
2017/08/08 Python
对python_discover方法遍历所有执行的用例详解
2019/02/13 Python
python实现的按要求生成手机号功能示例
2019/10/08 Python
python删除某个目录文件夹的方法
2020/05/26 Python
html5教程实现Photoshop渐变色效果
2013/12/04 HTML / CSS
巴西最大的珠宝连锁店:Vivara
2019/04/18 全球购物
什么叫应用程序域?什么是托管代码?什么是强类型系统?什么是装箱和拆箱?什么是重载?CTS、CLS和CLR分别作何解释?
2012/05/23 面试题
无工作经验者个人求职信范文
2013/12/22 职场文书
校园活动策划书范文
2014/01/10 职场文书
计算机网络专业自荐书
2014/06/09 职场文书
国际金融专业自荐信
2014/07/05 职场文书
民主评议党员工作总结
2014/10/20 职场文书
TS 类型兼容教程示例详解
2022/09/23 Javascript