前言

大多数的应用软件都需要输入一些验证码,验证码的样式也多种多样。

比如抢票,提交订单需要验证码,很多人就纳闷了,怎么还需要验证码呢?这不是浪费时间嘛。

存在即合理,合理就是现实的。


源码下载地址+演示地址

百度网盘源码下载地址: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,这位天才给出的解决方案就是:人类皱皱眉,电脑耸耸肩的验证码。

验证码的形式

  1. 四位数字和字母,可能都是字母,也可能都是数字,随机的4位字符串,最原始的验证码,验证作用几乎为零。

  2. 汉字,QQ网站注册目前最新的验证码,都是汉字,随机生成。

  3. QQ网站用户登录用的是PNG格式,图片用的随机数字+随机大写英文字母,整个构图有点张扬,每刷新一次,每个字符还会变位置呢!有时候出来的图片,人眼都识别不了。(PS:这个人眼都识别不了的验证码,我可是深有体会,曾经为了干一件事,结果很长很长的时间,都在那儿趴着看验证码了。)

  4. MS的hotmail申请时候的是BMP格式。 随机数字+随机大写英文字母+随机干扰像素+随机位置。

  5. 韩文或日文。这玩意儿,我真正接触的还是付费,发送到手机上的验证码是一些字符,然后电脑付费界面上是很多字符,让正确输入才能从卡里支出金额。(PS:虽然麻烦了点,但保险的说。)

  6. 问题验证码:问题验证码主要是以问答式的形式来进行填写。它的查看比加模验证码更容易辨别和录入,系统可以生成诸如“1+2=?”的问题让用户进行回答,当然这样的问题是随机生成的。另一种问题验证码,则是文字式的问题验证码,诸如生成问题“中国的全称是什么?”,当然有些网站还在问题后面给出了提示答案或直接答案。(PS:CSDN上用的就是1+2=?式滴,话说有几回看不清,我还没答对呢。)

  7. 视频验证码。高技术含量的东东,没能普及。

验证码的使用

大多数网站的验证码都是需要点击一下填写框,然后会自动弹出验证码图片。
由于验证码是随机产生的,有很大几率会出现无法清楚识别的验证码图片,所以需要注意的是,一般网站都会有相应的提示,如“看不清,换一张”等,如果没有提示,

则直接点击当前的验证码图片,可以完成验证码的更换。

我们这里展示的是滑块验证,滑块验证码是一种很常见的行为验证码,用户只需要轻轻滑动滑块填充拼图,即可完成安全验证。

通常包括触发式、嵌入式和弹出式三种形式。

验证码的作用

防止恶意破解密码、刷票、论坛灌水,也有效防止某个黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试。

防止:恶意破解密码、刷票、论坛灌水   

有效防止某个黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试,实际上是用验证码是现在很多网站通行的

方式(比如招商银行的网上个人银行,百度社区),我们利用比较简易的方式实现了这个功能。虽然登陆麻烦一点,但是对网友的密

码安全还来说这个功能还是很有必要,也很重要。但我们还是提醒大家主要保护自己的密码 , 尽量使用混杂了数字、字母、符号在

内的6位以上密码,不要使用诸如1234之类的简单密码或者与用户名相同、类似的密码 ,免得你的账号给人盗用给自己带来不必要的

麻烦。

验证码一般是防止批量注册的,人眼看起来都费劲,何况是机器。二像百度贴吧未登录发贴要输入验证码大概是防止大规模匿名

回帖的发生。目前,不少网站为了防止用户利用机器人自动注册、登录、灌水,都采用了验证码技术。所谓验证码,就是将一串随机

产生的数字或符号,生成一幅图片, 图片里加上一些干扰,例如随机画数条直线,画一些点(防止OCR),由用户肉眼识别其中的

验证码信息,输入表单提交网站验证,验证成功后才能使用某项功能。

一般注册用户ID的地方以及各大论坛都要输入验证码。

源码

