扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript实现拼图式滑块验证功能
  • 117

0
分享到

JavaScript实现拼图式滑块验证功能

2024-04-02 19:04:59 117人浏览 泡泡鱼
摘要

目录演示前戏源码介绍主页样式设计滑块验证部分img_ver内部演示 前戏 滑块验证码是在网站、APP等应用中常见的一种验证方式，通过按照一定规则滑动滑块到指定位置完成验证，才可以进

演示

前戏

滑块验证码是在网站、APP等应用中常见的一种验证方式，通过按照一定规则滑动滑块到指定位置完成验证，才可以进行下一步操作。滑块验证码有两种设计，一种是在滑动框内“一滑到底”即完成验证的，还有一种是滑动滑块拼合拼图完成验证的。由于拼图式的滑块验证码安全性更高，趣味性更强，所以多数网站或APP都选择了拼图式的滑块验证码。

拼图式的滑块验证码在业务应用中有三种展现形式，触发式、嵌入式和弹出式。触发式即鼠标光标移入验证条后才显示验证拼图，不影响网页原有的排版。嵌入式即拼图验证区域直接嵌入展示在网页，清晰直观，便于用户使用。弹出式一般可以绑定自有验证方式，点击验证后才弹出滑动验证码，比如用户输入用户名和密码，点击登录后，页面弹出滑块验证码。

源码介绍

主页样式设计

  .bxs-row {
            margin-bottom:12px;
        }
        .loGo-box {
            width:404px;
            margin:120px auto;
            border:1px solid #e5e5e5;
            border-radius:4px;
            box-shadow:0 4px 18px rgba(0,0,0,0.2);
            position:relative;
            overflow:hidden;
            height:360px;
        }
        .login {
            position:absolute;
            width:320px;left:0;
            top:0;
            padding: 42px 42px 36px;
            transition:all 0.8s;
        }
        .username,.passWord,.btn {
            height: 44px;
            width: 100%;
            padding: 0 10px;
            border: 1px solid #9da3a6;
            background: #fff;
            text-overflow: ellipsis;
            -WEBkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            -khtml-border-radius: 4px;
            border-radius: 4px;
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
            color: #000;
            font-size: 1em;
            font-family: Helvetica,Arial,sans-serif;
            font-weight: 400;
            direction: ltr;
            font-size:13px;
        }
        .submit {
            background-color: #0070ba;
            color:#fff;
            border:1px solid #0070ba;
        }
        .submit:hover {
            background-color:#005ea6;
        }
        .verBox {
            position:absolute;
            width:100%;
            text-align:center;
            left:404px;
            top:0;
            opacity:0;
            transition:all 0.8s;
            padding-top:55px;
        }
        .err {
            margin:12px 0 0;
            line-height:12px;
            height:12px;
            font-size:12px;
            color:red;
        }

滑块验证部分

这里使用了一个工具img_ver.js网上都是关于Vue的没有这个简单

imgVer({
            el:'$("#imgVer")',
            width:'260',
            height:'116',
            img:[
                'images/ver-1.png',
                'images/ver-2.png',
            ],
            success:function () {
                //alert('执行登录函数');
                $(".login").CSS({
                    "left":"0",
                    "opacity":"1"
                });
                $(".verBox").css({
                    "left":"404px",
                    "opacity":"0"
                });
                $(".tips").html('你是不是不知道账号密码！？？？');
                $("#logo").attr("src",'images/login-err.png')
            },
            error:function () {
                //alert('错误什么都不执行')
            }
        });

img_ver内部

