JS自動倒計時30秒后按鈕才可用(兩種場景)_javascript技巧
來源:懂視網
責編:小采
時間:2020-11-27 21:43:10
JS自動倒計時30秒后按鈕才可用(兩種場景)_javascript技巧
JS自動倒計時30秒后按鈕才可用(兩種場景)_javascript技巧:展示效果圖: WEB開發中經常會用到倒計時來限制用戶對表單的操作,比如希望用戶在一定時間內看完相關協議信息才允許用戶繼續下一步操作,又比如在收取手機驗證碼時允許用戶在一定時間過后(未收到驗證碼的情況下)再次獲取驗證碼。那么今天我來給大家介紹下
導讀JS自動倒計時30秒后按鈕才可用(兩種場景)_javascript技巧:展示效果圖: WEB開發中經常會用到倒計時來限制用戶對表單的操作,比如希望用戶在一定時間內看完相關協議信息才允許用戶繼續下一步操作,又比如在收取手機驗證碼時允許用戶在一定時間過后(未收到驗證碼的情況下)再次獲取驗證碼。那么今天我來給大家介紹下
展示效果圖:

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