js实现5秒倒计时重新发送短信功能

最新推荐文章于 2024-03-05 19:50:13 发布

xlb_123

最新推荐文章于 2024-03-05 19:50:13 发布

阅读量574

点赞数

分类专栏： web前端开发 js相关

web前端开发同时被 2 个专栏收录

153 篇文章

订阅专栏

js相关

89 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的手机短信发送后的倒计时功能。通过设置按钮的禁用状态及更改显示文本，实现了计时结束后按钮状态的自动恢复。

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js-手机发送短信倒计时</title>
  <style>
    button{
      width: 100px;
      height: 30px;
      border: none;
    }
    input{
      outline: none;
    }
  </style>
<script>  
    window.onload = function(){
      function $(id){ return document.getElementById(id); } 
      $('btn').onclick = function(){
        var that = this;
        that.disabled = true;
        var count = 5;
        var timer = setTimeout(fn,1000);
        function fn(){
          count--;
          if(count>0){
            that.innerHTML = "剩余时间"+ count +"s";
            setTimeout(fn,1000); 
          }else{
            that.innerHTML ="重新发送短信";
            that.disabled = false; 
          }
        }
      }
    }
  </script>
</head>
<body>
  <div class="box">
    <input type="text" id="txt">
    <button id="btn" >点击发送短信</button>
  </div>
</body>
</html>

转载自：https://www.jb51.net/article/104653.htm