原生 JS 實現手機驗證碼倒計時
阿新 • • 發佈：2018-11-01
可以使用 pointer-events 來阻止元素成為滑鼠事件的 target。html5 新增操作元素 class 類名的方式 classList。
classList 方法
- add(value)：在元素中新增一個或多個類名。如果值已經存在，就不添加了。
- contains(value): 返回布林值，判斷指定的類名是否存在。
- remove(value)：移除元素屬性列表中一個或多個類名。注意： 移除不存在的類名，不會報錯。
- toggle(value)：在元素中切換類名。如果列表中已經存在給定的值，刪除它；如果列表中沒有給定的值，新增它
原生 JS 實現手機驗證碼倒計時
單擊“傳送驗證碼”後，需等待 10 秒才能再次單擊“重發獲取”，在此期間，可以使用 pointer-events 來阻止元素成為滑鼠事件的目標。原始碼參考如下。
<!DOCTYPE html> <html> <head> <title> 手機驗證碼 </title> <meta charset="utf-8" /> </head> <style> a{ color:red; } .disable{ pointer-events:none; color:#666; } </style> <body> <p> <input type="text" placeholder="請輸入手機號"> </p> <p> <input type="text" placeholder="驗證碼"> <a href="javascript:;" id="btn">傳送驗證碼</a> </p> <script type="text/javascript"> var oBtn = document.getElementById('btn'); var flag = true; oBtn.addEventListener("click", function () { var time = 10; oBtn.classList.add('disable'); oBtn.innerText = '已傳送'; if (flag) { flag = false; var timer = setInterval(() => { time--; oBtn.innerText = time + ' 秒'; if (time === 0) { clearInterval(timer); oBtn.innerText = '重新獲取'; oBtn.classList.remove('disable'); flag = true; } }, 1000) } }); </script> </body> </html>