温习数据算法—js滑块验证码
前言
大多数的应用软件都需要输入一些验证码，验证码的样式也多种多样。
比如抢票，提交订单需要验证码，很多人就纳闷了，怎么还需要验证码呢？这不是浪费时间嘛。
存在即合理，合理就是现实的。
源码下载地址+演示地址
百度网盘源码下载地址：https://pan.baidu.com/s/1l4ym4jsqEk1gRJTWTve6Gw
提取码：xion在线演示地址：http://www.xiongze.net/yanzheng/index.html
效果图GIf
什么是验证码
验证码（CAPTCHA）：是“Completely Automated Public Turing test to tell Computers and Humans Apart”（全自动区分计算机和人类的图灵测试）的缩写，是一种区分用户是计算机和人的公共全自动程序。
验证码的英文CAPTCHA 这个词最早是在2000年由卡内基梅隆大学的Luis von Ahn、Manuel Blum、Nicholas J.Hopper以及IBM的John Langford所提出。
在最初，是不存在验证码这个东西的。自己登录过的网站，有些一开始也是不用验证码的，后来慢慢的发现也有了验证码这一稀罕物。
根据网友所说，最先提出解决人机识别问题的是雅虎，其目的是防止垃圾邮件的轰炸，
它们于是找到了当时年仅21岁的天才Luis von Ahn，这位天才给出的解决方案就是：人类皱皱眉，电脑耸耸肩的验证码。
验证码的形式
四位数字和字母，可能都是字母，也可能都是数字，随机的4位字符串，最原始的验证码，验证作用几乎为零。
汉字，QQ网站注册目前最新的验证码，都是汉字，随机生成。
QQ网站用户登录用的是PNG格式，图片用的随机数字+随机大写英文字母，整个构图有点张扬，每刷新一次,每个字符还会变位置呢！有时候出来的图片，人眼都识别不了。（PS：这个人眼都识别不了的验证码，我可是深有体会，曾经为了干一件事，结果很长很长的时间，都在那儿趴着看验证码了。）
MS的hotmail申请时候的是BMP格式。 随机数字+随机大写英文字母+随机干扰像素+随机位置。
韩文或日文。这玩意儿，我真正接触的还是付费，发送到手机上的验证码是一些字符，然后电脑付费界面上是很多字符，让正确输入才能从卡里支出金额。（PS：虽然麻烦了点，但保险的说。）
问题验证码：问题验证码主要是以问答式的形式来进行填写。它的查看比加模验证码更容易辨别和录入，系统可以生成诸如“1+2=？”的问题让用户进行回答，当然这样的问题是随机生成的。另一种问题验证码，则是文字式的问题验证码，诸如生成问题“中国的全称是什么？”，当然有些网站还在问题后面给出了提示答案或直接答案。（PS：CSDN上用的就是1+2=？式滴，话说有几回看不清，我还没答对呢。）
视频验证码。高技术含量的东东，没能普及。
验证码的使用
大多数网站的验证码都是需要点击一下填写框，然后会自动弹出验证码图片。
由于验证码是随机产生的，有很大几率会出现无法清楚识别的验证码图片，所以需要注意的是，一般网站都会有相应的提示，如“看不清，换一张”等，如果没有提示，
则直接点击当前的验证码图片，可以完成验证码的更换。
我们这里展示的是滑块验证，滑块验证码是一种很常见的行为验证码，用户只需要轻轻滑动滑块填充拼图，即可完成安全验证。
通常包括触发式、嵌入式和弹出式三种形式。
验证码的作用
防止恶意破解密码、刷票、论坛灌水，也有效防止某个黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试。
防止：恶意破解密码、刷票、论坛灌水
有效防止某个黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试，实际上是用验证码是现在很多网站通行的
方式（比如招商银行的网上个人银行，百度社区），我们利用比较简易的方式实现了这个功能。虽然登陆麻烦一点，但是对网友的密
码安全还来说这个功能还是很有必要，也很重要。但我们还是提醒大家主要保护自己的密码 ， 尽量使用混杂了数字、字母、符号在
内的6位以上密码，不要使用诸如1234之类的简单密码或者与用户名相同、类似的密码 ，免得你的账号给人盗用给自己带来不必要的
麻烦。
验证码一般是防止批量注册的，人眼看起来都费劲，何况是机器。二像百度贴吧未登录发贴要输入验证码大概是防止大规模匿名
回帖的发生。目前，不少网站为了防止用户利用机器人自动注册、登录、灌水，都采用了验证码技术。所谓验证码，就是将一串随机
产生的数字或符号，生成一幅图片， 图片里加上一些干扰，例如随机画数条直线，画一些点（防止OCR），由用户肉眼识别其中的
验证码信息，输入表单提交网站验证，验证成功后才能使用某项功能。
一般注册用户ID的地方以及各大论坛都要输入验证码。
源码
直接拷贝即可使用
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js滑动验证</title>
<!--百度压缩版引用地址-->
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
} #box {
width: 650px;
height: 400px;
margin: 50px auto;
border: 1px solid black;
position: relative;
} #content {
width: 650px;
height: 350px;
position: relative;
background-image: url("https://images.cnblogs.com/cnblogs_com/xiongze520/1923404/o_210127064552%E7%A7%91%E6%8A%80.jpg");
background-size: 650px 350px;
}
/*空白位置*/
#shadow {
height: 40px;
width: 40px;
position: absolute;
background-color: aliceblue;
left: 350px;
top: 50px;
}
/*滑动块样式*/
#block {
height: 40px;
width: 40px;
position: absolute;
left: 0;
top: 355px;
background-image: url("https://images.cnblogs.com/cnblogs_com/xiongze520/1923404/o_210127064552%E7%A7%91%E6%8A%80.jpg");
background-size: 650px 350px;
z-index: 9999;
}
/*实体阴影块样式*/
#tip {
height: 40px;
width: 40px;
position: absolute;
left: 0;
top: 50px;
background: url("https://images.cnblogs.com/cnblogs_com/xiongze520/1923404/o_210127064552%E7%A7%91%E6%8A%80.jpg") no-repeat -350px -50px;
background-size: 650px 350px;
}
/*滑块提示*/
p {
z-index: 2;
left: 250px;
font-size: 20px;
color: gray;
position: absolute;
top: 360px;
} </style>
</head>
<body>
<div id="box">
<div id="content">
<!--空白位置-->
<div id="shadow"></div>
<!--实体阴影块-->
<div id="tip"></div>
</div>
<!--滑动块-->
<div id="block"></div>
<p>拖动滑块验证 >>></p>
</div>
<script>
var box = document.querySelector("#box");
var content = document.querySelector("#content");
var shadow = document.querySelector("#shadow");
var tip = document.querySelector("#tip");
var block = document.querySelector("#block"); var maxWidth = content.clientWidth - shadow.offsetWidth
var maxHeight = content.clientHeight - shadow.offsetHeight; var ranX = Math.round(Math.random() * maxWidth);
var ranY = Math.round(Math.random() * maxHeight); shadow.style.left = ranX + "px";
shadow.style.top = ranY + "px"; tip.style.top = ranY + "px";
tip.style.backgroundPosition = -ranX + "px " + (-ranY) + "px";
//鼠标按下事件
block.onmousedown = function(e) {
var ev = event || e;
var startX = ev.x;
//鼠标滑动事件
document.onmousemove = function(e) {
var ev = event || e;
var x = ev.x;
var left = x - startX;
if (left <= 0) {
left = 0;
}
if (left >= maxWidth) {
left = maxWidth;
}
//设置滑动块的位置
block.style.left = left + "px";
tip.style.left = left + "px";
}
} //鼠标弹起事件
document.onmouseup = function() {
document.onmousemove = null;
//阀值误差为2
if (Math.abs(tip.offsetLeft - shadow.offsetLeft) <= 2) {
alert("成功");
//这里可以做其他事情，比如关闭当前页面，显示验证成功
} else {
block.style.left = 0;
tip.style.left = 0;
add();
}
} //生成坐标
function add() {
//获取随机坐标
var ranX = Math.round(Math.random() * maxWidth);
var ranY = Math.round(Math.random() * maxHeight); shadow.style.left = ranX + "px";
shadow.style.top = ranY + "px"; tip.style.top = ranY + "px";
tip.style.backgroundPosition = -ranX + "px " + (-ranY) + "px";
}
window.ondragstart = function() {
return false;
}
</script>
</body>
</html>
 欢迎关注订阅我的微信公众平台【熊泽有话说】，更多好玩易学知识等你来取
