微信小程序?qū)崿F(xiàn)短信驗證碼倒計時
更新時間：2022年05月24日 11:30:35 作者：別等風(fēng)
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)短信驗證碼倒計時，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序?qū)崿F(xiàn)短信驗證碼倒計時的具體代碼，供大家參考，具體內(nèi)容如下
初始效果
當(dāng)點擊按鈕時候設(shè)置禁止點擊效果：如下圖
話不多說，直接上代碼
1.wxml部分
<view>
? ? <block wx:if="{{Num==60 || Num==-1}}">
? ? ? <button bindtap="countDown">獲取驗證碼</button>
? ? </block>
? ? <block wx:else>
? ? ? <button disabled='{{isDisabled}}'>{{Num}}s后重新發(fā)送</button>
? ? </block>
</view>2.js部分
// pages/push1/push1.js
Page({
? /**
? ?* 頁面的初始數(shù)據(jù)
? ?*/
? data: {
? ? timer: "",
? ? Num: '60',?
? ? isDisabled:false
? },
?/**
? ?* 驗證碼倒計時
? ?*/
? countDown: function() {
? ? var that=this
? ? var Num=that.data.Num
? ? var isDisabled=this.data.isDisabled
? ? var timer=setInterval(function(){
? ? ? ? Num-=1;
? ? ? ? that.setData({
? ? ? ? ? Num:Num,
? ? ? ? ? isDisabled:true
? ? ? ? })
? ? ? ? if(Num<=-1){
? ? ? ? ? clearInterval(timer)
? ? ? ? ? that.setData({
? ? ? ? ? ? Num:60,
? ? ? ? ? ? isDisabled:false
? ? ? ? ? })
? ? ? ? }
? ? },100)
? },
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面加載
? ?*/
? onLoad: function (options) {
? },
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
? ?*/
? onReady: function () {
? },
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面顯示
? ?*/
? onShow: function () {
? },
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面隱藏
? ?*/
? onHide: function () {
? },
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面卸載
? ?*/
? onUnload: function () {
? },
? /**
? ?* 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
? ?*/
? onPullDownRefresh: function () {
? },
? /**
? ?* 頁面上拉觸底事件的處理函數(shù)
? ?*/
? onReachBottom: function () {
? },
? /**
? ?* 用戶點擊右上角分享
? ?*/
? onShareAppMessage: function () {
? }
})以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
柯里化（Currying）是把接受多個參數(shù)的函數(shù)變換成接受一個單一參數(shù)(最初函數(shù)的第一個參數(shù))的函數(shù)，并且返回接受余下的參數(shù)且返回結(jié)果的新函數(shù)的技術(shù)。本文將通過一些示例帶大家深入了解JS的函數(shù)柯里化，需要的可以參考一下2023-02-02
簡易版本JSON.stringify的實現(xiàn)及其六大特性詳解
最近做項目發(fā)現(xiàn)JSON.stringify()使用場景真的挺多,我們都知道JSON.stringify()的作用是將JavaScript對象轉(zhuǎn)換為JSON字符串,下面這篇文章主要給大家介紹了JSON.stringify的實現(xiàn)及其六大特性的相關(guān)資料,需要的朋友可以參考下2021-10-10
JS表格組件神器bootstrap table詳解（基礎(chǔ)版）
這篇文章主要介紹了JS表格組件神器bootstrap table，bootstrap table界面采用扁平化的風(fēng)格，用戶體驗比較好，更好兼容各種客戶端，需要了解更多bootstrap table的朋友可以參考下2015-12-12
這篇文章主要介紹了ES6教程之for循環(huán)和Map,Set用法,結(jié)合實例形式分析了ECMAScript6中for循環(huán)和Map,Set基本概念、功能、使用方法與相關(guān)注意事項,需要的朋友可以參考下2017-04-04
這篇文章主要為大家詳細介紹了js實現(xiàn)5秒倒計時重新發(fā)送短信功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
在html頁面上拖放移動標(biāo)簽，需要的朋友可以參考下。2010-01-01
微信小程序 JS動態(tài)修改樣式的實現(xiàn)代碼
這篇文章主要介紹了微信小程序 JS動態(tài)修改樣式的實現(xiàn)代碼,原理是綁定數(shù)據(jù)，然后動態(tài)的修改數(shù)據(jù)，從而實現(xiàn)動態(tài)樣式的改變而已,需要的朋友可以參考下2017-02-02
使用JavaScript動態(tài)設(shè)置樣式實現(xiàn)代碼及演示動畫
使用onmouseover和onmouseout事件實現(xiàn)不同的效果而且是使用js動態(tài)實現(xiàn)，本文有利于鞏固你js與css方面的知識，感興趣的你可以了解下哦，希望本文對你有所幫助2013-01-01
本文分享了一個小技巧：javascript解決IE6下hover問題的方法，方法很實用,需要了解的朋友可以參考下2015-07-07
Javascript (ECMA Script)是一種弱類型的語言。這并不意味著它沒有數(shù)據(jù)類型，只是變量或者Javascript對象屬性不需要一個特定類型的值分配給它或者它始終使用相同的值。2010-10-10