註冊協議閱讀倒數計時按鈕可用程式碼
大家可能見過這樣的效果,就是當註冊賬號的時候,需要同意指定的協議,並且為了讓使用者認真閱讀,採用了倒數計時策略,一般是倒計指定時間之後註冊按鈕才是可用的,下面就通過程式碼例項介紹一下如何實現此功能。
程式碼如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #btn { width:200px; height:50px; background -color:gary; } </style> <script type="text/javascript"> onload=function (){ var btn = document.getElementById('btn'); var intervalId = setInterval(function () { var waitSecond = parseInt((/\d+/).exec(btn.value)); waitSecond--; if (waitSecond >= 0) { btn.value=btn.value.replace(/\d+/, waitSecond) } else { btn.value = '同意'; btn.disabled = false; clearInterval(intervalId); } }, 1000); }; </script> </head> <body> <input type="button" value="請仔細閱讀5秒後點選同意繼續" id="btn" disabled="disabled"/> </body> </html>
以上程式碼實現了我們的要求,按鈕在五秒之後才是可用的,下面介紹一下它的實現過程。
一.程式碼註釋:
1.onload=function (){},當穩當內容完全載入完畢再去執行函式中的程式碼,這裡是省略了window。
2.var btn = document.getElementById('btn'),獲取按鈕物件。
3.var intervalId = setInterval(function () { },1000),每隔1000毫秒也就是1秒執行一次函式。
4.var waitSecond = parseInt((/\d+/).exec(btn.value)),用正規表示式提取按鈕value屬性值中的數字。
5.waitSecond--,秒數減一。
6.if (waitSecond >= 0) {btn.value=btn.value.replace(/\d+/, waitSecond) } ,如果秒數大於零的話,則將按鈕中的數字替換為減一後的數字,也就是繼續執行遞減操作。
7.else { btn.value = '同意';btn.disabled = false;clearInterval(intervalId);} ,否則將按鈕value值修改為"統一",並且將按鈕設定為可用,停止定時器函式的執行。
二.相關閱讀:
1.setInterval()函式可以參閱setInterval()一章節。
2.parseInt()函式可以參閱javascript parseInt()一章節。
3.exec()函式可以參閱正規表示式exec()函式一章節。
4.replace()函式可以參閱正規表示式replace()函式一章節。
5.disabled屬性可以參閱javascript button.disabled一章節。
6.clearInterval()函式可以參閱clearInterval()一章節。
相關文章
- 按鈕倒數計時可用效果例項程式碼
- 按鈕倒數計時指定秒數可用程式碼例項
- jQuery實現的按鈕可用倒數計時效果jQuery
- JavaScript簡訊重發按鈕可用倒數計時JavaScript
- javascript強制閱讀註冊協議指定時間程式碼例項JavaScript協議
- ReactiveCocoa 實現 按鈕倒數計時React
- js按鈕點選後需要倒數計時才能可能用程式碼例項JS
- Js Jquery 實現的按鈕倒數計時整理JSjQuery
- 傳送簡訊驗證,後按鈕倒數計時,防止重新整理倒數計時失效
- 【JavaScript】使用js實現傳送郵箱驗證碼,按鈕倒數計時JavaScriptJS
- 面向Vue新人:寫一個簡單的倒數計時按鈕Vue
- 登陸註冊按鈕的樣式設計
- 安卓開發之封裝顯示倒數計時按鈕控制元件安卓封裝控制元件
- dubbo註冊協議(三)協議
- JavaScript 倒數計時60秒程式碼JavaScript
- JavaScript倒數計時程式碼例項JavaScript
- setTimeout倒數計時效果程式碼
- 小程式 - 驗證碼倒數計時元件元件
- jQuery倒數計時效果程式碼例項jQuery
- JavaScript春節倒數計時程式碼例項JavaScript
- runtime 註冊類,協議協議
- 線上直播系統原始碼,開屏首頁廣告點選跳過按鈕跳過倒數計時原始碼
- 小程式倒數計時深究
- JavaScript倒數計時60秒程式碼詳解JavaScript
- 看雪學院《註冊協議》協議
- 商品搶購倒數計時效果程式碼例項
- 網頁倒數計時跳轉程式碼例項網頁
- JS簡單的倒數計時(程式碼優化)JS優化
- 直播小程式原始碼,vue實現時間倒數計時原始碼Vue
- [原始碼閱讀] 阿里SOFA服務註冊中心MetaServer(3)原始碼阿里Server
- 圖靈社群會員註冊協議圖靈協議
- 菜鳥學JS(四)——javascript為按鈕註冊回車事件(設定預設按鈕)JSJavaScript事件
- 手機直播原始碼,驗證碼自動讀秒倒數計時原始碼
- js倒數計時 實現傳送驗證碼倒數計時60sJS
- 數字按鈕分頁CSS樣式程式碼CSS
- js動態新增一個按鈕並且註冊事件處理函式程式碼例項JS事件函式
- 倒數計時指定時間頁面跳轉程式碼例項
- js為按鈕註冊點選事件處理函式JS事件函式