效果如下：點擊發(fā)送驗證碼按鈕，按鈕背景變色，不可點擊，顯示倒計時文字
首先js文件的data里面 聲明一個變量用于表示當前是否可以點擊，codeIsCanClick = true, 默認是可以點擊的
寫下界面代碼：
wxml文件中
<view class='centerRow'> <view class='inputLabel'>動態(tài)碼:</view> <input class='inputStyle' style="flex:1 " bindinput="bindKeyInput" placeholder="短信動態(tài)碼" adjust-position='false' confirm-type='search'></input> <button class="emailCode" hidden='{{!codeIsCanClick}}' size="mini" bindtap='clickCode'>獲取動態(tài)碼</button> <button class="emailCodeSend" hidden='{{codeIsCanClick}}' size="mini">{{last_time}}秒后重新發(fā)送</button></view>對應樣式 wxss文件：
.centerRow{ display: flex; flex-direction: row; align-items: center; height: 44px; padding-left: 16px; padding-right: 16px; border-bottom: 1rpx solid #D9D9D9; border-top: 1rpx solid #D9D9D9;}.inputStyle{ border-radius:4px; color:#D9D9D9; outline:0; padding-left: 4px; margin-left: 4px; margin-right: 20rpx; font-size: 14px;}.inputLabel{ font-size: 16px; color: #33496D; width: 90px;}.emailCode{ width: 118px; height: 28px; align-items: center; justify-content: center; display: flex; flex-direction: row; color:white; font-size: 14px; background-color: #50A2EC; border-radius: 14px;}.emailCodeSend{ width: 118px; height: 28px; align-items: center; justify-content: center; display: flex; flex-direction: row; color:white; font-size: 14px; background-color: #B9DAF7; border-radius: 14px;}以上構成頁面靜態(tài)效果。
注意button有兩個，分別對應的未點擊和點擊下的按鈕樣子，用js中的CodeIsCanClick控制顯示隱藏
然后在js中寫邏輯代碼：
// 倒計時事件 單位svar countdown = 10;var settime = function (that) { if (countdown == 0) { that.setData({ codeIsCanClick: true }) countdown = 10; return; } else { that.setData({ codeIsCanClick: false, last_time: countdown }) countdown--; } setTimeout(function () { settime(that) }, 1000 )}Page({ /** * 頁面的初始數(shù)據 */ data: { codeIsCanClick: true }, /** * 點擊驗證碼按鈕 */ clickCode: function () { var that = this; settime(that) },總結
以上所述是小編給大家介紹的微信小程序項目實踐之驗證碼倒計時功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
