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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2022-01-11

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

php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】

本文实例讲述了php+js实现的拖动滑块验证码验证表单操作.分享给大家供大家参考,具体如下: 现在很多网站,比如淘宝,京东等都改用使用极验拖动验证码实现登录,这种方式比传统的验证码方式有更好的体验,减少用户输入的错误,也同样能起到防盗刷的功能.现在很多极验都是第三方的,也很多都是收费的.今天在这里给大家分享自己用原生php实现的一个极验的代码.用原生php的好处就是以后你要嵌套到什么框架,可以直接用核心代码,改一改就好了. 极验拖动动画图 代码文件截图 代码实现 html文件 <!DOCTYPE

js实现移动端图片滑块验证功能

之前写过一篇uniapp框架的滑块验证,今天抽个空用原生js实现这个功能,pc端暂时不做,因为pc端只要把touch事件改成mouse事件就能实现,这里就不再重复写了. (最新完美版本,js+canvas实现,兼容pc,ie9和移动,js+cavans实现图片滑块验证) 老样子,还是先看效果 原理和上篇uniapp的滑块一样,不一样的是这里是纯js实现,代码是全部是自己写的,有不清楚的可以留言. 下面是全部代码: html: <!DOCTYPE html> <html lang=&quo

js实现滑动滑块验证登录

本文实例为大家分享了js实现滑动滑块验证登录的具体代码,供大家参考,具体内容如下 1.html代码 <div class="box"> <!--滑块--> <a href="#" rel="external nofollow" ><div class="btn">>></div></a> <!--文字--> <p class=

js canvas实现滑块验证

本文实例为大家分享了js canvas实现滑块验证的具体代码,供大家参考,具体内容如下 滑块验证 话不多说先上代码想用的小伙伴可以直接使用,想了解的我后面会说下我的思路 <template> <div class="sliderContent"> <div class="imgDev" :style="'width:' + width + 'px;'"> <canvas :id="id"

JavaScript实现滑块验证解锁

本文实例为大家分享了JavaScript实现滑块验证解锁的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> // 引

JavaScript实现滑块验证码

本文实例为大家分享了JavaScript实现滑块验证码的具体代码,供大家参考,具体内容如下 效果:鼠标在底部滑块上按下按住不松拖动可以移动滑块,上面大图里面带有小图背景的滑块也会跟随移动,移动到大图背景缺少区域即可完成验证.以上效果要实现,需要鼠标按下(mousedown事件),鼠标松开(mouseup事件),鼠标移动(mousemove事件)这几个事件. 先制作html部分实现静态效果,大图里面可移动的小块背景大小与大图一致,给小图块的背景添加background-position属性来控制小

js+cavans实现图片滑块验证

本文实例为大家分享了js+cavans实现图片滑块验证的具体代码,供大家参考,具体内容如下 js已封装好,拿来即用,兼容pc端和移动端, 效果: 移动端: pc端: 原理就不解释了,我之前的博客已经说过,只不过这个版本是结合了canvas实现,又兼容了pc端,直接拿代码就能用了. 代码:html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

JavaScript实现登录滑块验证

本文实例为大家分享了JavaScript实现登录滑块验证的具体代码,供大家参考,具体内容如下 html代码 <div class="login-select"> <div v-show="errselectFlag" id="err-select"></div> <p id="title-p">按住滑块,拖拽验证</p> <div id="left-s

javascript实现支付宝滑块验证码效果

支付宝的滑块验证效果,又刷新了大家对于验证码的认知,这种滑块效果,改善了用户体验.除了它外观和用户体验上的优秀外,其实它的安全性也并未降低,后端对用户行为的分析依然保证了安全校验. 下面我们在此介绍一下,滑块效果的前端实现. 涵盖的内容主要: 滑块前端样式(html排版),滑块的闪光移动效果(CSS3 动画),以及滑块滑动脚本的编写(javascript 移动,点击,拖拽事件的编写.) 备注: 本实例基于网上Demo 增添 CSS效果 和 修复 JS BUG 等问题.大家直接粘贴代码到对应的文件

Node.JS用纯JavaScript生成图片或滑块式验证码功能

有一些Node.JS图片生成类库,比如node-captcha等的类库,需要c/c++程序生成图片.跨平台部署不是很方便.这里介绍几个用纯JS实现的图片验证码生成模块. captchapng 用纯JavaScript实现的验证码生成模块. https://github.com/GeorgeChan/captchapng 安装简单,依赖少: npm install captchapng 示例: var captchapng = require('captchapng'); app.get('/si

iOS滑动解锁、滑动获取验证码效果的实现代码

最近短信服务商要求公司的app在获取短信验证码时加上校验码,目前比较流行的是采用类似滑动解锁的方式,我们公司采取的就是这种方式,设计图如下所示: 这里校验内部的处理逻辑不作介绍,主要分享一下界面效果的实现, 下面贴出代码: 先子类化UISlider #import <UIKit/UIKit.h> #define SliderWidth 240 #define SliderHeight 40 #define SliderLabelTextColor [UIColor colorWithRed:1

JS+CSS实现仿支付宝菜单选中效果代码

本文实例讲述了JS+CSS实现仿支付宝菜单选中效果代码.分享给大家供大家参考.具体如下: 这是一个漂亮的JS+CSS仿支付宝菜单,总体风格和形式与支付宝的菜单没什么两样,细心会发现这是一个CSS爱好者自己手功完成的,自己美化图片,重写CSS代码,为作者给我们奉献这么好的菜单而表示感谢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-f-alipay-style-menu-codes/ 具体代码如下: <!DOCTYPE html

JavaScript仿支付宝密码输入框

现在很多时候大家付款的场景都是在手机上面,而随着H5页面的开发变得越来越方便,很多场景也从客户端搬到了浏览器中,其中支付这个场景就很自然的被放在了浏览器中.那么这样的输入框大家一定不会陌生吧: 那么今天我就用JavaScript代码来实现这个效果吧,那么首先介绍一下整个的思路,首先我们先将确定输入密码的位数,我的需求是5位,那么就用一个div标签包住5个input标签. 并且给这个5个input设置display: inline-block 属性,同时用<!- ->来消除元素直接的margin

JavaScript仿支付宝6位数字密码输入框

前几天,项目有个功能和某宝购物支付密码的输入框有点类似,就自己写了这篇博文,权当总结笔记吧. 啰嗦半天了,直接上代码: 结构层: <div> <div>请在下方输入6位数字</div> <div class="ipt-box-nick"> <input type="tel" maxlength="6" class="ipt-real-nick"/> <div c

CSS3+JavaScript实现翻页幻灯片效果

先上效果图 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #content{ width: 500px; height: 300px; margin: 40px auto; position

javascript发送短信验证码实现代码

本文首先分析手机发送验证码的原理,再对javascript发送短信验证码予以实现,具体思路如下: 实现点击"发送验证码"按钮后,按钮依次显示为"59秒后重试"."58秒后重试"-直至倒计时至0秒时再恢复显示为"发送验证码".在倒计时期间按钮为禁用状态 . 第一步.获取按钮.绑定事件.设置定时器变量和计时变量 第二步.添加定时器,每隔1秒钟计时减 1,直至当计时小于等于 0 时清除定时器,按钮恢复为"发送验证码&quo

javascript实现图片左右滚动效果【可自动滚动,有左右按钮】

本文实例讲述了javascript实现图片左右滚动效果.分享给大家供大家参考,具体如下: html代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <