实现倒计时效果获取验证码

    <form id="form1" runat="server">
       <div class="input">
           <input type="button" id="btn" class="btn_mfyzm" value="免费获取验证码" />
           <script type="text/javascript">
               var wait = 60;
               document.getElementById("btn").disabled = false;
               function time(o) {
                   if (wait == 0) {
                       o.removeAttribute("disabled");
                       //$(o).attr("disabled", false);  jquery
                       o.value = "免费获取验证码";
                       wait = 60;
                   } else {
                       o.setAttribute("disabled", true);
                       o.value = wait + "秒后,重新获取验证码";
                       wait--;
                       setTimeout(function () {
                           time(o)
                       },
               1000)
                   }
               }
               document.getElementById("btn").onclick =
          function () {
              time(this);
          }
           </script>
       </div>
       </form>

  

时间: 2024-10-11 21:21:48

实现倒计时效果获取验证码的相关文章

Andorid实现点击获取验证码倒计时效果

这篇文章主要介绍了Andorid实现点击获取验证码倒计时效果,这种效果大家经常遇到,想知道如何实现的,请阅读本文 我们在开发中经常用到倒计时的功能,比如发送验证码后,倒计时60s再进行验证码的获取,为了方便以后使用,这里做个记录,讲讲倒计时器的实现. 1.先进行倒计时工具类的封装 1 public class CountDownTimerUtils extends CountDownTimer { 2 private TextView mTextView; 3 4 /** 5 * @param

js/jq实现获取手机验证码倒计时效果

众所周知在前段的工作中注册信息或获取当前手机号信息等需求,我们基本上都要涉及到手机号验证码,在网络上搜索的案例杂乱无章,用的时候全是坑,真心不想用了,然后自己写了一个获取手机验证码的倒计时效果.有需求的伙伴们可以看看怎么实现的. 如何获取手机验证码? 小月不知道大家是利用什么平台去获取验证码的,但是告诉大家我是在哪个平台获取的. LeanCloud :https://leancloud.cn/ 文档:https://leancloud.cn/docs/sms_guide-js.html 在这个平

安卓发送验证码倒计时效果和自动获取验证码并填充到输入框

在注册,实名认证.修改手机号码的,我们都会用发送验证码的功能,在这里经常就会涉及到2个效果, 第一个:发送验证码倒计时效果: 第二个:自动获取接收到的短信,并且填充验证码. 先来说倒计时效果: 其实很简单,就是一个计时器.每秒刷新一次,倒计时完了.就可以重新点击获取了. <pre name="code" class="java">btn_getYzm.setEnabled(false); btn_getYzm.setBackgroundResource(

微信小程序【获取验证码】倒计时效果

最近开始接触微信小程序,会记录一些相关的小功能--例如这次是点击[获取验证码]按钮出现的倒计时效果. 原文: http://blog.csdn.net/Wu_shuxuan/article/details/78539075  感谢 .wxml <button class="buttonget" disabled='{{disabled}}' data-id="2" bindtap="getVerificationCode"> {{ti

js实现60s倒计时效果用于获取短信验证码使用

有时候我们需要通过点击按钮向用户发送短信,需要一个计时效果. <button id="msg" type="button" style="width:120px; height:30px" >获取短信验证</button> <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <

js实现免费获取手机验证码倒计时效果

<div class="input"> <input type="button" id="btn" class="btn_mfyzm" value="免费获取验证码" /> <script type="text/javascript"> var wait=5; document.getElementById("btn").disab

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

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

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

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

jQuery实现的手机发送验证码倒计时效果代码分享

这是一款基于jquery实现的手机发送验证码倒计时效果代码,可实现实时显示秒数倒计时的功能,还可实现对手机号码格式验证的功能,是一款常用的网站注册发送手机验证码特效代码. 效果描述:注册一个网站,当需要发送验证码到手机上的时候,我们经常碰到这样的效果:首先检测手机是否符合1开头,11位数字的格式:若不符合,则提示错误信息并返回false:否则提交给后台,后台确定接收后返回一个值,发送按钮变为灰色并倒计时. 运行效果: 年利率高达14.4% 上海投融理财,20万起投,年化收益14.4% 房产抵押,