js实现发送短信验证码后60秒倒计时

最新推荐文章于 2024-02-03 11:02:39 发布
最新推荐文章于 2024-02-03 11:02:39 发布
阅读量3.8k 收藏 7
点赞数
1、input[type=‘button’]按钮 js方法实现 
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"> 
var countdown=60; 
function settime(obj) { 
    if (countdown == 0) { 
        obj.removeAttribute("disabled");    
        obj.value="免费获取验证码"; 
        countdown = 60; 
        return;
    } else { 
        obj.setAttribute("disabled", true); 
        obj.value="重新发送(" + countdown + ")"; 
        countdown--; 
    } 
setTimeout(function() { 
    settime(obj) }
    ,1000) 
}
  
</script>
<body> 
<input type="button" id="btn" value="免费获取验证码" οnclick="settime(this)" /> 
</body>
</html>


2、jquery方法实现

button按钮 需要时调用即可 传递id或class等。

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js"></script>
<script type="text/javascript"> 
function invokeSettime(obj){
    var countdown=60;
    settime(obj);
    function settime(obj) {
        if (countdown == 0) {
            $(obj).attr("disabled",false);
            $(obj).text("获取验证码");
            countdown = 60;
            return;
        } else {
            $(obj).attr("disabled",true);
            $(obj).text("(" + countdown + ") s 重新发送");
            countdown--;
        }
        setTimeout(function() {
                    settime(obj) }
                ,1000)
    }
}

  new invokeSettime("#btn");

</script>
<body> 
    <button id="btn" type="button">获取验证码</button>
</body>
</html>
free_Light16
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
11-22
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新，页面关闭不进行倒计时功能) 今天测试提了一个bug，发送短信倒计时功能，要求关闭页面也要进行倒计时。这想到了，当年我参与的周杰伦演唱会的先付先抢功能。与...
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
10-16
主要介绍了JS 实现发送短信验证码的“59秒后重新发送验证短信”功能,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
js实现短信验证码 倒计时
wushi91的博客
03-09 720
1.目标获取验证码后，按钮显示重新发送倒计时，倒计时结束后按钮重新可用。2.用到的两个关键api每秒执行：setInterval指定时间结束后执行：setTimeout3.代码function createTimer(time,interval,timeout){ let hasStartTime = 0//已经走了的时间 interval(hasStartTime)//立即执行一次 ...
JS模拟倒计时发送信息
qq_42862167的博客
04-09 170
【代码】JS模拟倒计时发送信息。
【JavaScript】实现点击获取验证码按钮后60s倒计时
Ai-Fairy的博客
08-23 5170
用JS实现点击获取验证码按钮后60s倒计时
js实现获取验证短信倒计时功能
SqlloveSyn的博客
03-28 2673
今天和大家分享一个小功能，在我们进行需要获取手机验证码或其他方式的验证码进行登录时会有一个功能，就是当你点击发送验证码时会有一个倒计时，倒计时没有结束时按钮是禁用的状态，防止重复发送短信，下面我们来看一下这个功能使用JS该如何实现。我们定义的time是一个倒计时的时间，一般为60秒，这里是为了不等太长的时间设置的10秒，大家可以根据自己的需要来设置倒计时的时长。以上就是本章的全部内容，希望能够帮助到您。
js点击获取验证码并倒计时60s
weixin_38008473的博客
11-26 1673
js点击获取验证码并倒计时60s。
js实现获取验证码，60秒倒计时功能
百变鹏仔工作室
02-03 633
当点击获取验证码按钮时，我们禁用该按钮以防止重复点击，并开始倒计时。在倒计时过程中，可以根据实际情况发送验证码请求。倒计时结束：当倒计时达到 0 秒时，执行相应的操作，例如显示错误信息或重新发送验证码。在上述示例中，我们首先获取了获取验证码按钮和倒计时显示元素，并设置了倒计时变量。初始化倒计时：在倒计时开始前，将倒计时器变量设置为 60 秒。函数来更新倒计时的显示，并在倒计时结束时启用获取验证码按钮。显示倒计时：使用 DOM 操作将倒计时的秒数显示在页面上。函数来实现倒计时功能。
【JavaScript】原生js实现点击获取验证码按钮后60s倒计时
tinghaodexiaoyao的博客
10-26 663
【代码】【JavaScript】原生js实现点击获取验证码按钮后60s倒计时。
通过JavaScript脚本实现60秒倒计时
RichardLau_Cx的博客
07-18 6754
通过JavaScript脚本实现60秒倒计时。
javascript用普通函数和立即执行函数实现简单60秒倒计时效果
m0_63689815的博客
02-11 1032
两种函数写法实现简单60秒倒计时效果
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新，页面关闭不进行倒计时功能)
11-25
下面一段代码是小编给大家带来的js发送短信验证码后实现倒计时功能，代码简单易懂。 具体代码如下所示： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=...
js 实现发送短信验证码后的倒计时功能
11-04
js 实现发送短信验证码后的倒计时功能 ajax前后端交互
前端 短信倒计时 （js实现）
suqinyi的博客
09-04 1205
效果： js实现： // 绑定事件方法 sendCode <a id="sendCode">发送验证码 </a> <script> //在script写方法 $(function () { //点击触发 $("#sendCode").click(function () { //倒计时 //hasClass 表示是否有这个样式 if ($(this).hasClass("disabled")) { //正在倒计时中
JavaScriptjs发送短信倒计时案例
moqichang的博客
05-16 254
点击发送按钮后，将按钮变为不可点击，并且进行倒计时
原生js实现手机号获取验证码60s倒计时功能
晚风的博客
08-22 396
原生js实现手机号获取验证码60s倒计时功能
js判断60秒以及倒计时
luoxufeng的专栏
09-21 3332
用js判断60秒到计时，首先定义一个变量refreshTime，当触发事件的时候检查一下上一次请求成功的时间距离现在是否超过60秒，如果没有超过60秒，则弹出提示， 否则则允许继续请求，请求成功之后，把当前的时间赋值给refreshTime，具体实现方式； usingNamespace("Biz.AccountCenter")["CellPhoneValidation"]={ re
JavaScript setTimeout 倒计时
annghi的博客
04-03 2098
//计时开始的方法 function countStart(){ var seconds = arguments[0];//倒计时方法中的当前时间 console.log(seconds ) } //计时结束的方法 function countStop(){ console.log("stop") } //倒计时方法 function setTimeCountDow
node-v6.10.0-linux-armv7l.tar.xz
最新发布
05-10
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
用js写一个短信验证码60秒的倒计时完整版
04-21
好的，以下是用JS写一个短信...这段代码实现了基本的手机号码验证和60秒倒计时的功能，在用户点击获取验证码按钮后会启动计时器，并将发送短信验证码的按钮进行禁用，当计时器归零时会自动开启发送短信验证码按钮。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值