滑块移动和验证部分

  ctx.moveTo(X, Y);
    ctx.lineTo(X + d, Y);
    ctx.bezierCurveTo(X + d, Y - d, X + 2 * d, Y - d, X + 2 * d, Y);
    ctx.lineTo(X + 3 * d, Y);
    ctx.lineTo(X + 3 * d, Y + d);
    ctx.bezierCurveTo(X + 2 * d, Y + d, X + 2 * d, Y + 2 * d, X + 3 * d, Y + 2 * d);
    ctx.lineTo(X + 3 * d, Y + 3 * d);
    ctx.lineTo(X, Y + 3 * d);
 ctx_l.moveTo(X, Y);
    ctx_l.lineTo(X + d, Y);
    ctx_l.bezierCurveTo(X + d, Y - d, X + 2 * d, Y - d, X + 2 * d, Y);
    ctx_l.lineTo(X + 3 * d, Y);
    ctx_l.lineTo(X + 3 * d, Y + d);
    ctx_l.bezierCurveTo(X + 2 * d, Y + d, X + 2 * d, Y + 2 * d, X + 3 * d, Y + 2 * d);
    ctx_l.lineTo(X + 3 * d, Y + 3 * d);
    ctx_l.lineTo(X, Y + 3 * d);
ctx_s.moveTo(X, Y);
    ctx_s.lineTo(X + d, Y);
    ctx_s.bezierCurveTo(X + d, Y - d, X + 2 * d, Y - d, X + 2 * d, Y);
    ctx_s.lineTo(X + 3 * d, Y);
    ctx_s.lineTo(X + 3 * d, Y + d);
    ctx_s.bezierCurveTo(X + 2 * d, Y + d, X + 2 * d, Y + 2 * d, X + 3 * d, Y + 2 * d);
    ctx_s.lineTo(X + 3 * d, Y + 3 * d);
    ctx_s.lineTo(X, Y + 3 * d);

其他的我就不展示了都是位置坐标。

到此这篇关于javascript实现拼图式滑块验证功能的文章就介绍到这了,更多相关js滑块验证内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

--结束END--

本文标题: JavaScript实现拼图式滑块验证功能

