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

亦凉 2024-02-17 17:34 90阅读 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 条评论，90人围观）

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

相关阅读

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

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

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

相关点击按钮失效5秒

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

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

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

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

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

相关按钮—按钮点击特效

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

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

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

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

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

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

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

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

相关点击按钮获取checkbox的选中值

<input type='checkbox' name='a' value='1'/> $(function(){ te

朱雀/ 2022年05月13日 05:20/ 0 赞/ 328 阅读

相关 servlet生成验证码和点击刷新验证码

javaweb项目，有两个文件，一个java文件，用来生成验证码并输出到servlet输出流中。一个html文件，用来写组件和点击事件，刷新验证码。 CodeServlet.

- 日理万妓/ 2022年03月21日 06:46/ 0 赞/ 435 阅读

相关 js 实现点击按钮

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

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

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

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

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