JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)

下面是详细讲解“JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)”的完整攻略。

一、需求分析

我们要实现的功能是:在用户点击发送短信验证码按钮后,按钮变为不可点击状态,同时开始显示倒计时,直到倒计时结束后按钮恢复可点击状态。

为了防止用户在倒计时过程中刷新页面导致倒计时失效,我们需要使用浏览器的本地存储(localStorage/sessionStorage)来保存倒计时开始时间,页面刷新后可以根据存储的时间计算出倒计时的剩余时间,从而保证倒计时能够正确恢复。

二、实现步骤

1. HTML部分

<button id="send-code-btn">发送验证码</button>

2. JavaScript部分

1)定义倒计时功能函数

function countdown(seconds) {
  var timer = setInterval(function() {
    var btn = document.getElementById('send-code-btn');
    seconds--;
    if (seconds === 0) {
      clearInterval(timer);
      btn.innerHTML = '发送验证码';
      btn.disabled = false;
      localStorage.removeItem('startTime');
    } else {
      btn.innerHTML = '重新发送(' + seconds + ')';
    }
  }, 1000);
}

这个函数负责处理倒计时功能,传入参数seconds表示倒计时的总秒数。在函数内,使用setInterval函数每隔一秒钟更新一次倒计时的状态,直到倒计时结束。结束后清除计时器,同时将按钮文字设置为‘发送验证码’,按钮状态设置为可点击,从localStorage中删除存储的开始时间。

2)绑定按钮点击事件

var btn = document.getElementById('send-code-btn');
btn.addEventListener('click', function() {
  var now = Date.now();
  var startTime = localStorage.getItem('startTime');
  if (startTime && now - startTime < 60 * 1000) {
    alert('请勿频繁发送验证码');
  } else {
    localStroage.setItem('startTime', now);
    btn.disabled = true;
    countdown(60);
    // 发送短信验证码的代码
  }
});

这段代码负责绑定按钮的点击事件,并判断是否可以发送验证码。如果上一次发送验证码的时间距离当前时间不足60秒,那么弹出提示‘请勿频繁发送验证码’。否则,将当前时间存入localStorage中,按钮状态设置为不可点击,调用countdown函数开始倒计时操作,并执行发送短信验证码的代码。

3)处理页面刷新后的倒计时恢复

var btn = document.getElementById('send-code-btn');
var startTime = localStorage.getItem('startTime');
if (startTime) {
  var now = Date.now();
  var seconds = Math.floor((60 * 1000 - (now - startTime)) / 1000);
  if (seconds > 0) {
    btn.innerHTML = '重新发送(' + seconds + ')';
    btn.disabled = true;
    countdown(seconds);
  } else {
    localStorage.removeItem('startTime');
  }
} else {
  btn.innerHTML = '发送验证码';
}

这段代码负责在页面刷新后判断是否存在倒计时未结束的情况,如果存在,则根据存储的开始时间计算出剩余时间,调用countdown函数开始倒计时操作,并将按钮状态设置为不可点击。如果不存在倒计时未结束的情况,则将按钮状态初始化为可点击状态。

三、示例说明

示例一:只包含倒计时功能

<body>
  <button id="btn">点击发送验证码</button>
  <script>
    function countdown(seconds) {
      var btn = document.getElementById('btn');
      var timer = setInterval(function() {
        seconds--;
        if (seconds === 0) {
          clearInterval(timer);
          btn.innerHTML = '点击发送验证码';
          btn.disabled = false;
        } else {
          btn.innerHTML = '重新发送(' + seconds + ')';
        }
      }, 1000);
      btn.disabled = true;
      btn.innerHTML = '重新发送(' + seconds + ')';
    }

    document.getElementById('btn').addEventListener('click', function() {
      countdown(60);
    });
  </script>
</body>

这是一个只包含倒计时功能的示例,在点击按钮后,按钮状态变为不可点击状态,同时开始倒计时,60秒后恢复为可点击状态。

示例二:完整实现发送验证码功能

<body>
  <button id="btn">点击发送验证码</button>
  <script>
    function countdown(seconds) {
      var btn = document.getElementById('btn');
      var timer = setInterval(function() {
        seconds--;
        if (seconds === 0) {
          clearInterval(timer);
          btn.innerHTML = '点击发送验证码';
          btn.disabled = false;
          localStorage.removeItem('startTime');
        } else {
          btn.innerHTML = '重新发送(' + seconds + ')';
        }
      }, 1000);
      btn.disabled = true;
      btn.innerHTML = '重新发送(' + seconds + ')';
      localStorage.setItem('startTime', Date.now());
    }

    document.getElementById('btn').addEventListener('click', function() {
      var now = Date.now();
      var startTime = localStorage.getItem('startTime');
      if (startTime && now - startTime < 60 * 1000) {
        alert('请勿频繁发送验证码');
      } else {
        countdown(60);
        // 发送验证码的代码
      }
    });

    var startTime = localStorage.getItem('startTime');
    if (startTime) {
      var now = Date.now();
      var seconds = Math.floor((60 * 1000 - (now - startTime)) / 1000);
      if (seconds > 0) {
        var btn = document.getElementById('btn');
        btn.innerHTML = '重新发送(' + seconds + ')';
        btn.disabled = true;
        countdown(seconds);
      } else {
        localStorage.removeItem('startTime');
      }
    }
  </script>
