欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

小程序?qū)崿F(xiàn)簡(jiǎn)單驗(yàn)證碼倒計(jì)時(shí)

 更新時(shí)間：2022年07月28日 08:39:07   作者：久伍伍  
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)簡(jiǎn)單驗(yàn)證碼倒計(jì)時(shí)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本篇文章主要講關(guān)于小程序驗(yàn)證碼倒計(jì)時(shí)的功能實(shí)現(xiàn)，供大家參考，具體內(nèi)容如下

首先是wxml部分

<form bindsubmit="regist">
? ? <view class="vip-title">驗(yàn)證碼</view>
? ? ? <input type="text" name="verifyCode" placeholder="驗(yàn)證碼" value="{{verifyCode}}" style="width:310rpx" />
? ? ? <button class="captcha" bindtap="captcha" disabled="{{captchaDisabled}}" plain="true" disabled-class="disabled">{{captchaLabel}}</button>
? ? </view>
?</form>

樣式部分：

/*提交按鈕*/
form button {
? ? margin: 30rpx;
? ? background: #09f;
? ? color: white;
}

/*文本框容器*/
.input-container {
? ? margin: 40rpx 60rpx;
? ? display: flex;
? ? flex-direction: row;
? ? justify-content: space-between;
? ? align-items: center;
? ? border-bottom: 1px solid #ddd;
? ? padding-bottom: 6rpx;
}

/*文本框本身*/
.input-container input {
? ? color: #999;
? ? flex: 1;
? ? height: 40px;

}

/*占位符樣式*/
.input-placeholder {
? ? color: #999;
}

/*清空按鈕*/
.input-container image {
? ? width: 22px;
? ? height: 22px;
}

