jq php手机发短信倒计时,js实现发送短信验证码倒计时

以你之姓@ 2022-11-18 04:58 161阅读 0赞

原标题：js实现发送短信验证码倒计时

发送短信验证码是网站或app常见的功能，为了避免用户频繁获取短信验证码，往往会设计一个倒计时功能，当间隔一定时间后才能再一次的获取，下面乐信小编就来为大家介绍下如何用js实现发送短信验证码倒计时。

html部分：

无标题文档

.wrapper\{

margin-top:20px;

margin-left:20px;

\}

.sns-input\{

float:left;

height:28px;

\}

.sns-btn\{

float:left;

border-radius:5px;

margin-left:10px;

cursor:pointer;

width:80px;

height:30px;

line-height:30px;

background-color:\#1f7e9a;

font-size:16px;

color:\#ffffff;

text-align:center;

\}

发送

页面效果：

![18e9e2096ab12c9761a6024a2fbde71b.png][]

js部分：

<>

var btnDisable = false; //发送按钮是否禁用

var btn=document.getElementById("snsBtn"); //按钮dom对象

btn.οnclick=function()\{ //按钮点击事件

//防止等待期间执行发送

if(btnDisable)\{

return;

\}

//1、执行请求验证码逻辑

//....

//2、设置定时器进行等等

timewait(60)

//3、恢复按钮可用

btnDisable = true;

\}

function(time)\{

setTimeout(function()\{

if(time>=0)\{

btn.innerHTML = time + "s后重试"；

time--;

timeWait(time);

\}else\{

btn.innerHTML = "发送"；

btnDisable = false;

\}

\},1000); //设置定时器

\}

>

最终实现效果

![73cae6a62f9df7dd2376b84d54cc0db9.png][]

本文来源：http://www.lx598.com/hangyedongtai/1028.html返回搜狐，查看更多

责任编辑：

[18e9e2096ab12c9761a6024a2fbde71b.png]: /images/20221022/206ffac55f6e4d9fb4570fb50271599f.png
[73cae6a62f9df7dd2376b84d54cc0db9.png]: /images/20221022/9f37ca82b2c3497f9b48057de2f4b333.png

发表评论取消回复

表情：

评论列表（有 0 条评论，161人围观）

还没有评论，来说两句吧...

相关阅读

相关 iOS 短信验证码倒计时按钮

级别： ★★☆☆☆ > 标签：「iOS 验证码后台倒计时」「NSTimer后台运行」「iOS 定时器后台运行」 > 作者： [Xs·H][Xs_H] > 审...

不念不忘少年蓝@/ 2024年04月17日 13:54/ 0 赞/ 32 阅读

相关实现H5短信验证码倒计时

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

àì夳堔傛蜴生んèń/ 2023年01月03日 01:44/ 0 赞/ 233 阅读

相关短信验证码倒计时

<button @click="sendout" ref="addAlert">发送验证码</button> // 短信验证码倒计时 send

ゞ浴缸里的玫瑰/ 2022年12月26日 10:16/ 0 赞/ 154 阅读

相关短信倒计时

//延时加载 var countdowns=20; function timerUnion() { if (countdowns <=

绝地灬酷狼/ 2022年12月25日 13:50/ 0 赞/ 131 阅读

相关 jq php手机发短信倒计时,js实现发送短信验证码倒计时

原标题：js实现发送短信验证码倒计时发送短信验证码是网站或app常见的功能，为了避免用户频繁获取短信验证码，往往会设计一个倒计时功能，当间隔一定时间后才能再一次的获取，下面

以你之姓@/ 2022年11月18日 04:58/ 0 赞/ 162 阅读

相关 jQuery实现发送短信验证码后60秒倒计时

<html> <head> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js

Bertha 。/ 2022年06月14日 09:08/ 0 赞/ 196 阅读

相关 angularjs短信验证码及秒倒计时

　　工作H5开发需要做短信验证码及秒倒计时，如果是用纯JS做好像还比较容易，但用angularJS做还是一些坑，特此记录一下，有如下几种实现方式。一.setTimeout方

怼烎@/ 2022年04月06日 10:48/ 0 赞/ 327 阅读

相关 jquery 获取短信验证码倒计时

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <scri

Dear 丶/ 2021年09月17日 04:10/ 0 赞/ 335 阅读

相关微信小程序发送短信验证码倒计时

效果图 ![在这里插入图片描述][20200827154829168.gif_pic_left] WXML文件 <view class="containe

桃扇骨/ 2021年09月02日 05:52/ 0 赞/ 434 阅读

相关 jquery获取短信验证码倒计时

直接上代码 // 获取短信验证码 $('.get_code').click(function () { var $code = $(th

超、凢脫俗/ 2021年07月26日 17:14/ 0 赞/ 410 阅读