温习数据算法—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 ...
随机推荐
- GitHub 上的大佬们打完招呼，会聊些什么？
你好 GitHub!每一位开源爱好者的好朋友「HelloGitHub」 大家好,今儿 HG 有幸邀请到:Lanking 一位亚马逊 AI 软件工程师.开源爱好者和贡献者.他是亚马逊开源的 Java 深 ...
- 一个小技巧助您减少if语句的状态判断
作者:依乐祝 首发地址:https://www.cnblogs.com/yilezhu/p/14174990.html 在进行项目的开发的过程中, if 语句是少不了的,但我们始终要有一颗消灭 if ...
- Excel 冻结窗口
1.冻结前五行 鼠标选中第六行,点击视图----> 冻结窗口 ----> 冻结拆分窗口 2.冻结第一列窗口 鼠标选中第1列,点击视图----> 冻结窗口 ----> 冻结首列窗 ...
- 基础才是重中之重~BouncyCastle实现的DES3加密~java通用
对于BouncyCastle类库(包)来说,他提供了很多加密算法,在与.net和java进行相互加解密过程中,得到了不错的应用,本文以DES3为例,来说一下DES3加解密的过程. 加密过程 明文字符转 ...
- Redis 设计与实现 6：五大数据类型之字符串
前文 Redis 设计与实现 2:Redis 对象 说到,五大数据类型都会封装成 RedisObject. typedef struct redisObject { unsigned type:4; ...
- @RequestBody,@RequestParam请求数据接收数据
一. @RequestBody 注解 @RequestBody是用于解析body中的json内容,对于我们使用时候我们需要指定Content-Type参数为application/json,标识我们需 ...
- swap是干嘛的？
本文截取自:http://hbasefly.com/2017/05/24/hbase-linux/ swap是干嘛的? 在Linux下,SWAP的作用类似Windows系统下的"虚拟内存&q ...
- Linux 时间同步 05 chrony时间同步
Linux 时间同步 05 chrony时间同步 目录 Linux 时间同步 05 chrony时间同步 chrony 的优势: chrony包介绍 安装chrony 配置与外部时间服务器进行时间同步 ...
- 多线程那点事—Parallel.for
先看段代码: 1 for (int i = 0; i < 10; i++) 2 { 3 Task.Factory.StartNew(()=>Console.WriteLine($" ...
- TurtleBot3 Waffle （tx2版华夫）（7）底盘测试
说明:opencr本身带有自测底盘功能,通过按opencr的sw1和sw2来自检底盘是否正确安装和运行: 7.1．前进测试 1)测试前,先把小车架空,轮子不要着地: 2)接好电源后,打开opencr的 ...