码迷,mamicode.com
首页 > 其他好文 > 详细

点击按钮,然后实现30S倒计时

时间:2016-04-20 16:28:11      阅读:190      评论:0      收藏:0      [点我收藏+]

标签:

点击按钮的之后,按钮进行30S倒计时

HTML

<input type="button" id="getCode" name="" value="获取验证码" class="btnCode"/>

CSS

.btnCode {
    width: 40%;
    height: 42px; 
    background: #FFF; 
    color: #323333;
    font-size: 14px;
    line-height: 42px; 
}

.btnCodeDisabled {
    background: #ccc; 
}

JS

$(function(){
  var wait=30;
    function time(obj) {
            if (wait == 0) {
                obj.className=‘btnCode‘;
                obj.removeAttribute("disabled");            
                obj.value="";
                //wait = 30;
            } else {
                obj.className=‘btnCodeDisabled‘;//按钮变灰,不可点击
                obj.setAttribute("disabled", true);
                obj.value="重新发送("+ wait +")";
                wait--;
                setTimeout(function() {
                    time(obj)
                },
                1000)
            }
        }
            document.getElementById("getCode").onclick=function(){time(this);}
   })

 

点击按钮,然后实现30S倒计时

标签:

原文地址:http://www.cnblogs.com/yaowangmx/p/5413212.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!