JS自動(dòng)倒計(jì)時(shí)30秒后按鈕才可用(兩種場(chǎng)景)_javascript技巧
來(lái)源:懂視網(wǎng)
責(zé)編:小采
時(shí)間:2020-11-27 21:43:10
JS自動(dòng)倒計(jì)時(shí)30秒后按鈕才可用(兩種場(chǎng)景)_javascript技巧
JS自動(dòng)倒計(jì)時(shí)30秒后按鈕才可用(兩種場(chǎng)景)_javascript技巧:展示效果圖: WEB開(kāi)發(fā)中經(jīng)常會(huì)用到倒計(jì)時(shí)來(lái)限制用戶對(duì)表單的操作,比如希望用戶在一定時(shí)間內(nèi)看完相關(guān)協(xié)議信息才允許用戶繼續(xù)下一步操作,又比如在收取手機(jī)驗(yàn)證碼時(shí)允許用戶在一定時(shí)間過(guò)后(未收到驗(yàn)證碼的情況下)再次獲取驗(yàn)證碼。那么今天我來(lái)給大家介紹下
導(dǎo)讀JS自動(dòng)倒計(jì)時(shí)30秒后按鈕才可用(兩種場(chǎng)景)_javascript技巧:展示效果圖: WEB開(kāi)發(fā)中經(jīng)常會(huì)用到倒計(jì)時(shí)來(lái)限制用戶對(duì)表單的操作,比如希望用戶在一定時(shí)間內(nèi)看完相關(guān)協(xié)議信息才允許用戶繼續(xù)下一步操作,又比如在收取手機(jī)驗(yàn)證碼時(shí)允許用戶在一定時(shí)間過(guò)后(未收到驗(yàn)證碼的情況下)再次獲取驗(yàn)證碼。那么今天我來(lái)給大家介紹下
展示效果圖:

WEB開(kāi)發(fā)中經(jīng)常會(huì)用到倒計(jì)時(shí)來(lái)限制用戶對(duì)表單的操作,比如希望用戶在一定時(shí)間內(nèi)看完相關(guān)協(xié)議信息才允許用戶繼續(xù)下一步操作,又比如在收取手機(jī)驗(yàn)證碼時(shí)允許用戶在一定時(shí)間過(guò)后(未收到驗(yàn)證碼的情況下)再次獲取驗(yàn)證碼。那么今天我來(lái)給大家介紹下如何使用Javascript來(lái)實(shí)現(xiàn)這一簡(jiǎn)單應(yīng)用。
查看演示 下載源碼
應(yīng)用場(chǎng)景1:用戶注冊(cè)時(shí)閱讀完相關(guān)協(xié)議信息后才能激活按鈕
某些網(wǎng)站注冊(cè)時(shí)要求用戶同意所謂的用戶協(xié)議之類的信息,如果協(xié)議內(nèi)容非常重要,有些網(wǎng)站會(huì)要求新注冊(cè)的用戶一定要閱讀完相關(guān)協(xié)議信息才能激活下一步按鈕提交表單。為了讓用戶能閱讀完協(xié)議信息(實(shí)際用戶有沒(méi)有真正閱讀咱不知道),開(kāi)發(fā)者會(huì)設(shè)計(jì)一個(gè)倒計(jì)時(shí)比如30秒,30秒過(guò)后,表單提交按鈕才會(huì)激活生效,下面來(lái)看具體如何實(shí)現(xiàn)。
假設(shè)有上面這樣一個(gè)表單,表單的其他部分我們省略,只有一個(gè)提交按鈕,初始時(shí)按鈕不可用,當(dāng)顯示30秒倒計(jì)時(shí)結(jié)束后,按鈕就會(huì)顯示“我同意”,并且可以點(diǎn)擊激活。
我們用原生的js來(lái)實(shí)現(xiàn)這一效果:
聲明:本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
JS自動(dòng)倒計(jì)時(shí)30秒后按鈕才可用(兩種場(chǎng)景)_javascript技巧
JS自動(dòng)倒計(jì)時(shí)30秒后按鈕才可用(兩種場(chǎng)景)_javascript技巧:展示效果圖: WEB開(kāi)發(fā)中經(jīng)常會(huì)用到倒計(jì)時(shí)來(lái)限制用戶對(duì)表單的操作,比如希望用戶在一定時(shí)間內(nèi)看完相關(guān)協(xié)議信息才允許用戶繼續(xù)下一步操作,又比如在收取手機(jī)驗(yàn)證碼時(shí)允許用戶在一定時(shí)間過(guò)后(未收到驗(yàn)證碼的情況下)再次獲取驗(yàn)證碼。那么今天我來(lái)給大家介紹下