实现H5短信验证码倒计时

àì夳堔傛蜴生んèń 2023-01-03 01:44 289阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTI4Njc0NA_size_16_color_FFFFFF_t_70]  
html:

<div id="getcode">
    				<span id="J_second">60</span>秒后重新获取验证码
    		</div>
    	    <div id="getcodeagain">
    	    	<a>重新发送</a> 
    	    </div>

css:

#getcode{ 
    				 		margin-left: 80px;
    				 		margin-top: 80px;
    				 		font-size: 26px;
    				 		color: #333333;
    				 	}
    				 	#getcodeagain{ 
    				 		margin-left: 80px;
    				 		margin-top: -20px;
    				 		visibility: hidden;
    				 		font-size: 26px;
    				 		color: #3986F6;
    				 	}

js:

var second = 60;
    			var timer = null;
    			timer = setInterval(function() { 
    			    second -= 1;
    			    if (second > 0) { 
    			        document.getElementById("J_second").innerText=second
    		 
    			    } else { 
    			        clearInterval(timer);
    			       　document.getElementById("getcode").style.visibility="hidden";//隐藏
    			       
    			         document.getElementById("getcodeagain").style.visibility="visible";//显示
    			    }
    			}, 1000);

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTI4Njc0NA_size_16_color_FFFFFF_t_70]: /images/20221119/e056fe2c6c2a4474ad862c8282b0e1cc.png

发表评论取消回复

表情：

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

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

相关阅读

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

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

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

相关利用JS实现短信验证码倒计时案例

> 本章教程利用JS实现发送短信倒计时案例，这个需求在实际开发过程很常见。目录一、程序代码二、预览展示 -------------------- 一、程序代码

àì夳堔傛蜴生んèń/ 2023年09月29日 03:27/ 0 赞/ 12 阅读

相关 js发送短信验证码倒计时效果

![在这里插入图片描述][20200317181758713.PNG] ![在这里插入图片描述][20200317181827440.PNG] <input ty

青旅半醒/ 2023年07月16日 03:38/ 0 赞/ 41 阅读

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

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

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

相关短信验证码倒计时

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

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

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

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

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

相关获取短信验证码倒计时，非常简单

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8">

比眉伴天荒/ 2022年05月24日 03:08/ 0 赞/ 265 阅读

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

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

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

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

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

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

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

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

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