JavaScript实现获取短信效果

最新推荐文章于 2023-11-25 06:36:18 发布

.ASEN.

最新推荐文章于 2023-11-25 06:36:18 发布

阅读量1.4k

点赞数

分类专栏： JavaScript作业文章标签： js html5

本文链接：https://blog.csdn.net/weixin_47304332/article/details/124442632

版权

JavaScript作业专栏收录该内容

14 篇文章 2 订阅

订阅专栏

这是一个简单的HTML页面，包含一个用于输入手机号的文本框和一个获取验证码的按钮。当点击按钮时，如果手机号输入框不为空，按钮将被禁用，并开始5秒倒计时。倒计时期间，按钮的值会显示剩余秒数，倒计时结束后，按钮恢复启用并重置为初始状态。此代码展示了前端基础交互逻辑和JavaScript计时器的应用。

摘要由CSDN通过智能技术生成

<!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.body.firstElementChild;
    var btn = num.nextElementSibling;
    btn.onclick = function (){
     if (num.value != ""){
       var time;
       var count = 5;
       this.disabled = true;
       time = window.setInterval(()=>{
       btn.value = count + "秒后重新获取";
       if (count == 0){
          window.clearInterval(time);
          count = 5;
          btn.disabled = false;
          btn.value = "重新获取";
       }
       count--;
       },1000);
     }
   }
  </script>
</body>
</html>