JavaScript全解析——案例-验证码按钮倒计时
JavaScript全解析——案例-验证码按钮倒计时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
width: 300px;
height: 60px;
background-color: #fff;
font-size: 30px;
}
</style>
</head>
<body>
<button id="box">获取验证码</button>
<script>
/*
上午作业 案例 - 模拟点击获取验证码按钮
分析:
=> 要点击获取 首先是有一个能点击的事件
=> 我们知道验证码的都是一个倒计时样式的 到了时间没有完成就需要从新点击发送
=> 所以我们需要一个定时器 (反复性定时器)
=> 我们还需要设定一个时间 就是多长时间以后要重新点击
问题:
=> 我们发现如果我们不断的点击以后会出现时间重叠的现象
=> 这是因为我的一次执行还没有完全结束就开始了第二次的执行,
=> 这样就有了在某个时间内有多个要执行的程序
=> 这样就会导致我们的点击已经结束了还有多次要执行的程序在执行
解决方案:
=> 我们是不是可以给这个程序加一个开关
=> 一开始我们点击的时候让开关打开
=> 等我们的程序在执行的时候不允许再有点击的行为
=> 只能等的我这一次的行为执行完了以后才可以执行下次的点击
*/
// 在我们点击之前先设置一个开关
var flag = true
box.onclick = function () {
// 当程序执行的时候我们要看一下开关的状态
if (flag === false) return
// 我们关闭我们的开关
flag = false
// console.log(111);
// 设定完成事件
var count = 5
// 设定定时器
var t1 = setInterval(function () {
// 开启定时器我们是不是要让让我们设定的时间走起来
count--
// 我们的时候开始走的时候我们的显示内容是不是也要变换
box.innerText = `${count}后重新获取`
// 我们发现定时器一直在走 是不是要在一个时间以后就不能再走
if (count < 0) {
clearInterval(t1)
box.innerText = '获取验证码'
flag = true
}
}, 1000)
}
</script>
</body>
</html>
相关推荐HOT
更多>>
JavaScript全解析——案例-验证码按钮倒计时
JavaScript全解析——案例-验证码按钮倒计时
算法评测标准---空间复杂度是什么？
算法评测标准---空间复杂度是什么？空间复杂度是什么？一. 空间复杂度的概念，复杂度(Space Complexity)，是对一个算法在运行过程中临时占用存...详情>>
2023-03-23 20:15:04
怎么用css画三角形？
怎么用css画三角形？border这里的像素值 和 border-left这里的像素值可以是不一样的,也可以是一样的,根据三角形的形状来进行具体设置值即可，要...详情>>
2023-03-23 15:27:16
Maven集成 tomcat插件及使用教程
在实际的项目开发中，特别是分布式项目，往往有N多个子项目需要同时启动测试。这样多个项目引用tomcat插件，配置不同的端口，就可以同时启动N个...详情>>
2023-02-23 14:44:00热门推荐
什么叫做全局执行上下文？
沸JavaScript全解析——案例-验证码按钮倒计时
热hooks模仿componentDidMount是什么
热Redis的八大特性有哪些？
新Redis应用场景有哪些？
JavaScript全解析——设计模式是什么
JavaScript全解析——数据操作是什么
JavaScript全解析——DOM操作-获取元素的方式
useEffect如何写在依赖？
useRef与createRef的区别是什么？
redux中如何使用中间件？
useDeferredValue vs useTransition有什么不同？
createSelector的使用场景有哪些?
从零开始学Java53之Integer底层原理探究
技术干货
京公网安备 11010802030320号