这篇文章将为大家详细讲解有关如何使用javascript实现滑块验证功能，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。具体内容如下<!DOCTYPE html><html&nb
这篇文章将为大家详细讲解有关如何使用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>Document</title> <style> * { margin: 0; padding: 0; } .box { position: relative; width: 500px; height: 40px; border: 1px solid #000; } p { position: relative; z-index: 5; font: 20px/40px '楷体'; text-align: center; color: rgba(95, 90, 90, 0.479); } .btn { width: 40px; height: 40px; border: 1px solid #ccc; box-sizing: border-box; background-color: #fff; cursor: pointer; z-index: 6; position: absolute; top: 0; left: 0; background-position: center; background-repeat: no-repeat; background-size: 50% auto; background-image: url(./图1.png); } .bg { height: 100%; position: absolute; top: 0; left: 0; background-color: #7ac23c; } </style></head> <body> <div class="box"> <div class="btn"></div> <p>拖动滑块验证</p> <div class="bg"></div> </div></body><script> //获取事件 var box = document.querySelector('.box') var p = document.querySelector('p') var btn = document.querySelector('.btn') var bg = document.querySelector('.bg') // 选中文字就会触发这个事件 this.box.onselectstart = function () { return false // 阻止默认行为 } //默认没有验证成功 var flag = false; //按下事件 btn.onmousedown = function () { var e1 = window.event; var x1 = e1.offsetX; //移动事件 btn.onmousemove = function () { var e2 = window.event; var x2 = e2.clientX //计算left的值 var left = x2 - x1 if (left > 0) { //设置滑动块的距离 this.style.left = left + 'px'; //设置背景的宽度 bg.style.width = left + 'px'; if (left > box.offsetWidth - this.offsetWidth) { //验证成功 flag = true; p.innerText = '通过验证' p.style.color = '#000' //事件清除 this.onmousedown = null; this.onmousemove = null; } } } //鼠标松开 btn.onmouseup = function () { //事件清除 this.onmousemove = null; //判断验证是否成功 if (flag) { return } this.style.left = 0; //设置滑动块的距离 bg.style.width = 0; //设置背景的宽度 }; }</script> </html>
关于“如何使用JavaScript实现滑块验证功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
--结束END--
本文标题: 如何使用JavaScript实现滑块验证功能
本文链接: https://lsjlt.com/news/306975.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0