</body>

这个示例实现了发送验证码的完整功能,并加入了防止刷新倒计时失效的机制。在点击按钮后,会判断上一次发送验证码的时间是否超过60秒,如果是则调用倒计时功能函数,并且执行发送验证码的代码。在页面刷新后,会判断是否存在倒计时未结束的情况,如果存在,则恢复倒计时功能,并保证倒计时正确地进行,保证了发送验证码功能的正常进行。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效) - Python技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • 在JavaScript中使用JSON数据

    在JavaScript中使用JSON数据的完整攻略包括以下几个步骤: 1.了解JSON格式 JSON(JavaScript Object Notation)是一种格式化和交换数据的格式,使用键值对的方式来表示数据,并使用大括号包裹数据。示例: { "name": "张三", "age": 18, &…

    JavaScript 2023年5月27日
    00
  • js 时间函数应用加、减、比较、格式转换的示例代码

    下面是关于 JavaScript 时间函数的应用攻略: 获取当前时间 使用 Date() 构造函数获取当前时间。 const now = new Date(); console.log(now); // 输出当前时间 同时,还可以使用 getTime() 方法获取当前时间的时间戳。 const now = new Date(); console.log(no…

    JavaScript 2023年5月27日
    00
  • 深入学习JavaScript 高阶函数

    完整攻略:深入学习JavaScript高阶函数 什么是高阶函数? 在JavaScript中,函数是一等公民。其意味着我们可以将函数分配给变量、将函数作为参数传递给其他函数以及从函数中返回函数。 函数能够接收一个或多个函数作为参数并将函数返回作为其结果的函数称为“高阶函数”。 为什么我们需要高阶函数? 高阶函数提供了一个强大的工具来处理同类型的原始值和对象。 …

    JavaScript 2023年6月10日
    00
  • JavaScript原始数据类型Symbol的用法详解

    以下是详细讲解“JavaScript原始数据类型Symbol的用法详解”的完整攻略: JavaScript原始数据类型Symbol的用法详解 什么是Symbol Symbol是JavaScript新增的一种原始数据类型,用于表示独一无二的值。Symbol的值是唯一的,即使使用相同的参数创建多个Symbol值,它们也是不相等的。这也是Symbol的主要特点和用…

    JavaScript 2023年5月28日
    00
  • 最新JS正则表达式验证邮箱和手机号实例(2022)

    针对这篇“最新JS正则表达式验证邮箱和手机号实例(2022)”文章,我将提供完整攻略如下: 文章概览 了解文章主题 确定验证目标:邮箱和手机号 设计验证规则:使用正则表达式 实现邮件和手机号码验证 确定验证目标:邮箱和手机号 在阅读这篇文章后,我们了解到验证目标是邮箱和手机号。在开始验证规则设计之前,首先需要了解邮箱和手机号的基本格式。 邮箱格式 一般的邮箱…

    JavaScript 2023年6月10日
    00
  • javascript canvas时钟模拟器

    下面是“JavaScript Canvas时钟模拟器”的完整攻略。 一、准备工作 在进入具体的代码实现前,我们需要先进行一些准备工作。 1. 创建HTML结构 我们需要创建一个HTML文件,并在文件中创建一个canvas元素。canvas元素将用于绘制时钟。 示例代码: <!DOCTYPE html> <html> <head&…

    JavaScript 2023年6月11日
    00
  • JS 实现 ajax 异步浏览器兼容问题

    JS 实现 ajax 异步浏览器兼容问题 什么是 AJAX AJAX (Asynchronous JavaScript and XML) 是一种通过后台与服务器进行数据交换,而无需重新加载整个页面的技术,在 Web 开发中广泛应用。以下是 AJAX 的一些优点: 可以在不刷新页面的情况下更新页面内容 能够异步地获取数据,并把数据显示在页面上 能够使用服务器应…

    JavaScript 2023年6月11日
    00
  • 每个 JavaScript 工程师都应懂的33个概念

    “每个 JavaScript 工程师都应懂的33个概念”是一本非常重要的书籍,其中记录了每个JavaScript工程师需要掌握的33个概念。在本文中,我会详细介绍这本书中的每个概念,以及如何应用它们。 1. 理解页面加载和渲染 在这个章节里,作者介绍了关于页面加载过程的一些细节,以及如何优化页面的加载速度。其中提到了减少HTTP请求、使用无阻塞脚本、使用CS…

    JavaScript 2023年5月18日
    00
合作推广
合作推广
分享本页
返回顶部