作者：熊泽-学习中的苦与乐 公众号：熊泽有话说 出处：https://www.cnblogs.com/xiongze520/p/14335527.html 创作不易，转载或者部分转载、摘录，请在文章明显位置注明作者和原文链接。 |
温习数据算法—js滑块验证码的更多相关文章
- 对极验geetest滑块验证码图片还原算法的研究
免责声明 本文章所提到的技术仅用于学习用途,禁止使用本文章的任何技术进行发起网络攻击.非法利用等网络犯罪行为,一切信息禁止用于任何非法用途.若读者利用文章所提到的技术实施违法犯罪行为,其责任一概由读者 ...
- 使用Python + Selenium破解滑块验证码
在前面一篇博客<使用 Python + Selenium 打造浏览器爬虫>中,我介绍了 Selenium 的基本用法和爬虫开发过程中经常使用的一些小技巧,利用这些写出一个浏览器爬虫已经完全 ...
- 使用 Python＋Selenium 破解滑块验证码
开发工具 Python版本:3.6.4 相关模块: pillow模块: selenium模块: numpy模块: 以及一些Python自带的模块. 其他: chromedriver 环境搭建 安装 ...
- Vue3+Vue-cli4项目中使用腾讯滑块验证码
Vue3+Vue-cli4项目中使用腾讯滑块验证码 简介: 滑块验证码相比于传统的图片验证码具有以下优点: 验证码的具体验证不需要服务端去验证,服务端只需要核验验证结果即可. 验证码的实现不需要我们去 ...
- Asp.NET Core+ABP框架+IdentityServer4+MySQL+Ext JS之验证码
验证码这东西,有人喜欢有人不喜欢.对于WebApi是否需要验证码,没去研究过,只是原来的SimpleCMS有,就加上吧. 在WeiApi上使用验证码,关键的地方在于WeiApi是没有状态的,也就是说, ...
- js编写验证码
这是一个简单的js编写的验证码,自己已经亲自验证,没有问题了 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...
- Django:之传递数据给JS、Ajax和Ajax CSRF认证
Django传递数据给JS 有时候我们想把一个list或者dict传递给javascript,处理后显示到网页上,比如要用js进行可视化到数据. 请注意:如果是不处理,直接显示在网页上,用Django ...
- 大数据算法->推荐系统常用算法之基于内容的推荐系统算法
港真,自己一直非常希望做算法工程师,所以自己现在开始对现在常用的大数据算法进行不断地学习,今天了解到的算法,就是我们生活中无处不在的推荐系统算法. 其实,向别人推荐商品是一个很常见的现象,比如我用了一 ...
- js简单验证码的生成和验证
如何用js生成简单验证码,并验证是否正确的方法 1.html页面如下 <div> <table border="0" cellspacing="5&qu ...
随机推荐
- vue API 知识点（4） --- 指令、特殊 attribute 、内置组件
一.指令 1.v-text <span v-text="msg"></span> <!-- 两种写法是一样的 --> <span>{ ...
- 2020年的UWP(5)——UWP和Desktop Extension的双向交互
上一篇我们提到了怎么在Desktop Extension中等待并处理UWP端发出的request.在本篇中将描述UWP和Desktop Extension双向交互的场景,即存在从两端各自发出reque ...
- Java学习日报7.26
package leijia;import java.util.*;public class Sum { public static void main(String[] args) { // TOD ...
- 认识PHP8
PHP 团队于2020年11月26日宣布 PHP 8 正式发布!这意味着将不会有 PHP 7.5 版本.PHP8 目前正处于非常活跃的开发阶段,所以在接下来的几个月里,情况可能会发生很大的变化.我也分 ...
- spark-streaming-连接kafka的两种方式
推荐系统的在线部分往往使用spark-streaming实现,这是一个很重要的环节. 在线流程的实时数据一般是从kafka获取消息到spark streaming spark连接kafka两种方式在面 ...
- 解决 unknown filesystem type ntfs U盘/移动硬盘挂载出错问题
大内存U盘或者移动硬盘挂在再Linux 时,报错unknown filesystem type ntfs 1.安装ntfs-3g wget http://tuxera.com/opensource/n ...
- Tensorflow创建已知分布的张量
一.随机数 tf.random(num) 随机产生返回0----num-1的数 二.图变量 tf.Variable.init(initial_value, trainable=True, collec ...
- Mirai qq机器人 c++版sdk（即用c++写mirai）
Mirai机器人c++版 前言 类似教程 本文git,gitee地址 c++开发mirai 原理 大概流程 实现 如何使用 注意事项 常见错误 前言 改分支版本以及过时,暂时不再维护 请看最新版kot ...
- Linux下MiniGUI库的安装
Linux下MiniGUI库的安装 今天试了下安装MiniGUI的库 先仿照官网的教程安装 传送门:MiniGUI官网 一.配置依赖环境 安装构建工具 apt install binutils aut ...
- Laya 踩坑日记 ---A* 导航寻路
要做寻路,然后看了看laya 官方的例子,感觉看的一脸懵逼,早了半天的api 也没找到在哪有寻路的,最后一看代码,原来是用的github上的A星方案 https://github.com/bgrin ...