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

比眉伴天荒 2022-05-24 03:08 181阅读 0赞

<!doctype html>
    
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<meta name='viewport' content='width=device-width,minimum-scale=1.0 maximum-scale=1.0 user-scalable=no' />
    	<title>获取短信验证码倒计时</title>
    	<script src="http://code.jquery.com/jquery-latest.js"></script>
    	<style type="text/css">
    
    		.btn { 
    		    border: 0;
    		    width:120px;
    		    height:40px;  
    		    line-height: 40px; 
    		    float:left;
    		    color: white;
    		    background-color: #08c;
    		    border-radius: 20px;
    		    text-align: center;
    		    text-decoration: none;
    		}
    	</style>
    </head>
    <body>
    	<input type="button" class="btn" id="code" value="获取验证码" onclick="codeButton()">
    </body>
    <script type="text/javascript">
    	function codeButton(){
    	    var code = $("#code");
    	    code.attr("disabled","disabled");
    	    setTimeout(function(){
    	    	code.css("opacity","0.8");
    	    },1000)
    	    var time = 60;
    	    var set=setInterval(function(){
    	    code.val("("+--time+")秒后重新获取");
    	    }, 1000);
    	    setTimeout(function(){
    	    code.attr("disabled",false).val("重新获取验证码");
    	    clearInterval(set);
    	    }, 60000);
    	}
    </script>
    </html>

发表评论取消回复

表情：

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

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

相关阅读

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

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

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

相关实现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 赞/ 156 阅读

相关短信倒计时

//延时加载 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 赞/ 163 阅读

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

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

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

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

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

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

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

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

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

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

效果图 ![在这里插入图片描述][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 赞/ 411 阅读