点击读秒获取验证码按钮实现

亦凉 2024-02-17 17:34 147阅读 0赞

在桌面上面创建一个后缀名.html的文本，把代码复制进去就可以测试了。注意如需要做的好看点，样式自己添加。

1.需要给button设置背景，字体颜色，2.点击以后设置变化颜色，3.60秒读完变回开始背景颜色。

<html>  
<head>  
<title>行哥</title>

<style type="text/css">  
button \{  
color:\#ffffff; background:\#018be6;  
\}  
</style>  
<head>  
<body>  
<button id="btn" style="width:120px">获取验证码</button>  
</body>  
<script type="text/javascript">  
var test = \{  
node:null,  
count:60,  
start:function()\{  
if(this.count > 0)\{  
this.node.innerHTML = this.count--+"秒后重新获取";  
var \_this = this;  
setTimeout(function()\{  
\_this.start();  
\},1000);  
\}else\{  
this.node.removeAttribute("disabled");  
this.node.innerHTML = "重新获取";

//60秒读完，变回开始背景颜色，在这里添加。  
this.count = 60;  
\}  
\},  
//初始化  
init:function(node)\{  
this.node = node;  
this.node.setAttribute("disabled",true);  
this.start();  
\}  
\};  
var btn = document.getElementById("btn");  
btn.onclick = function()\{  
alert("发送成功...");  
test.init(btn);

//点击改变背景颜色，在这里添加  
\};  
</script>

如果你是湖南的 欢迎加入 湖南人在深圳-Java群：557651502

发表评论取消回复

表情：

评论列表（有 0 条评论，147人围观）

还没有评论，来说两句吧...

相关阅读

相关 html web前端，点击发送验证码，按钮60秒倒计时

html web前端，点击发送验证码，按钮60秒倒计时 ![format_png][] d3fed6739c40876ec865f17150fd2106.jpg

系统管理员/ 2024年02月21日 11:07/ 0 赞/ 51 阅读

相关 html web前端，点击发送验证码，按钮60秒倒计时

html web前端，点击发送验证码，按钮60秒倒计时 ![format_png][] eaca39b57a49d39f6c9e2f49f2559e9a.jpg

比眉伴天荒/ 2024年02月21日 11:06/ 0 赞/ 67 阅读

相关点击按钮失效5秒

<input type="button" value=" 失效5秒 " id="me" οnclick="this.disabled=true;setTimeout('me.d

╰半夏微凉°/ 2024年02月17日 20:05/ 0 赞/ 70 阅读

相关点击读秒获取验证码按钮实现

在桌面上面创建一个后缀名.html的文本，把代码复制进去就可以测试了。注意如需要做的好看点，样式自己添加。 1.需要给button设置背景，字体颜色，2.点击以后设置变化颜色

亦凉/ 2024年02月17日 17:34/ 0 赞/ 148 阅读

相关 vue写手机号绑定+验证，点击获取和重新获取验证码

用vue写手机号绑定如下，第一步，首先得是点击获取 ,60s倒计时 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text

青旅半醒/ 2023年07月23日 15:56/ 0 赞/ 11 阅读

相关按钮—按钮点击特效

按钮—按钮点击特效 ![在这里插入图片描述][2021041819283044.gif_pic_center] <!DOCTYPE html> <htm

谁借莪１个温暖的怀抱￠/ 2023年01月13日 10:54/ 0 赞/ 300 阅读

相关 vue获取手机验证码60秒倒计时，不能点击按钮

vue获取手机验证码60秒倒计时，不能点击按钮 export const resend = element => { console.log(elemen

叁歲伎倆/ 2022年06月09日 06:19/ 0 赞/ 205 阅读

相关 iOS点击获取短信验证码按钮

概述 iOS点击获取短信验证码按钮, 由于 Demo整体测试运行效果 , 整个修改密码界面都已展现, 并附送正则表达式及修改密码逻辑. 详细代码下载：[htt

红太狼/ 2022年05月31日 10:16/ 0 赞/ 340 阅读

相关 js 实现点击按钮

需求说明有时候为了更好的用户体验，我们需要js来实现点击按钮的操作 -------------------- html代码 <button type="

你的名字/ 2022年02月20日 08:55/ 0 赞/ 963 阅读

相关爬虫验证码：破解【点击旋转验证码】

这里破解某某动漫的点击翻转验证码为例：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cH

蔚落/ 2022年02月13日 11:13/ 0 赞/ 1123 阅读