【移動(dòng)應(yīng)用開發(fā)技術(shù)】微信小程序使用JS實(shí)現(xiàn)注冊(cè)60s倒計(jì)時(shí)功能的示例

【移動(dòng)應(yīng)用開發(fā)技術(shù)】微信小程序使用JS實(shí)現(xiàn)注冊(cè)60s倒計(jì)時(shí)功能的示例

這篇文章主要介紹了微信小程序使用JS實(shí)現(xiàn)注冊(cè)60s倒計(jì)時(shí)功能的示例，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓在下帶著大家一起了解一下。微信小程序+WEB使用JS實(shí)現(xiàn)注冊(cè)【60s】倒計(jì)時(shí)功能開發(fā)步驟：1、效果圖：2、頁(yè)面僅僅利用了JS的相關(guān)功能，包含：wxml、js、wxss2.1wxml頁(yè)面代碼：<text>綁定手機(jī)</text>

<form

bindsubmit="bindMobile">

<view

class="form_group">

<text>手

機(jī)：</text>

<input

type="number"

placeholder="請(qǐng)輸入手機(jī)號(hào)"

maxlength="11"

name="data_phone"

value=""

auto-focus="true"

bindblur="blur_mobile"

/>

<button

type="button"

class="{{is_show?'show':'hide'}}"

bindtap="clickVerify">獲取驗(yàn)證碼</button>

<button

type="button"

class="{{is_show?'hide':'show'}}">重新發(fā)送{{last_time}}秒</button>

</view>

<input

type="number"

placeholder="請(qǐng)輸入驗(yàn)證碼"

maxlength="6"

name="data_verify"

value=""/>

<button

class="save_btn"

form-type="submit">確認(rèn)綁定</button>

</form>2.2js頁(yè)面代碼：var

countdown

=

60;

var

settime

=

function

(that)

{

if

(countdown

==

0)

{

that.setData({

is_show:

true

})

countdown

=

60;

return;

}

else

{

that.setData({

is_show:false,

last_time:countdown

})

countdown--;

}

setTimeout(function

()

{

settime(that)

}

,

1000)

}

Page({

/**

*

頁(yè)面的初始數(shù)據(jù)

*/

data:

{

last_time:'',

is_show:true

},

clickVerify:function(){

var

that

=

this;

//

將獲取驗(yàn)證碼按鈕隱藏60s，60s后再次顯示

that.setData({

is_show:

(!that.data.is_show)

//false

})

settime(that);

}

})2.3wxss頁(yè)面代碼：/*

發(fā)送驗(yàn)證碼按鈕隱藏，并展示倒數(shù)60s提示

*/

.hide{

display:

none;

}

.show{

display:

block;

}3、上面講的是微信小程序的，那么我們一般web端或者移動(dòng)端的應(yīng)該是什么樣呢？其實(shí)，方法都差不多，這里也貼出來僅供大家參考<!--

這段代碼(html)是從腳本之家挪過來的，信譽(yù)度應(yīng)該是很高的，大家可以放心使用

-->

<script

src="/jquery/1.10.2/jquery.min.js"></script>

<script

type="text/javascript">

var

countdown=60;

function

settime(obj)

{

if

(countdown

==

0)

{

obj.removeAttribute("disabled");

obj.value="免費(fèi)獲取驗(yàn)證碼";

countdown

=

60;

return;

}

else

{

obj.setAttribute("disabled",

true);

obj.value="重新發(fā)送("

+

countdown

+

")";

countdown--;

}

setTimeout(function()

{

settime(obj)

}

,1000)

}

</scrip