分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 技术分享

JS 获取验证码 倒计时

发布时间:2023-09-06 02:20责任编辑:蔡小小关键词:验证码

setInterval 一个定时器搞定

<style>button{ ???background: #45BCF9; ???color: #fff; ???padding: 4px 10px; ???border: none; ???outline: none; ???cursor: pointer;}button:hover{ ???background: #00a8fe;}button.disabled{ ???background: #000; ???cursor: auto;}button.disabled:hover{ ???background: #000;}</style><button type="button" onclick="fn()">获取验证码</button><script>function fn(){ ???var oBtn = document.getElementsByTagName('button')[0]; ???var time = 60; ???var timer = null; ???oBtn.innerHTML = time + '秒后重新发送'; ???oBtn.setAttribute('disabled', 'disabled'); ??// 禁用按钮 ???oBtn.setAttribute('class', 'disabled'); ?????// 添加class 按钮样式变灰 ???timer = setInterval(function(){ ???????// 定时器到底了 兄弟们回家啦 ???????if(time == 1){ ???????????clearInterval(timer); ????????????????????????oBtn.innerHTML = '获取验证码'; ???????????????oBtn.removeAttribute('disabled'); ????????????oBtn.removeAttribute('class'); ???????????}else{ ???????????time--; ???????????oBtn.innerHTML = time + '秒后重新发送'; ???????} ???}, 1000)}</script>

这边穿梭进入演示空间

JS 获取验证码 倒计时

原文地址:https://www.cnblogs.com/xiaobaiv/p/9867121.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved