微信小程序?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)擊效果:如下圖
話不多說,直接上代碼
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({ ? /** ? ?* 頁面的初始數(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)聽頁面加載 ? ?*/ ? 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)聽用戶下拉動(dòng)作 ? ?*/ ? onPullDownRefresh: function () { ? }, ? /** ? ?* 頁面上拉觸底事件的處理函數(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-10JS表格組件神器bootstrap table詳解(基礎(chǔ)版)
這篇文章主要介紹了JS表格組件神器bootstrap table,bootstrap table界面采用扁平化的風(fēng)格,用戶體驗(yàn)比較好,更好兼容各種客戶端,需要了解更多bootstrap table的朋友可以參考下2015-12-12js實(shí)現(xiàn)5秒倒計(jì)時(shí)重新發(fā)送短信功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)5秒倒計(jì)時(shí)重新發(fā)送短信功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02微信小程序 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