JavaScript实现滑块验证案例
本文实例为大家分享了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实现支付宝滑块验证码效果
支付宝的滑块验证效果,又刷新了大家对于验证码的认知,这种滑块效果,改善了用户体验.除了它外观和用户体验上的优秀外,其实它的安全性也并未降低,后端对用户行为的分析依然保证了安全校验. 下面我们在此介绍一下,滑块效果的前端实现. 涵盖的内容主要: 滑块前端样式(html排版),滑块的闪光移动效果(CSS3 动画),以及滑块滑动脚本的编写(javascript 移动,点击,拖拽事件的编写.) 备注: 本实例基于网上Demo 增添 CSS效果 和 修复 JS BUG 等问题.大家直接粘贴代码到对应的文件
-
php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】
本文实例讲述了php+js实现的拖动滑块验证码验证表单操作.分享给大家供大家参考,具体如下: 现在很多网站,比如淘宝,京东等都改用使用极验拖动验证码实现登录,这种方式比传统的验证码方式有更好的体验,减少用户输入的错误,也同样能起到防盗刷的功能.现在很多极验都是第三方的,也很多都是收费的.今天在这里给大家分享自己用原生php实现的一个极验的代码.用原生php的好处就是以后你要嵌套到什么框架,可以直接用核心代码,改一改就好了. 极验拖动动画图 代码文件截图 代码实现 html文件 <!DOCTYPE
-
js canvas实现滑块验证
本文实例为大家分享了js canvas实现滑块验证的具体代码,供大家参考,具体内容如下 滑块验证 话不多说先上代码想用的小伙伴可以直接使用,想了解的我后面会说下我的思路 <template> <div class="sliderContent"> <div class="imgDev" :style="'width:' + width + 'px;'"> <canvas :id="id"
-
js+cavans实现图片滑块验证
本文实例为大家分享了js+cavans实现图片滑块验证的具体代码,供大家参考,具体内容如下 js已封装好,拿来即用,兼容pc端和移动端, 效果: 移动端: pc端: 原理就不解释了,我之前的博客已经说过,只不过这个版本是结合了canvas实现,又兼容了pc端,直接拿代码就能用了. 代码:html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
-
js实现滑动滑块验证登录
本文实例为大家分享了js实现滑动滑块验证登录的具体代码,供大家参考,具体内容如下 1.html代码 <div class="box"> <!--滑块--> <a href="#" rel="external nofollow" ><div class="btn">>></div></a> <!--文字--> <p class=
-
JavaScript实现滑块验证码
本文实例为大家分享了JavaScript实现滑块验证码的具体代码,供大家参考,具体内容如下 效果:鼠标在底部滑块上按下按住不松拖动可以移动滑块,上面大图里面带有小图背景的滑块也会跟随移动,移动到大图背景缺少区域即可完成验证.以上效果要实现,需要鼠标按下(mousedown事件),鼠标松开(mouseup事件),鼠标移动(mousemove事件)这几个事件. 先制作html部分实现静态效果,大图里面可移动的小块背景大小与大图一致,给小图块的背景添加background-position属性来控制小
-
JavaScript实现登录滑块验证
本文实例为大家分享了JavaScript实现登录滑块验证的具体代码,供大家参考,具体内容如下 html代码 <div class="login-select"> <div v-show="errselectFlag" id="err-select"></div> <p id="title-p">按住滑块,拖拽验证</p> <div id="left-s
-
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
vue验证滑块功能,在生活中很多地方都可以见到,那么使用起来非常方便,基于vue如何实现滑块验证呢?下面通过代码给大家讲解. 效果图如下所示: 拖动前 拖动后 代码引用的css与js都是线上的 将代码全部复制到一个html中可以直接打开,极其简单. 来分析一下代码 底色div上放了一个变色div再放一个提示字的div最后加一个滑块div 给滑块div绑定鼠标移动事件 <!DOCTYPE html> <html> <head> <meta charset="
-
基于JS组件实现拖动滑块验证功能(代码分享)
拖动滑块验证功能在支付宝,微信各大平台都能见到这样的功能,那么基于js组件是如何实现此功能的呢?今天小编就给大家分享下js 拖动滑块 验证功能的实现代码,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="Cache-Control" content="no-cache, no-store, m
-
js实现移动端图片滑块验证功能
之前写过一篇uniapp框架的滑块验证,今天抽个空用原生js实现这个功能,pc端暂时不做,因为pc端只要把touch事件改成mouse事件就能实现,这里就不再重复写了. (最新完美版本,js+canvas实现,兼容pc,ie9和移动,js+cavans实现图片滑块验证) 老样子,还是先看效果 原理和上篇uniapp的滑块一样,不一样的是这里是纯js实现,代码是全部是自己写的,有不清楚的可以留言. 下面是全部代码: html: <!DOCTYPE html> <html lang=&quo
-
JavaScript实现滑块验证解锁
本文实例为大家分享了JavaScript实现滑块验证解锁的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> // 引