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

在桌面上面创建一个后缀名.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

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值