直接拷贝即可使用

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>js滑动验证</title>
  6. <!--百度压缩版引用地址-->
  7. <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
  8. <style>
  9. * {
  10. margin: 0;
  11. padding: 0;
  12. list-style: none;
  13. }
  14.  
  15. #box {
  16. width: 650px;
  17. height: 400px;
  18. margin: 50px auto;
  19. border: 1px solid black;
  20. position: relative;
  21. }
  22.  
  23. #content {
  24. width: 650px;
  25. height: 350px;
  26. position: relative;
  27. background-image: url("https://images.cnblogs.com/cnblogs_com/xiongze520/1923404/o_210127064552%E7%A7%91%E6%8A%80.jpg");
  28. background-size: 650px 350px;
  29. }
  30. /*空白位置*/
  31. #shadow {
  32. height: 40px;
  33. width: 40px;
  34. position: absolute;
  35. background-color: aliceblue;
  36. left: 350px;
  37. top: 50px;
  38. }
  39. /*滑动块样式*/
  40. #block {
  41. height: 40px;
  42. width: 40px;
  43. position: absolute;
  44. left: 0;
  45. top: 355px;
  46. background-image: url("https://images.cnblogs.com/cnblogs_com/xiongze520/1923404/o_210127064552%E7%A7%91%E6%8A%80.jpg");
  47. background-size: 650px 350px;
  48. z-index: 9999;
  49. }
  50. /*实体阴影块样式*/
  51. #tip {
  52. height: 40px;
  53. width: 40px;
  54. position: absolute;
  55. left: 0;
  56. top: 50px;
  57. background: url("https://images.cnblogs.com/cnblogs_com/xiongze520/1923404/o_210127064552%E7%A7%91%E6%8A%80.jpg") no-repeat -350px -50px;
  58. background-size: 650px 350px;
  59. }
  60. /*滑块提示*/
  61. p {
  62. z-index: 2;
  63. left: 250px;
  64. font-size: 20px;
  65. color: gray;
  66. position: absolute;
  67. top: 360px;
  68. }
  69.  
  70. </style>
  71. </head>
  72. <body>
  73. <div id="box">
  74. <div id="content">
  75. <!--空白位置-->
  76. <div id="shadow"></div>
  77. <!--实体阴影块-->
  78. <div id="tip"></div>
  79. </div>
  80. <!--滑动块-->
  81. <div id="block"></div>
  82. <p>拖动滑块验证 >>></p>
  83. </div>
  84. <script>
  85. var box = document.querySelector("#box");
  86. var content = document.querySelector("#content");
  87. var shadow = document.querySelector("#shadow");
  88. var tip = document.querySelector("#tip");
  89. var block = document.querySelector("#block");
  90.  
  91. var maxWidth = content.clientWidth - shadow.offsetWidth
  92. var maxHeight = content.clientHeight - shadow.offsetHeight;
  93.  
  94. var ranX = Math.round(Math.random() * maxWidth);
  95. var ranY = Math.round(Math.random() * maxHeight);
  96.  
  97. shadow.style.left = ranX + "px";
  98. shadow.style.top = ranY + "px";
  99.  
  100. tip.style.top = ranY + "px";
  101. tip.style.backgroundPosition = -ranX + "px " + (-ranY) + "px";
  102. //鼠标按下事件
  103. block.onmousedown = function(e) {
  104. var ev = event || e;
  105. var startX = ev.x;
  106. //鼠标滑动事件
  107. document.onmousemove = function(e) {
  108. var ev = event || e;
  109. var x = ev.x;
  110. var left = x - startX;
  111. if (left <= 0) {
  112. left = 0;
  113. }
  114. if (left >= maxWidth) {
  115. left = maxWidth;
  116. }
  117. //设置滑动块的位置
  118. block.style.left = left + "px";
  119. tip.style.left = left + "px";
  120. }
  121. }
  122.  
  123. //鼠标弹起事件
  124. document.onmouseup = function() {
  125. document.onmousemove = null;
  126. //阀值误差为2
  127. if (Math.abs(tip.offsetLeft - shadow.offsetLeft) <= 2) {
  128. alert("成功");
  129. //这里可以做其他事情,比如关闭当前页面,显示验证成功
  130. } else {
  131. block.style.left = 0;
  132. tip.style.left = 0;
  133. add();
  134. }
  135. }
  136.  
  137. //生成坐标
  138. function add() {
  139. //获取随机坐标
  140. var ranX = Math.round(Math.random() * maxWidth);
  141. var ranY = Math.round(Math.random() * maxHeight);
  142.  
  143. shadow.style.left = ranX + "px";
  144. shadow.style.top = ranY + "px";
  145.  
  146. tip.style.top = ranY + "px";
  147. tip.style.backgroundPosition = -ranX + "px " + (-ranY) + "px";
  148. }
  149. window.ondragstart = function() {
  150. return false;
  151. }
  152. </script>
  153. </body>
  154. </html>
欢迎关注订阅我的微信公众平台【熊泽有话说】,更多好玩易学知识等你来取

作者:熊泽-学习中的苦与乐
公众号:熊泽有话说
出处:https://www.cnblogs.com/xiongze520/p/14335527.html


创作不易,转载或者部分转载、摘录,请在文章明显位置注明作者和原文链接。

