JavaScript使用setTimeout实现倒计时效果
网络编程 2021-07-04 14:07www.168986.cn编程入门
这篇文章主要为大家详细介绍了JavaScript使用setTimeout实现倒计时效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
为了加强对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); }
执行页面
结束页面
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程