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之二(接口实现介绍)
Jan 27 Javascript
基于jQuery的图片左右无缝滚动插件
May 23 Javascript
22点关于jquery性能优化的建议
May 28 Javascript
jQuery实现列表的全选功能
Mar 18 Javascript
javascript实现的网站访问量统计代码
Dec 20 Javascript
js实现背景图自适应窗口大小
Jan 10 Javascript
JS解决移动web开发手机输入框弹出的问题
Mar 31 Javascript
JavaScript实现元素滚动条到达一定位置循环追加内容
Dec 28 Javascript
Vuejs 单文件组件实例详解
Feb 09 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
Sep 10 Javascript
layui动态绑定事件的方法
Sep 20 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
Apr 27 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调用MySQL存储过程的方法集合(推荐)
2013/07/03 PHP
使用新浪微博API的OAuth认证发布微博实例
2015/03/27 PHP
php+ajax实现文件切割上传功能示例
2020/03/03 PHP
PHP随机生成中文段落示例【测试网站内容时使用】
2020/04/26 PHP
JS支持带x身份证号码验证函数
2008/08/10 Javascript
JS打印gridview实现原理及代码
2013/02/05 Javascript
无限树Jquery插件zTree的常用功能特性总结
2014/09/11 Javascript
js贪吃蛇游戏实现思路和源码
2016/04/14 Javascript
浅谈JavaScript 浏览器对象
2016/06/03 Javascript
JS事件添加和移出的兼容写法示例
2016/06/20 Javascript
如何更好的编写js async函数
2018/05/13 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
2018/09/30 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
2019/05/12 Javascript
JS动态图片的实现方法完整示例
2020/01/13 Javascript
让mocha支持ES6模块的方法实现
2020/01/14 Javascript
js实现中文实时时钟
2020/01/15 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
2020/12/04 Vue.js
Python下的Mysql模块MySQLdb安装详解
2014/04/09 Python
深入解析Python编程中JSON模块的使用
2015/10/15 Python
详解python 发送邮件实例代码
2016/12/22 Python
利用python爬取软考试题之ip自动代理
2017/03/28 Python
python 获取当天每个准点时间戳的实例
2018/05/22 Python
Python docx库用法示例分析
2019/02/16 Python
pyecharts动态轨迹图的实现示例
2020/04/17 Python
python中 _、__、__xx__()区别及使用场景
2020/06/30 Python
opencv+pyQt5实现图片阈值编辑器/寻色块阈值利器
2020/11/13 Python
Shopee印度尼西亚:东南亚与台湾市场最大电商平台
2018/06/17 全球购物
工程招投标邀请书
2014/01/30 职场文书
学习标兵获奖感言
2014/02/20 职场文书
写好自荐信需做到的5要点
2014/03/07 职场文书
教师党员一句话承诺
2014/03/28 职场文书
幼儿园大班区域活动总结
2014/07/09 职场文书
少先队入队仪式主持词
2015/07/04 职场文书
六年级上册《闻官军收河南河北》的教学设计
2019/11/15 职场文书
PHP 对接美团大众点评团购券(门票)的开发步骤
2021/04/03 PHP
JavaScript实现简单拖拽效果
2021/09/15 Javascript