javascript单击html按钮60秒内禁用

1、html代码
<input id="GetMoblie" type="button" value="获取验证码" />

2、说明
主要使用addEventListener('click', funGetMoblie,false);//绑定事件和setInterval(function(),1000);定时器方法表示1秒执行一次

3、jQuery版本

        $(function () {
            $('#GetMoblie').bind('click', GetMoblie);//绑定事件
        });
        function GetMoblie() {
            $('#GetMoblie').attr('disabled', 'disabled');//禁用按钮
            //$('#GetMoblie').unbind('click');//解除事件
            var count = 0;
            var time = setInterval(function () {//定时器循环
                count++;
                $('#GetMoblie').val("已发送" + count + "秒");
                if (count > 60) {
                    window.clearInterval(time);//清除定时器循环
                    //$('#GetMoblie').bind('click', GetMoblie);//绑定事件
                    $('#GetMoblie').removeAttr('disabled');//启用按钮
                    $('#GetMoblie').val("获取验证码");
                }
            }, 1000);//1秒钟执行一次
        }          

4、javascript版本

     
      window.onload = function () {
           var GetMoblie = document.getElementById('GetMoblie');
           GetMoblie.addEventListener('click', funGetMoblie,false);//绑定事件
       }
       function funGetMoblie() {
           var GetMoblie = document.getElementById('GetMoblie');
           GetMoblie.disabled = true;//禁用按钮
           //GetMoblie.removeEventListener('click', funGetMoblie,false);//解除绑定事件
           var count = 0;
           var time = setInterval(function () {//定时器循环
               count++;
               GetMoblie.value = "已发送" + count + "秒";
               if (count > 60) {
                   window.clearInterval(time);//清除定时器
                   GetMoblie.disabled = false;//启用按钮
                   //GetMoblie.addEventListener('click', funGetMoblie, false);
                   GetMoblie.value = "获取验证码";
               }
           }, 1000);//一秒执行一次
       }          
posted @ 2018-01-14 21:22  野村小孩  阅读(88)  评论(0)    收藏  举报