滑動驗證是一種常見的防止機器人惡意注冊或登錄的措施。如何判斷用戶是否通過了滑動驗證呢?一種常見的方法是通過CSS獲取驗證滑塊的位置信息。
// 獲取滑塊的位置信息 var slider = document.querySelector('.slider'); var rect = slider.getBoundingClientRect(); var sliderLeft = rect.left; var sliderWidth = rect.width; // 獲取滑塊移動的位置信息 var dragBtn = document.querySelector('.drag-btn'); var offsetLeft = dragBtn.offsetLeft; var dragWidth = dragBtn.width; // 判斷是否通過驗證 if (offsetLeft - sliderLeft >= sliderWidth - dragWidth) { // 通過驗證 } else { // 未通過驗證 }
可以看到,通過獲取滑塊和拖動按鈕的位置信息,我們可以計算出拖動按鈕是否越過了滑塊的末尾位置,從而判斷用戶是否通過了滑動驗證。需要注意的是,CSS樣式可能會影響位置信息的獲取,所以計算位置時需要仔細檢查CSS樣式。