首页
学习
活动
专区
圈层
工具
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

js 短信 倒计时

在JavaScript中实现短信发送后的倒计时功能,通常用于限制用户在一定时间内不能重复发送短信,以防止滥用。以下是这个功能涉及的基础概念、优势、类型、应用场景以及实现方法:

基础概念

  1. JavaScript定时器:使用setTimeoutsetInterval函数来延迟执行代码或定期执行代码。
  2. DOM操作:通过JavaScript操作HTML元素,如修改按钮文本或禁用按钮。

优势

  • 防止滥用:限制用户在短时间内重复发送短信,减少服务器压力和短信费用。
  • 用户体验:明确告知用户何时可以再次发送短信,避免用户重复操作。

类型

  • 简单倒计时:显示剩余时间,不改变按钮状态。
  • 禁用按钮倒计时:在倒计时期间禁用发送按钮,防止用户重复点击。

应用场景

  • 注册页面:用户注册时发送验证码。
  • 找回密码:用户找回密码时发送验证码。
  • 促销活动:用户参与活动时发送优惠信息。

实现方法

以下是一个简单的示例代码,展示如何在用户点击发送短信按钮后,禁用按钮并显示倒计时:

代码语言:txt
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>短信倒计时</title>
</head>
<body>
    <button id="sendSmsBtn" onclick="sendSms()">发送短信</button>

    <script>
        let countdown = 60; // 倒计时时间,单位秒
        let timer = null;

        function sendSms() {
            const btn = document.getElementById('sendSmsBtn');
            btn.disabled = true; // 禁用按钮
            btn.innerText = `重新发送(${countdown}s)`; // 修改按钮文本

            timer = setInterval(() => {
                countdown--;
                if (countdown <= 0) {
                    clearInterval(timer); // 清除定时器
                    btn.disabled = false; // 启用按钮
                    btn.innerText = '发送短信'; // 恢复按钮文本
                    countdown = 60; // 重置倒计时时间
                } else {
                    btn.innerText = `重新发送(${countdown}s)`; // 更新按钮文本
                }
            }, 1000);
        }
    </script>
</body>
</html>

解释

  1. HTML部分:一个按钮,点击时调用sendSms函数。
  2. JavaScript部分
    • countdown变量存储倒计时时间。
    • timer变量存储定时器的引用。
    • sendSms函数禁用按钮,修改按钮文本,并启动定时器。
    • 定时器每秒减少countdown的值,并更新按钮文本。当倒计时结束时,清除定时器,启用按钮,恢复按钮文本,并重置倒计时时间。

通过这种方式,可以有效地实现短信发送后的倒计时功能,提升用户体验并防止滥用。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • iOS 短信验证码倒计时按钮的实现

    实现思路 创建按钮, 添加点击方法; 用NSTimer定时器, 每秒执行一次, 定时改变Button的title,改变Button的样式, 设置Button不可点击; 若倒计时结束, 定时器关闭, 并改变...在app开发中经常会遇到,输入手机号获取验证码的功能,下面就和大家分享一下,获取验证码倒计时的功能实现 首先给大家看一下页面展示 ?...forState:0]; [self.contentView addSubview:_againBtn]; 按钮点击事件 - (void)againBtn:(UIButton *)sender{ //倒计时函数...[self messageTime]; } 倒计时函数 - (void)messageTime { __block int timeout=60; //倒计时时间 dispatch_queue_t...NSEC_PER_SEC, 0); //每秒执行 dispatch_source_set_event_handler(_timer, ^{ if(timeout倒计时结束

    2.1K10

    html倒计时免费代码,JS倒计时代码汇总

    本文实例总结了常见的JS倒计时代码。分享给大家供大家参考。...具体汇总如下: 第一种:精确到秒的javascript倒计时代码 HTML代码: 离2010年还有: startclock() var timerID = null; var timerRunning...HTML代码: 第四种:最简倒计时 HTML代码: 第五种:最简倒计时二 HTML代码: function djs(){ var urodz= new Date(“11/12/2008”); var...dni == 1) num=2 else if (dni == 0) num=1 else num=0 document.write(num) } 距某某开幕式还有 [] 天 第六个:Javascript倒计时器...– 采用系统时间自校验 这次利用系统时间自校验倒计时, 无需手工调校使得倒计时更为精确, 代码及详细注释如下: 00:01:11:00 var normalelapse = 100; var nextelapse

    5.2K10
    领券