JS 获取验证码按钮改变案例

HTML代码

<div class="box">
        <label for="">手机号</label> <input type="number"> <button>获取</button>
    </div>

JS代码

 1 var btn = document.querySelector(‘button‘)
 2         var time = 10;
 3         btn.addEventListener(‘click‘, function () {
 4             this.disabled = true;
 5             var timer = setInterval(function () {
 6                 if (time == 0) {
 7                     clearTimeout(timer)
 8                     btn.disabled = false;
 9                     btn.innerHTML = ‘发送‘
10                     time = 10;
11                 } else {
12                     btn.innerHTML = ‘还剩下‘ + time + ‘秒‘
13                     time--;
14                 }
15             }, 1000)
16         })

原文地址:https://www.cnblogs.com/xf2764/p/12658630.html

时间: 2024-10-13 17:01:46

JS 获取验证码按钮改变案例的相关文章

js获取验证码 秒表效果(原创)

<script src="http://code.jquery.com/jquery-latest.js"></script> <input type="button" onclick="setclock($(this),10);" value="获取验证码"> <script> function setclock(dom,value,text) { value=argument

Angular.js 使用获取验证码按钮实现-倒计时

获取验证码界面效果如图: 需要实现以下逻辑 按钮不可选 --输入电话号码,按钮可选 --点击获取,进入倒计时,按钮不可选 --倒计时结束,回到初识状态 核心代码: var cd = 60; var toDo = function() { cd--; $scope.countDown = "重新获取 " + cd; }; $interval(toDo, 1000, 60); 完整代码: html: <form name="form" class="fo

ios开发获取验证码按钮读秒效果

方法一: - (void)startCountDown { _seconds = 60; NSString *str = [NSString stringWithFormat:@"%d秒后可重新获取", _seconds]; [_btnVerify setTitle:str forState:UIControlStateDisabled]; [_btnVerify.titleLabel setFont:[UIFont systemFontOfSize:12]]; [_btnVerify

获取验证码按钮点击后,一分钟内不可继续点击

1 <input type="button" id="btn" value="免费获取验证码" /> 2 <script type="text/javascript"> 3 var wait=60; 4 function time(o) { 5 if (wait == 0) { 6 o.removeAttribute("disabled"); 7 o.value="免费获取

手机获取验证码的接口 案例

$sms = new SMS(); $result = $sms->sendMsg($mobile); if ($result['result'] == "0") { $array['status'] = 0; $array['comment'] = '发送成功...'; $array['data'] = $result; }else { $array['status'] = 1; $array['comment'] = '发送失败...'; } SMS.class.php cl

前端学习——ionic/AngularJs——获取验证码倒计时按钮

 按钮功能为:点击"获取验证码"--按钮不可用-设置倒计时-60秒后重新获取. 代码借鉴于:http://plnkr.co/edit/Swj82MpJSix3a47jZRHP?p=preview 主要实现原理:点击后,设置一个$interval,每一秒更改一次剩余时间,并依赖Angular数据绑定实时显示在页面中.设置一个$timeout,60秒后将按钮初始化到可用状态. 实现代码: (1)js代码,设置成一个directive以便多次调用. angular.module('winwi

获取验证码倒计时优化 页面刷新实时倒计时

现在很多页面是需要获取验证码的,但是相信很多页面是没有做这样的优化的,比如下面这个场景: 现在访问一个注册页面,页面有一个填写手机号,获取验证码的按钮,点击获取验证码按钮之后,按钮变成灰色,然后是60倒计时效果.在60S内我无法再次点击获取验证码按钮.因为按钮是灰色的,不可点击状态. 但是,如果在倒计时任然进行时我刷新一下页面,一般的页面就会全部刷新,包括倒计时效果也没有了,按钮恢复到这最初可点击状态,这其实是不符合逻辑的.按正常逻辑是,页面任然倒计时,如果我刷新页面,倒计时任然存在,并且按钮不

js点击按钮获取验证码倒计时

//发送验证码倒计时 var clock = ''; var nums = 60; var btn; $("#btnGetVerCode").click(function () { var flag = true; var phoneNum = $("#txtPhoneNum").val(); if (phoneNum.length == 11 && /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(14[0-9

clips 前端 js 倒计时 获取验证码的按钮

1 <a href="javascript:void(0);" onclick="get_captcha()" class="btn btn-default btn6" id="for_captcha" >获取验证码</a> 2 3 <script type="text/javascript"> 4 5 var url="/get-verify-code?pho