JS短信倒计时案例

DOCTYPE html>
<html lang="en">


<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    span {
      font-size: 10px;
    }

    input {
      width: 130px;
      height: 15px;
      margin-left: 20px;
      font-size: 10px;
      color: #999;
    }

    button {
      width: 80px;
      font-size: 10px;
    }
  style>
head>

<body>
  <input type="text" placeholder='请输入手机号' id="tele">
  <button>获取验证码button>
  <script>
    // 获取元素
    var input = document.querySelector('#tele');
    var btn = document.querySelector('button');
    // 注册事件
    input.addEventListener('focus', function () {
      this.style.color = '#000';
    })
    var time = 60;  // 定义剩余秒数
    btn.addEventListener('click', function () {
      var tele = input.value;
      if (tele.length != 11) {  //判断输入框内容的长度是否为11位
        input.value = '手机号输入有误！'; //如果输入有误，则输入框以红色文本提示错误
        input.style.color = '#ff0000';
        setTimeout(function () {  // 设置定时器，在给出输入错误的提示1s后恢复原始输入状态
          input.value = tele;
          input.style.color = '#000';
        }, 1000)
      } else {
        this.disabled = true; // 手机号输入正确，则按钮变为禁用状态，并设置定时器
        var timer = setInterval(function () {
          if (time == 0) {
            // 清除定时器和复原按钮
            clearInterval(timer);
            btn.disabled = false;
            btn.innerHTML = '获取验证码';
            time = 60;  // 每次点击都需要重新开始计时
          } else {
            btn.innerHTML = '剩余' + time + '秒';
            time--;
          }
        }, 1000);
      }
    }
    )
  script>
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

相关阅读:
理解『注意力机制』的本质
[2023.09.26]: JsValue的转换体验与as关键字的浅析
架构设计杂谈
外贸人如何快速学好英语
初识 kubernetes 之 Pod
基于PyTorch3D的GeoAI实现【ESRI】
C Primer Plus(6) 中文版第11章字符串和字符串函数 11.4 自定义输入/输出函数
vue3+vite项目配置ESlint、pritter插件
Matlab之并行程序设计实战教程
如何用AR Engine开发一个虚拟形象表情包？

原文地址：https://blog.csdn.net/weixin_46811890/article/details/133557170