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 相关文章推荐
javascript replace方法与正则表达式
Feb 19 Javascript
JSQL  一个 web DB 的封装
May 05 Javascript
jQuery实现标题有打字效果的焦点图代码
Nov 16 Javascript
JavaScript操作class和style样式代码详解
Feb 13 Javascript
实例讲解jquery中mouseleave和mouseout的区别
Feb 17 Javascript
angularjs 源码解析之scope
Aug 22 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
Dec 09 Javascript
Vue响应式添加、修改数组和对象的值
Mar 20 Javascript
浅谈在Vue-cli里基于axios封装复用请求
Nov 06 Javascript
React 高阶组件入门介绍
Jan 11 Javascript
webpack@v4升级踩坑(小结)
Oct 08 Javascript
基于layui内置模块(element常用元素的操作)
Sep 20 Javascript
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类的注册与自动加载
2013/07/05 PHP
一个经典的PHP文件上传类分享
2014/11/18 PHP
YII使用url组件美化管理的方法
2015/12/28 PHP
php版微信公众平台之微信网页登陆授权示例
2016/09/23 PHP
PHP中获取文件创建日期、修改日期、访问时间的方法
2016/11/05 PHP
针对PHP开发安全问题的相关总结
2019/03/22 PHP
javascript编程起步(第四课)
2007/02/27 Javascript
2007/12/23更新创意无限,简单实用(javascript log)
2007/12/24 Javascript
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
2010/06/02 Javascript
客户端 使用XML DOM加载json数据的方法
2010/09/28 Javascript
JavaScript 图像动画的小demo
2012/05/23 Javascript
js导入导出excel(实例代码)
2013/11/25 Javascript
详解javascript函数的参数
2015/11/10 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
2016/05/09 Javascript
js select实现省市区联动选择
2020/04/17 Javascript
微信小程序 window_x64环境搭建
2016/09/30 Javascript
AngularJS路由切换实现方法分析
2017/03/17 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
2017/09/10 jQuery
详解layui弹窗父子窗口之间传参数的方法
2018/01/16 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
2019/03/06 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
2019/06/10 jQuery
[06:21]2014DOTA2国际邀请赛 庆祝VG首阶段领跑;B叔为挣牛排半夜整理情报
2014/07/13 DOTA
利用Python的Django框架中的ORM建立查询API
2015/04/20 Python
对python函数签名的方法详解
2019/01/22 Python
python tkinter canvas 显示图片的示例
2019/06/13 Python
python文件选择对话框的操作方法
2019/06/27 Python
重构Python代码的六个实例
2020/11/25 Python
印尼值得信赖的在线交易网站:Bukalapak
2019/03/11 全球购物
奥地利时尚、美容、玩具和家居之家:Kastner & Öhler
2020/04/26 全球购物
你常见到的runtime exception
2016/09/05 面试题
大学生先进事迹材料
2014/02/16 职场文书
商务日语专业毕业生自荐信
2014/03/27 职场文书
明星邀请函
2015/02/02 职场文书
2015大学生求职信范文
2015/03/20 职场文书
党员承诺书格式范文
2015/04/28 职场文书
Python基本数据类型之字符串str
2021/07/21 Python