.forgot {
? ? margin: 0 30rpx 40rpx 30rpx;
? ? text-align: right;
? ? font-size: 28rpx;
? ? color: #ccc;
}
.captcha {
? ? margin: 0 8rpx;
? ? color: #fff;
? ? fon-size: 25rpx;
? p t-a
.button[plain] {
? ? color: #09f;

JS部分：

var timer = require('../../utils/timer.js');
Page({
? ? data: {
? ? ? ? verifyCode: '', //6617
? ? ? ? captchaLabel: '獲取驗(yàn)證碼',
? ? ? ? seconds: timer.length,
? ? ? ? captchaDisabled: false
? ? },
? ? onLoad: function() {

? ? },
? ? captcha: function(e) {
? ? ? ? var param = {
? ? ? ? ? ? phone: this.data.phone
? ? ? ? };
? ? ? ? // 禁用按鈕點(diǎn)擊
? ? ? ? this.setData({
? ? ? ? ? ? captchaDisabled: true
? ? ? ? });
? ? ? ? // 立刻顯示重發(fā)提示，不必等待倒計(jì)時(shí)啟動(dòng)
? ? ? ? this.setData({
? ? ? ? ? ? captchaLabel: timer.length + '秒后重新發(fā)送'
? ? ? ? });
? ? ? ? // 啟動(dòng)以1s為步長(zhǎng)的倒計(jì)時(shí)
? ? ? ? var interval = setInterval(() => {
? ? ? ? ? ? timer.countdown(this);
? ? ? ? }, 1000);
? ? ? ? // 停止倒計(jì)時(shí)
? ? ? ? setTimeout(function() {
? ? ? ? ? ? clearInterval(interval);
? ? ? ? }, timer.length * 1000);

? ? ? ? if (this.data.seconds == timer.length) {
? ? ? ? ? ? console.log('post');
? ? ? ? ? ? wx.showToast({
? ? ? ? ? ? ? ? title: '發(fā)送成功'
? ? ? ? ? ? });
? ? ? ? }
? ? },

})

timer.js :

var length = 5;

function countdown(that) {
? ? console.log('count down');
? ? var seconds = that.data.seconds;
? ? console.log(seconds);
? ? var captchaLabel = that.data.captchaLabel;
? ? if (seconds <= 1) {
? ? ? ? captchaLabel = '獲取驗(yàn)證碼';
? ? ? ? seconds = length;
? ? ? ? that.setData({
? ? ? ? ? ? captchaDisabled: false
? ? ? ? });
? ? } else {
? ? ? ? captchaLabel = --seconds + '秒后重新發(fā)送'
? ? }
? ? that.setData({
? ? ? ? seconds: seconds,
? ? ? ? captchaLabel: captchaLabel
? ? });
}

module.exports = {
? ? countdown: countdown,
? ? length: length
}

以上就是獲取驗(yàn)證碼功能的實(shí)現(xiàn)。

希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • JS實(shí)現(xiàn)的視頻彈幕效果示例

    JS實(shí)現(xiàn)的視頻彈幕效果示例

    這篇文章主要介紹了JS實(shí)現(xiàn)的視頻彈幕效果,涉及javascript基于事件響應(yīng)的頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
    2018-08-08
  • js里的prototype使用示例

    js里的prototype使用示例

    Object對(duì)象是common的原型，Object對(duì)象的屬性和方法復(fù)制到了common上
    2010-11-11
  • TypeScript實(shí)現(xiàn)數(shù)組和樹的相互轉(zhuǎn)換

    TypeScript實(shí)現(xiàn)數(shù)組和樹的相互轉(zhuǎn)換

    樹或者圖是個(gè)比較抽象的概念，并不存在這樣的數(shù)據(jù)類型。數(shù)組就比較簡(jiǎn)單了，因此數(shù)組和樹的轉(zhuǎn)換可以理解為數(shù)組和對(duì)象之間的轉(zhuǎn)換。本文將用TypeScript實(shí)現(xiàn)數(shù)組和樹的相互轉(zhuǎn)換，感興趣的可以了解一下
    2022-06-06
  • JS實(shí)現(xiàn)數(shù)組扁平化的方法總結(jié)

    JS實(shí)現(xiàn)數(shù)組扁平化的方法總結(jié)

    數(shù)組扁平化相信不少朋友在一些面試中被問到過,這在我們?nèi)粘＞幊讨幸彩且粋€(gè)常規(guī)操作,它需要我們將一個(gè)多維數(shù)組轉(zhuǎn)化成一個(gè)一維數(shù)組,所以,借著這篇文章,我們今天就一起來匯總一下幾種數(shù)組扁平化的方式,需要的朋友可以參考下
    2024-02-02
  • 用 js 寫一個(gè) js 解釋器過程詳解

    用 js 寫一個(gè) js 解釋器過程詳解

    這篇文章主要介紹了用 js 寫一個(gè) js 解釋器過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2019-08-08
  • 原生JS實(shí)現(xiàn)登錄框郵箱提示

    原生JS實(shí)現(xiàn)登錄框郵箱提示

    這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)登錄框郵箱提示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2021-10-10
  • 教你如何通過JavaScript讀取元素的樣式

    教你如何通過JavaScript讀取元素的樣式

    這篇文章主要給大家介紹了關(guān)于如何通過JavaScript讀取元素的樣式,文中通過實(shí)例代碼以及圖文介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2022-01-01
  • 原生js獲取iframe中dom元素--父子頁(yè)面相互獲取對(duì)方dom元素的方法

    原生js獲取iframe中dom元素--父子頁(yè)面相互獲取對(duì)方dom元素的方法

    下面小編就為大家?guī)硪黄鷍s獲取iframe中dom元素--父子頁(yè)面相互獲取對(duì)方dom元素的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-08-08
  • 分享JS表單驗(yàn)證源碼（帶錯(cuò)誤提示及密碼等級(jí)）

    分享JS表單驗(yàn)證源碼（帶錯(cuò)誤提示及密碼等級(jí)）

    這篇文章主要介紹了JS表單驗(yàn)證源碼（帶錯(cuò)誤提示及密碼等級(jí)）,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2020-01-01
  • JavaScript 實(shí)現(xiàn)打印,打印預(yù)覽,打印設(shè)置

    JavaScript 實(shí)現(xiàn)打印,打印預(yù)覽,打印設(shè)置

    這篇文章主要介紹了JavaScript 實(shí)現(xiàn)打印,打印預(yù)覽,打印設(shè)置的方法及示例分享,需要的朋友可以參考下
    2014-12-12

最新評(píng)論