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高级程序设计 读书笔记之八 Function类及闭包

    JavaScript高级程序设计 读书笔记之八 Function类及闭包 Function类 Function类的特点 Function类本身也是一个函数,它可以像工厂函数一样构建新的函数实例。 使用Function构造函数构建函数,可以动态地创建函数语句。 可以将字符串形式的代码,通过Function的形式执行。 Function构造函数的使用 Funct…

    JavaScript 2023年5月28日
    00
  • javaScript中定义类或对象的五种方式总结

    下面是详细讲解“JavaScript中定义类或对象的五种方式总结”的完整攻略: 1. 使用对象字面量定义对象 对象字面量是JavaScript中定义对象的一种常用方法。它使用一对大括号{}来定义一个空对象,然后通过对象的属性和方法来描述这个对象。 示例代码: let person = { name: ‘张三’, age: 18, gender: ‘男’, s…

    JavaScript 2023年5月27日
    00
  • 使用canvas生成含有微信头像的邀请海报没有微信头像问题

    使用Canvas生成含有微信头像的邀请海报是一项常见的需求,当中有时会遇到生成海报时,无法正确显示微信头像的问题。基于此,我编写了以下攻略来帮助您解决该问题。 常见问题分析 微信头像无法正确显示原因 微信头像无法正确显示,通常情况下是由于CORS的限制所导致的。在浏览器中,脚本的跨源HTTP请求通常会受到同源策略的限制,因此无法获取其他网站的数据。而我们在使…

    JavaScript 2023年6月11日
    00
  • Javascript的表单验证-提交表单

    Javascript表单验证是Web开发中的重要环节,可以提升用户体验和网站安全性。以下是通过JS实现表单验证和提交的攻略。 步骤1:HTML表单 首先,在HTML中定义表单元素,包括输入框、单选框、多选框、下拉框等。在表单中设置提交按钮,并添加JS函数来验证表单数据是否符合需要。示例代码如下: <form action="submit.ph…

    JavaScript 2023年6月10日
    00
  • 徒手实现关于JavaScript的24+数组方法

    徒手实现关于JavaScript的24+数组方法 在这篇攻略中,我们将徒手实现JavaScript中24个及以上的数组方法。这些方法包括常用的push,pop,shift和unshift等,以及其他数组方法如map,filter,reduce,every,some等。我们将会学到如何使用JavaScript编写这些方法,这将展示数组方法是如何工作的。 方法1…

    JavaScript 2023年5月27日
    00
  • python selenium操作cookie的实现

    Python Selenium操作Cookie的实现: 引入selenium模块 from selenium import webdriver 定义浏览器对象 browser = webdriver.Chrome() 获取网站Cookie信息 browser.get(‘https://www.baidu.com’) print(browser.get_coo…

    JavaScript 2023年6月11日
    00
  • 详解Html5 监听拦截Android返回键方法

    我会进行详细讲解。 HTML5 监听拦截 Android 返回键方法 在移动端开发中,Android 系统的返回键通常被用来做页面导航功能。但是,有时候我们需要在用户点击返回键时执行一些自定义的操作,比如:提示用户是否确认离开当前页面,或者执行一些其他的逻辑操作。那么如何监听和拦截 Android 返回键呢?本文将为你提供一些解决方案。 在 HTML5 中监…

    JavaScript 2023年6月11日
    00
  • 详解JavaScript实现简单的词法分析器示例

    下面是详解“详解JavaScript实现简单的词法分析器示例”的完整攻略: 一、词法分析器概述 词法分析器是编译器中最简单的部分之一,它的主要功能是将代码分解为有意义的词法单元,例如关键字、标识符、常量、操作符等。在构建词法分析器时,我们可以使用许多工具和技术,例如正则表达式、自动机、递归下降解析器等。 二、实现一个简单的词法分析器 下面我们将介绍如何使用J…

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