微信小程序?qū)崿F(xiàn)短信驗(yàn)證碼倒計(jì)時(shí)
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)短信驗(yàn)證碼倒計(jì)時(shí)的具體代碼,供大家參考,具體內(nèi)容如下
初始效果

當(dāng)點(diǎn)擊按鈕時(shí)候設(shè)置禁止點(diǎn)擊效果:如下圖

話不多說(shuō),直接上代碼
1.wxml部分
<view>
? ? <block wx:if="{{Num==60 || Num==-1}}">
? ? ? <button bindtap="countDown">獲取驗(yàn)證碼</button>
? ? </block>
? ? <block wx:else>
? ? ? <button disabled='{{isDisabled}}'>{{Num}}s后重新發(fā)送</button>
? ? </block>
</view>2.js部分
// pages/push1/push1.js
Page({
? /**
? ?* 頁(yè)面的初始數(shù)據(jù)
? ?*/
? data: {
? ? timer: "",
? ? Num: '60',?
? ? isDisabled:false
? },
?/**
? ?* 驗(yàn)證碼倒計(jì)時(shí)
? ?*/
? 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)聽頁(yè)面加載
? ?*/
? onLoad: function (options) {
? },
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁(yè)面初次渲染完成
? ?*/
? onReady: function () {
? },
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁(yè)面顯示
? ?*/
? onShow: function () {
? },
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁(yè)面隱藏
? ?*/
? onHide: function () {
? },
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁(yè)面卸載
? ?*/
? onUnload: function () {
? },
? /**
? ?* 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
? ?*/
? onPullDownRefresh: function () {
? },
? /**
? ?* 頁(yè)面上拉觸底事件的處理函數(shù)
? ?*/
? onReachBottom: function () {
? },
? /**
? ?* 用戶點(diǎn)擊右上角分享
? ?*/
? onShareAppMessage: function () {
? }
})以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
簡(jiǎn)易版本JSON.stringify的實(shí)現(xiàn)及其六大特性詳解
最近做項(xiàng)目發(fā)現(xiàn)JSON.stringify()使用場(chǎng)景真的挺多,我們都知道JSON.stringify()的作用是將JavaScript對(duì)象轉(zhuǎn)換為JSON字符串,下面這篇文章主要給大家介紹了JSON.stringify的實(shí)現(xiàn)及其六大特性的相關(guān)資料,需要的朋友可以參考下2021-10-10
JS表格組件神器bootstrap table詳解(基礎(chǔ)版)
這篇文章主要介紹了JS表格組件神器bootstrap table,bootstrap table界面采用扁平化的風(fēng)格,用戶體驗(yàn)比較好,更好兼容各種客戶端,需要了解更多bootstrap table的朋友可以參考下2015-12-12
js實(shí)現(xiàn)5秒倒計(jì)時(shí)重新發(fā)送短信功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)5秒倒計(jì)時(shí)重新發(fā)送短信功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02
在html頁(yè)面上拖放移動(dòng)標(biāo)簽
在html頁(yè)面上拖放移動(dòng)標(biāo)簽,需要的朋友可以參考下。2010-01-01
微信小程序 JS動(dòng)態(tài)修改樣式的實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序 JS動(dòng)態(tài)修改樣式的實(shí)現(xiàn)代碼,原理是綁定數(shù)據(jù),然后動(dòng)態(tài)的修改數(shù)據(jù),從而實(shí)現(xiàn)動(dòng)態(tài)樣式的改變而已,需要的朋友可以參考下2017-02-02
使用JavaScript動(dòng)態(tài)設(shè)置樣式實(shí)現(xiàn)代碼及演示動(dòng)畫
使用onmouseover和onmouseout事件實(shí)現(xiàn)不同的效果而且是使用js動(dòng)態(tài)實(shí)現(xiàn),本文有利于鞏固你js與css方面的知識(shí),感興趣的你可以了解下哦,希望本文對(duì)你有所幫助2013-01-01