温习数据算法—js滑块验证码的更多相关文章

  1. 对极验geetest滑块验证码图片还原算法的研究

    免责声明 本文章所提到的技术仅用于学习用途,禁止使用本文章的任何技术进行发起网络攻击.非法利用等网络犯罪行为,一切信息禁止用于任何非法用途.若读者利用文章所提到的技术实施违法犯罪行为,其责任一概由读者 ...

  2. 使用Python + Selenium破解滑块验证码

    在前面一篇博客<使用 Python + Selenium 打造浏览器爬虫>中,我介绍了 Selenium 的基本用法和爬虫开发过程中经常使用的一些小技巧,利用这些写出一个浏览器爬虫已经完全 ...

  3. 使用 Python+Selenium 破解滑块验证码

    ​​开发工具 Python版本:3.6.4 相关模块: pillow模块: selenium模块: numpy模块: 以及一些Python自带的模块. 其他: chromedriver 环境搭建 安装 ...

  4. Vue3+Vue-cli4项目中使用腾讯滑块验证码

    Vue3+Vue-cli4项目中使用腾讯滑块验证码 简介: 滑块验证码相比于传统的图片验证码具有以下优点: 验证码的具体验证不需要服务端去验证,服务端只需要核验验证结果即可. 验证码的实现不需要我们去 ...

  5. Asp.NET Core+ABP框架+IdentityServer4+MySQL+Ext JS之验证码

    验证码这东西,有人喜欢有人不喜欢.对于WebApi是否需要验证码,没去研究过,只是原来的SimpleCMS有,就加上吧. 在WeiApi上使用验证码,关键的地方在于WeiApi是没有状态的,也就是说, ...

  6. js编写验证码

    这是一个简单的js编写的验证码,自己已经亲自验证,没有问题了 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...

  7. Django:之传递数据给JS、Ajax和Ajax CSRF认证

    Django传递数据给JS 有时候我们想把一个list或者dict传递给javascript,处理后显示到网页上,比如要用js进行可视化到数据. 请注意:如果是不处理,直接显示在网页上,用Django ...

  8. 大数据算法->推荐系统常用算法之基于内容的推荐系统算法

    港真,自己一直非常希望做算法工程师,所以自己现在开始对现在常用的大数据算法进行不断地学习,今天了解到的算法,就是我们生活中无处不在的推荐系统算法. 其实,向别人推荐商品是一个很常见的现象,比如我用了一 ...

  9. js简单验证码的生成和验证

    如何用js生成简单验证码,并验证是否正确的方法 1.html页面如下 <div> <table border="0" cellspacing="5&qu ...

随机推荐

  1. Python 炫技操作:安装包的八种方法,你知道吗?

    本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理 1. 使用 easy_install easy_install 这应该是最古老的包安装方式了,目前基 ...

  2. Java与C#

    Java和C#都是编程的语言,它们是两个不同方向的两种语言 相同点: 他们都是面向对象的语言,也就是说,它们都能实现面向对象的思想(封装,继承,多态) 区别: 1.c#中的命名空间是namespace ...

  3. H3C路由器配置——静态路由

    一.网络畅通条件及排错思路 1.网络畅通的条件 网络畅通的条件:数据包能去能回,也是我们排除网络故障的理论依据. 2.网络不畅通示列 ①.目标主机不可达 原因分析:可能是数据包没有到达目的地,在中途就 ...

  4. Nacos(一)源码分析Nacos注册示例流程

    nacos官方地址:https://nacos.io/zh-cn/ 大家可以看一下nacos的中文手册以及官方源码,博主就不带领大家快速入门 了,官方文档中都有而且非常标准,比其他博客写的好多了并且还 ...

  5. java斐波纳契数列

    //斐波纳契数列,又称黄金分割数列,指的是这样一个数列:1.1.2.3.5.8.13.21.-- 这个数列从第三项开始,每一项都等于前两项之和. public class DiGui { public ...

  6. postgresql 函数集合

    1.空间对象字段不建议手动创建,建议使用语句生成空间对象字段,table_name:表名,column_name:生成的列名,3857:坐标系 SELECT AddGeometryColumn ('p ...

  7. JVM初始化类契机

    * 对于初始化只有主动使用类字段时才会初始化<br> * 除非对一个类的主动引用,否则所有引用类的方式都不会触发其初始化<br> * 主动引用有且只有以下场景:<p> ...

  8. Android多线程消息处理机制

    (1)主线程和ANR 主线程:UI线程,界面的修改只能在主线程中,其它线程对界面进行修改会造成异常.这样就解决了多线程竞争UI资源的问题. 一旦主线程的代码阻塞,界面将无法响应,这种行为就是Appli ...

  9. Javascript函数闭包及案例详解

    什么情况下会形成闭包,什么是闭包 闭包(Closure):函数和其周围的状态(词法环境)的引用捆绑在一起形成闭包 可以在另一个作用域中调用一个函数的内部函数并访问到该函数的作用域中的成员 下面来看一个 ...

  10. Logstash学习之路(二)Elasticsearch导入json数据文件

    一.数据从文件导入elasticsearch 1.数据准备: 1.数据文件:test.json 2.索引名称:index 3.数据类型:doc 4.批量操作API:bulk {"index& ...