分享web开发知识

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

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

JS实现验证码倒计时效果

发布时间:2023-09-06 01:26责任编辑:白小东关键词:验证码

通常做注册页面时会有获取验证码按钮,然后点击后过60秒才能重新获取,比如现在项目中遇到的

然后点击后的样式,并且数字是递减的,到0时重新回到最初的状态(上图)。

首先构造HTML结构

<button class="getCode">获取验证码</button>

css就略了

JS实现:

var wait=60; ???????function time(o){ ???????????if (wait==0) { ???????????????o.removeAttribute("disabled"); ???????????????????o.innerHTML="输入验证码"; ???????????????o.style.backgroundColor="#fe9900"; ???????????????wait=60; ???????????}else{ ???????????????o.setAttribute("disabled", true); ???????????????o.innerHTML=wait+"秒后重新获取"; ???????????????o.style.backgroundColor="#8f8b8b"; ???????????????wait--; ???????????????setTimeout(function(){ ???????????????????time(o) ???????????????},1000) ???????????} ???????}

最后点击按钮,调用time方法:

$(".getCode").click(function(){ ???????????time(this); ???????});

至此全部功能全部完毕。

JS实现验证码倒计时效果

原文地址:http://www.cnblogs.com/yangjing1314/p/7880333.html

知识推荐

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