文章目录
- 滑块验证
滑块验证
效果如下：
结合当前流行的验证方法：等...
今天的练习:滑块验证的目的是原生JavaScript复习巩固网页交互，废话少说，上代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Slider validation</title> <link rel="stylesheet" href="./css/Slider_validation.css"> </head> <body> <div id="dragContainer"> <!--滑块验证容器 --> <div id="dragBg"></div> <!--滑块验证容器 --> <div id="dragBg"></div> <!--滑块左侧部分 --> <div id="dragText"></div> <!--容器文本 --> <div id="dragHandler" class="dargHandlerBg"></div> <!--滑块 --> </div> <script src="./js/Slider_validation.js"></script> </body> </html>/* 滑块验证容器 */ #dragContainer { position: relative; display: inline-block; /* 转向内块元素 */ background: #e8e8e8; width: 300px; height: 33px; border: 2px solid #e8e8e8; } /* 滑块左侧部分绿色背景 */ #dragBg { position: absolute; background-color: #7ac23c; width: 0px; height: 100%; } /* 滑块验证容器文本 */ #dragText { position: absolute; width: 100%; height: 100%; text-align: center; line-height: 33px; /* 不允许选择文字 */ user-select: none; } #dragHandler { position: absolute; width: 40px; height: 100%; cursor: move; } /* 滑块初始化背景 */ .dargHandlerBg { background: #fff no-repeat center url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8 IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTEyNTVEMURGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTEyNTVEMUNGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MTc5NzNmZS02OTQxLTQyOTYtYTIwNi02NDI2YTNkOWU5YmUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8 IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8 YiRG4AAAALFJREFUeNpi/P//PwMlgImBQkA9A bOnfsIiBOxKcInh yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWB I1xGSwxULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4Wf OUYxz6mQkgwAAN9mIrUReCXgAAAABJRU5ErkJggg=="); } /* 滑块成功时的背景 */ .dargHandlerOkBg { background: #fff no-repeat center url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8 IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDlBRDI3NjVGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDlBRDI3NjRGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphNWEzMWNhMC1hYmViLTQxNWEYTEwZS04Y2U5NzRlN2Q4YTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+k+sHwwAAASZJREFUeNpi/P//PwMyKD8uZw+kUoDYEYgloMIvgHg/EM/ptHx0EFk9I8wAoEZ+IDUPiIMY8IN1QJwENOgj3ACo5gNAbMBAHLgAxA4gQ5igAnNJ0MwAVTsX7IKyY7L2UNuJAf+AmAmJ78AEDTBiwGYg5gbifCSxFCZoaBMCy4A4GOjnH0D6DpK4IxNSVIHAfSDOAeLraJrjgJp/AwPbHMhejiQnwYRmUzNQ4VQgDQqXK0ia/0I17wJiPmQNTNBEAgMlQIWiQA2vgWw7QppBekGxsAjIiEUSBNnsBDWEAY9mEFgMMgBk00E0iZtA7AHEctDQ58MRuA6wlLgGFMoMpIG1QFeGwAIxGZo8GUhIysmwQGSAZgwHaEZhICIzOaBkJkqyM0CAAQDGx279Jf50AAAAAABJRU5ErkJggg==");
}window.onload = function () {
let dragContainer = document.querySelector('#dragContainer')
let dragBg = document.querySelector('#dragBg')
let dragText = document.querySelector('#dragText')
let dragHandler = document.querySelector('#dragHandler')
// 滑块最大偏移量 = 滑块验证容器长度 - 滑块长度
let maxHandlerOffset = dragContainer.clientWidth - dragHandler.clientWidth
// 是否验证成功标记
let isVertifySuccess = false
initDrag()
function initDrag() {
dragText.textContent = '拖动滑块验证'
// 滑块设置鼠标按下监听
dragHandler.addEventListener('mousedown', onDragHandlerDown)
}
function onDragHandlerDown() {
document.addEventListener('mousemove', onDragHandlerMove)
document.addEventListener('mouseup', onDragHandlerUp)
}
function onDragHandlerMove(e) {
// clientX 属性返回鼠标指针的水平坐标（根据当前窗口）
let left = e.clientX - dragHandler.clientWidth / 2
if (left < 0) {
left = 0
} else if (left > maxHandlerOffset) {
left = maxHandlerOffset
}
dragHandler.style.left = left + 'px'
dragBg.style.width = dragHandler.style.left
}
function onDragHandlerUp(e) {
document.removeEventListener('mousemove', onDragHandlerMove)
let left = e.clientX - dragHandler.clientWidth / 2
if (left >= maxHandlerOffset) {
vertifySuccess()
} else {
// 初始化滑块移动量
dragHandler.style.left = 0
dragBg.style.width = 0
}
}
// 验证成功
function vertifySuccess() {
isVertifySuccess = true
dragText.textContent = '验证通过'
dragText.style.color = 'white'
dragHandler.setAttribute('class', 'dargHandlerOkBg')
dragHandler.removeEventListener('mousedown', onDragHandlerDown)
document.removeEventListener('mousemove', onDragHandlerMove)
document.removeEventListener('mouseup', onDragHandlerUp)
// 设置跳转
window.location.href =
'https://blog.csdn.net/m0_53375764?spm=1000.2115.3001.5343'
}
}