Home > Web Front-end > JS Tutorial > body text

js uses setInterval to implement countdown

大家讲道理
Release: 2016-11-10 13:22:01
Original
1227 people have browsed it

利用setInterval制作简单的js倒计时,点击按钮将触发定时器且按钮不可用


html:

<button id="code" class="btn btn-default" onclick="getCode();">获取校验码</button>
Copy after login

JS:

<script type="text/javascript">  
    var i;  
    function getCode(){  
        $("#code").attr({"disabled":"disabled"});  
        i = self.setInterval("countdown()", 1000);  
    }  
   
    var int = 10  
    function countdown() {  
        document.getElementById("code").innerHTML = int + "秒后重新发送";  
        int--;  
        if(int<0){  
            i=window.clearInterval(i)//结束  
            int = 10; //重新赋值  
            $("#code").removeAttr("disabled").html("重新获取校验码");//将按钮可用  
        }  
    }  
       
</script>
Copy after login


source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!