验证码倒计时

  实际开发中,验证码的验证,现在各大网站都是必须的,什么手机验证码验证,邮箱验证等。今天遇到一个例子,特地记录一下。

模拟HTML结构,实际要复杂的多。

  HTML结构很简单,就是两个按钮,有不同的id,如下:

<button id="btn">手机验证码</button>
<button id="btn2">邮箱验证码</button>

  为了简化dom操作,我们引入jQuery,js 代码如下:

function settime(val,verify_type,setTimeNumber) {
    if (setTimeNumber== 0) {
        val.removeAttribute("disabled");
        val.innerHTML = verify_type;
        setTimeNumber= 10;
    } else {
        val.setAttribute("disabled", true);
        val.innerHTML = "重新发送(" + setTimeNumber + ")";
        setTimeNumber--;
         setTimeout(function() {
            settime(val,verify_type,setTimeNumber);
        },1000);
    }
}

$("#btn").click(function(){
    settime(this,"手机验证码",10);
})
$("#btn2").click(function(){
    settime(this,"邮箱验证码",20);
})

  这里对函数稍稍的封装了一下,因为我们想在实际的开发中,只要是验证码的业务,都用一套Js,所以,封装少不了,当然我这里是简单的,有更好的封装方法,可以评论留言,我们相互学习。我把验证的类型和验证的时间分开写,作为参数传入,目的就是在调用的时候,对不同的对象采用同一种方法,只要传入不同的参数就可以实现,这就是js中的封装和多态的思想。

  代码中,用了if的判断,只要 setTimeNumber 的值是0,那么就是倒计时结束,我们就让这个按钮可以点击了,移出“disabled”的属性。val.removeAttribute("disabled");

如果不是为0的值,(当然,在传入的时候,必须是正整数,不过我们也可以在函数里判断,如果传入的参数不是正整数,就return 等处理。),我们就让这个值减一,调用定时器来处理,让定时器,调用这个函数,知道setTimeNumber为0,同时在倒计时的时候,按钮是不可点击的,因此,给它要添加disabled的属性。

每日一句:Today is a long time away from the chaotic 1970s, but Wolverine seems no less relevant in the age of President Trump. As Alex Godfrey of Empire magazine wrote: “Wolverine was created in a dark, uncertain time of political upheaval. We don’t want him going anywhere.

翻译:今天离混乱的上世纪70年代已经很远了,但金刚狼似乎仍和特朗普的总统时代息息相关。正如《帝国》杂志的亚历克斯·戈弗雷所写的那样:“金刚狼创造于一个黑暗、动荡的政治巨变年代。我们不想让他远离。”

时间: 2024-10-23 22:30:08

验证码倒计时的相关文章

js 发送验证码倒计时

<input  type="text"   name=''  id="btn"> //发送验证码倒计时var wait=30; function time(o) { if (wait == 0) { o.removeAttribute("disabled"); o.value="免费获取验证码"; wait = 30; }else{ o.setAttribute("disabled", true

Android开发:验证码倒计时功能实现

前言 现在好多个APP里面都有验证码倒计时按钮,实现方式大概有下面几种: 1.使用线程和Handler的方式,定时刷新倒计时数字,这种方式容易导致内存泄露,所以一般都使用弱引用,控制数字的刷新. 2.自定义倒计时按钮 3.使用Android提供的CountDownTimer结合TextView实现倒计时功能 这篇主要就是说下用第三种方式实现,简单好用 效果图 实现 以下是核心代码: /** * Created by hfs on 2017/5/9. */ public class TimeCou

react native中的聊天气泡以及timer封装成的发送验证码倒计时

今天看来情书写的文章,研究了一下大佬写的文章,自己做一点总结. 其实,今天我想把我近期遇到的坑都总结一下:1.goBack的跨页面跳转,又两种方法,一可以像兔哥那样修改navigation源码,二可以用navigationActions     2.父子组件的传值,一可以用callBack  二可以用pubsub发布订阅模式 三可以用manager事件监听(a页面要显示的内容 有两种形式,一是从manager主动接收,也就是说不需要点击什么的获取数据,而是时时监听manager里数据的变化,第二

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

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

js验证码倒计时

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>验证码的倒计时</title> <style type="text/css"> *{ margin: 0; padding: 0} #btn{ background: #fff; border-radius: 20%; tex

60秒验证码倒计时js代码 js样式代码 方块上下左右随机移动(定时器) js中获取元素的方法 js中表单提交

60秒验证码倒计时js代码 <script type="text/javascript"> var countdown=60; function settime(val) { if (countdown == 0) { //removeAttribute() 方法删除指定的属性. disabled属性规定应该禁用 input 元素. val.removeAttribute("disabled"); val.value="免费获取验证码"

iOS 短信验证码倒计时按钮的实现

验证码倒计时按钮的应用是非常普遍的,本文介绍了IOS实现验证码倒计时功能,点击获取验证码,进入时间倒计时,感兴趣的小伙伴们可以参考一下: 实现思路: 创建按钮,添加点击方法: 用NSTimer定时器,每秒执行一次,定时改变Button的title,改变Button的样式,设置Button不可点击: 若倒计时结束,定时器关闭,并改变Button的样式,可以点击: 代码如下: 在按钮的点击事件里调用该方法      -(void)openCountdown{ __block NSInteger ti

【Android】验证码倒计时(Service完成,页面切换不中断)

[Android]验证码倒计时(Service完成,页面切换不中断) Service+CountDownTimer+Handler完成倒计时功能,页面切换不中断. 下载地址:http://www.devstore.cn/code/info/598.html

短信验证码倒计时

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="yan.aspx.cs" Inherits="Technology.yan" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"><head runat="server&

安卓验证码倒计时实现

安卓为验证码倒计时提供了一个很方便的类android.os.CountDownTimer 其使用方法: new CountDownTimer(30000, 1000) { public void onTick(long millisUntilFinished) { mTextField.setText("seconds remaining: " + millisUntilFinished / 1000); } public void onFinish() { mTextField.se