js点击按钮倒计时setTimeout和setInterval

2023-06-02,,

setTimeout()

用于在指定的毫秒数后调用函数或计算表达式,只执行 code 一次。

setInterval()

可按照指定的周期(以毫秒计)来调用函数或计算表达式,不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。

由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

代码实现如下 

HTML部分

 <body>
<div class="wrap">
<input type="tel" class="shuru" id="phone"/>
<button class="btn" id="send">发送</button>
</div>
</body>

1.setTimeout实现

标题为JSFidder的链接,js部分代码如下

 var wait=60;
function time(){
var btn=document.getElementById("send");
var str=btn.innerText;
if(wait==1){
btn.innerText="再次发送";
btn.removeAttribute("disabled");
wait=60;
}else{
wait--;
btn.innerText=wait+"s后重新获取";
btn.setAttribute("disabled",true);
setTimeout(function(){
time();
},1000);
}
}
//点击button触发
document.getElementById("send").onclick=time;

2.setInterval实现

js部分代码如下

 <script type="text/javascript">
function time(){
var wait=60;
var btn=document.getElementById("send");
btn.setAttribute("disabled",true);
var timer=setInterval(function(){
if(wait==1){
btn.innerText="再次发送";
btn.removeAttribute("disabled");
wait=60;
clearInterval(timer);
}else{
wait--;
btn.innerText=wait+"s后重新获取";
}
},1000)
}
document.getElementById("send").onclick=time;
</script>

js点击按钮倒计时setTimeout和setInterval的相关教程结束。

《js点击按钮倒计时setTimeout和setInterval.doc》

下载本文的Word格式文档,以方便收藏与打印。