本文链接: https://lsjlt.com/news/150743.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JavaScript实现拼图式滑块验证功能
    目录演示前戏源码介绍主页样式设计滑块验证部分img_ver内部演示 前戏 滑块验证码是在网站、APP等应用中常见的一种验证方式，通过按照一定规则滑动滑块到指定位置完成验证，才可以进...
    99+
    2024-04-02
  • JavaScript如何实现拼图式滑块验证功能
    这篇文章主要介绍“JavaScript如何实现拼图式滑块验证功能”，在日常操作中，相信很多人在JavaScript如何实现拼图式滑块验证功能问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”JavaScript如...
    99+
    2023-07-02
  • JavaScript实现拖动滑块拼图验证功能（html5、canvas）
    引言： 滑块拖动验证现在很多地方都用到，周末就琢磨着写了一个，放上来，看看有没有人用得上！ 效果： 实现思路：  用一张画布绘制源图，再绘制一个填充的方形，这样就可以达到...
    99+
    2024-04-02
  • Android 如何实现滑块拼图验证码功能
    本篇内容主要讲解“Android 如何实现滑块拼图验证码功能”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Android 如何实现滑块拼图验证码功能”吧!本篇主要从两方面进行介绍：使用依赖库实现...
    99+
    2023-06-14
  • Android 简单的实现滑块拼图验证码功能
    目录实现过程：接下来我们对这个库进行介绍：实现滑块拼图验证码功能之前已经写过一篇了，上一篇使用的是自定义控件的方式实现这个功能，主要还是想让童鞋们知其然更知其所以然，还没看的童鞋可以...
    99+
    2024-04-02
  • Java实现滑块拼图验证码
    本文实例为大家分享了Java实现滑块拼图验证码的具体代码，供大家参考，具体内容如下 1、后端随机生成抠图和带有抠图阴影的背景图片，后台保存随机抠图位置坐标 2、前端实现滑动交互，将抠...
    99+
    2024-04-02
  • C#滑动验证码拼图验证功能实现(SlideCaptcha)
    目录使用背景：实现分析：后端代码：准备：使用：前端代码：结语：使用背景： 关于滑动验证码的使用场所还是非常多的，如：调取短信接口之前，和 注册请求之前 或者 频繁会调用的接口都需要加...
    99+
    2024-04-02
  • 如何在Android中实现一个滑块拼图验证码功能
    本篇文章给大家分享的是有关如何在Android中实现一个滑块拼图验证码功能，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。一、实现步骤：定义自定义属性； 2、确认目标位置，这里使...
    99+
    2023-06-06
  • vue+elementui实现拖住滑块拼图验证
    vue拖住滑块拼图验证，以下是cavas直接写的滑块拼图验证码，直接复制引用即可 ​<template>   <div id="puzzle" ref="puzz...
    99+
    2024-04-02
  • Python实现滑块拼图验证码详解
    目录初级版滑块拼图验证码补充知识点高级版滑动拼图验证码滑动拼图验证码可以算是滑块验证码的进阶版本，其验证机制相对复杂。本节将介绍两种滑动拼图验证码：初级版和高级版本。 初级版滑块拼...
    99+
    2024-04-02
  • 如何使用JavaScript实现滑块验证功能
    这篇文章将为大家详细讲解有关如何使用JavaScript实现滑块验证功能，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。具体内容如下<!DOCTYPE html><html&nb...
    99+
    2023-06-26
  • JavaScript实现滑块验证码
    本文实例为大家分享了JavaScript实现滑块验证码的具体代码，供大家参考，具体内容如下 效果：鼠标在底部滑块上按下按住不松拖动可以移动滑块，上面大图里面带有小图背景的滑块也会跟随...
    99+
    2024-04-02
  • Flutter实现滑动块验证码功能
    Flutter实现滑动块验证码功能，供大家参考，具体内容如下 本文实现的是一个用于登录时，向右滑动滑动块到最右边完成验证的一个功能。当滑动未到最右边时，滑动块回弹回左边起始位置。 ...
    99+
    2024-04-02
  • JavaScript实现登录滑块验证
    本文实例为大家分享了JavaScript实现登录滑块验证的具体代码，供大家参考，具体内容如下 html代码 <div class="login-select"> ...
    99+
    2024-04-02
  • JavaScript实现滑块验证案例
    本文实例为大家分享了JavaScript实现滑块验证的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang="en">  ...
    99+
    2024-04-02
  • 怎么用纯JavaScript生成图片或滑块式验证码功能
    本文小编为大家详细介绍“怎么用纯JavaScript生成图片或滑块式验证码功能”，内容详细，步骤清晰，细节处理妥当，希望这篇“怎么用纯JavaScript生成图片或滑块式验证码功能”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来...
    99+
    2023-07-04
  • js canvas如何实现滑块验证功能
    本篇内容主要讲解“js canvas如何实现滑块验证功能 ”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“js canvas如何实现滑块验证功能 ”吧!滑块验证内容如下话不多说先上代码想用的小伙伴...
    99+
    2023-06-14
  • vue 实现左滑图片验证功能
    目录前言一、安装二、使用前言 众所周知，网页中滑动图片验证一直是各大网站、移动端的主流校验方式，其主要作用是为了区分人和机器以及为了防止机器人程序暴力登录或攻击从而设置的一种安全保护...
    99+
    2023-05-14
    vue 左滑图片验证 vue 图片验证 vue 左滑验证
  • vue实现图片滑动验证功能
    图片滑动验证，是目前比较常见的验证方式，主要目的是防止用户利用机器人自动注册、登录、灌水。 目前vue技术日趋成熟，已经有专门针对图片滑动验证功能的插件了。具体使用方式如下： 1....
    99+
    2024-04-02
  • vue实现登录滑动拼图验证
    本文实例为大家分享了vue实现登录滑动拼图验证的具体代码，供大家参考，具体内容如下 一、安装插件 npm install --save vue-monoplasty-slide-ve...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作