在進行網站注冊或登錄時，為了防止機器人或惡意攻擊，常常會需要使用驗證碼來進行驗證，并保證用戶的有效性。而其中最常見的驗證碼就是滑塊驗證。
HTML中可以使用JavaScript來實現滑塊驗證，下面是一段常見的HTML滑塊驗證代碼：
<!DOCTYPE html>
<html>
<head>
<title>滑塊驗證</title>
<style>
#validate-box {
width: 300px;
height: 150px;
background-color: #fff;
border: 1px solid #ccc;
margin: 200px auto;
position: relative;
}
#slider {
width: 60px;
height: 50%;
position: absolute;
top: 25%;
background-color: #007aff;
cursor: pointer;
}
#label {
position: absolute;
top: 20%;
left: 0;
right: 0;
margin: 0 auto;
text-align: center;
font-size: 16px;
}
#validate {
position: absolute;
top: 80%;
left: 0;
right: 0;
margin: 0 auto;
text-align: center;
font-size: 16px;
color: #666;
}
</style>
</head>
<body>
<div id="validate-box">
<div id="slider"></div>
<div id="label">請按住滑塊，拖動到最右邊</div>
<div id="validate"></div>
</div>
<script>
var slider = document.getElementById('slider');
var label = document.getElementById('label');
var validate = document.getElementById('validate');
var validateBox = document.getElementById('validate-box');
var sliderWidth = slider.offsetWidth;//滑塊的長度
var maxX = validateBox.offsetWidth - sliderWidth;//可移動的最大距離
var isMouseDown = false;
var originX, originY, disX, disY;
slider.onmousedown = function(e) {
e.preventDefault();
isMouseDown = true;
originX = e.clientX;
originY = e.clientY;
}
document.onmousemove = function(e) {
if (!isMouseDown) {
return;
}
disX = e.clientX - originX;//計算鼠標移動的距離
var left = parseInt(slider.style.left || 0);//計算滑塊移動的距離
var moveX = left + disX;//計算滑塊移動后的距離
moveX = Math.max(0, Math.min(maxX, moveX));//保證滑塊不能超出驗證框的范圍
slider.style.left = moveX + 'px';//設置滑塊的位置
validate.style.width = moveX + 'px';//設置驗證框的寬度
if (moveX >= maxX) {
slider.onmousedown = null;//解綁mousedown事件
label.innerHTML = '驗證通過！';//顯示驗證通過信息
validate.style.backgroundColor = '#4cd964';//設置驗證框的背景色
}
}
document.onmouseup = function() {
isMouseDown = false;
if (parseInt(slider.style.left || 0)< maxX) {//如果滑塊未到達最右邊，則復原
slider.style.left = 0;
validate.style.width = 0;
}
}
</script>
</body>
</html>