点击倒计时重发

最新推荐文章于 2024-01-24 15:24:22 发布

原创最新推荐文章于 2024-01-24 15:24:22 发布 · 121 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#点击倒计时重发

本文介绍了一个简单的网页应用，使用HTML、CSS和JavaScript实现了短信发送后的倒计时重发功能。用户点击按钮后，按钮将变为倒计时状态，达到设定时间后恢复为初始状态并允许再次发送。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

点击倒计时重发

##代码

// An highlighted block
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload=function(){
            var btn=document.getElementById("btn");
            var count=5;
            var timer=null;
            btn.onclick=function(){
                clearInterval(timer);
                this.disabled=true;
                var that=this;
                timer=setInterval(function(){
                    count--;
                    if(count>=0){
                       that.innerHTML="还剩"+count+"秒";
                    }else{
                        that.innerHTML="重新发送短信";
                        that.disabled=false;
                        clearInterval(timer);
                        count=5;
                    }
                },1000)
            }
        }
    </script>
</head>
<body>
    <input type="text"/>
    <button id="btn">点击发送短信</button>
</body>
</html>