Java教程

JavaScript发送验证码按钮,一分钟内不能重复发送,前端计时器

本文主要是介绍JavaScript发送验证码按钮,一分钟内不能重复发送,前端计时器,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
昨天遇到了验证码发送,发出来给新人借鉴一下,觉得有用的话点个赞哦

首先body中给按钮加一个id方便取用
<input type="button" value="发送验证码" onclick="getCode()">

js中:

//设置一个发送验证码的冷却时间
    let cd = 0;
    //用来保存当前计时器编号
    let timerId = 0;
    //发送验证码的按钮
    let bt = $("[value='发送验证码']");
    //保存css设定的颜色
    let bgColor = bt.css("background-color")
    // alert(bgColor)

    function getCode() {
        if(cd===0) {

            //cd为0,向服务器发一送请求(已省略!!!)

            //然后将cd改为60(一分钟内不能再次发送)
            cd = 60
            //设置一个计时器,每1000毫秒执行一次设置冷却时间的函数
            timerId = setInterval(setTime, 1000)
            //设置计时器后弹出一下它的编号(不必要)
            // alert(timerId)
            //修改按钮背景色
            bt.css("background-color","#ccc")
        }else{
            alert("请在"+cd+"秒后重试")
        }
    }

    function setTime() {
        //冷却时间未结束
        if(cd>0){
            //冷却时间减一秒
            cd --
            //将按钮的文字修改(在后面附带剩余冷却时间秒数)
            bt.val("发送验证码("+cd+")")
        }else{
            //冷却时间为0,清除当前计时器
            clearTimeout(timerId)
            //恢复按钮显示文字
            bt.val("发送验证码")
            //恢复按钮背景色
            bt.css("background-color",bgColor)
        }
    }

这篇关于JavaScript发送验证码按钮,一分钟内不能重复发送,前端计时器的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!