可以使用 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>