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

最新推荐文章于 2023-03-30 14:02:59 发布

xlb_123

最新推荐文章于 2023-03-30 14:02:59 发布

阅读量524

点赞数

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

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

153 篇文章 1 订阅

订阅专栏

js相关

89 篇文章 0 订阅

订阅专栏

<!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

xlb_123

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js实现5秒倒计时重新发送短信功能

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>js-手机发送短信倒计时</title> <style> button{ width: 100px; height: 30px;...
复制链接

扫一扫

专栏目录