Vue中验证码计时器的制作

关键技术：
setInterval
clearInterval
ヽ(●-`Д´-)ノ
由于setInterval不能传递参数，导致不能直接通过参数来完成计时器。
我才用的方式为改变DOM，通过监听DOM状态来做判断。
具体方案代码如下：
HTML结构：

 <button class="yzm-btn2" @click="sendCode()"><span id="sendMsg3">{{findFont.sendMsg2}}</span><span
                                id="sendMsg4"></span></button>

code2: function () {
                if ($("#sendMsg2").css("display") == "none") {
                    $(".yzm-btn").css("background-color", "#3b4557")
                    let t = 120
                    var timer = setInterval(function () {
                        t--
                        if (t > 0) {
                            let ttext = '已发送（' + t + '秒）'
                            $("#sendMsg2").css("display", "block")
                            $("#sendMsg2").html(ttext)
                            $("#sendMsg1").css("display", "none")
                        } else {
                            $(".yzm-btn").css("background-color", "#268e65")
                            $("#sendMsg1").css("display", "block")
                            $("#sendMsg2").css("display", "none")
                            clearInterval(timer)
                        }
                    }, 1000);
//
                } else {
                }
            }

整体思路：
首先发送按钮文本为｛｛点击发送｝｝，
后面隐藏一个空的span标签：display：none
点击按钮，
检测发送文本与后面标签状态。
如果发送文本存在，则隐藏发送文本，开始进入setInterval，把隐藏的span标签显示出来
在里面对计数器累加判断，如果计数器时间归0，则恢复发送文本，并继续隐藏另一个span标签。
并清除setInterval
当发送文本为隐藏时，单击按钮不执行任何事件。

技术需要交流，大清亡与闭关锁国。 
欢迎转载。form 三思 QQ599901155

Vue中验证码计时器的制作

猜你喜欢