短信倒计时

富江¢

于 2022-04-24 22:35:12 发布

阅读量70

点赞数

CC 4.0 BY-SA版权

文章标签： html

本文链接：https://blog.youkuaiyun.com/qq_58235030/article/details/124393754


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" placeholder="输入手机号"> <input type="button" value="获取验证码">
  <script>
    var num = document.querySelector("input[type='text']");
    var btn = document.querySelector("input[type='button']");
    btn.onclick = function (){
     if (num.value != ""){
       var time;
       var count = 5;
       this.disabled = true;
       time = window.setInterval(function (){
         btn.value = count + "秒后重新获取";
         if (count == 0){
           window.clearInterval(time);
           count = 5;
           btn.disabled = false;
           btn.value = "重新获取";
         }
         count--;
       },1000);
     }
    }
  </script>
</body>
</html>

在这里插入图片描述