溫習數(shù)據(jù)算法—js滑塊驗證碼

前言

大多數(shù)的應用軟件都需要輸入一些驗證碼，驗證碼的樣式也多種多樣。

比如搶票，提交訂單需要驗證碼，很多人就納悶了，怎么還需要驗證碼呢？這不是浪費時間嘛。

存在即合理，合理就是現(xiàn)實的。

?源碼下載地址+演示地址

百度網(wǎng)盤源碼下載地址：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”（全自動區(qū)分計算機和人類的圖靈測試）的縮寫，是一種區(qū)分用戶是計算機和人的公共全自動程序。

驗證碼的英文CAPTCHA 這個詞最早是在2000年由卡內(nèi)基梅隆大學的Luis von Ahn、Manuel Blum、Nicholas J.Hopper以及IBM的John Langford所提出。

在最初，是不存在驗證碼這個東西的。自己登錄過的網(wǎng)站，有些一開始也是不用驗證碼的，后來慢慢的發(fā)現(xiàn)也有了驗證碼這一稀罕物。

根據(jù)網(wǎng)友所說，最先提出解決人機識別問題的是雅虎，其目的是防止垃圾郵件的轟炸，

它們于是找到了當時年僅21歲的天才Luis von Ahn，這位天才給出的解決方案就是：人類皺皺眉，電腦聳聳肩的驗證碼。

驗證碼的形式

四位數(shù)字和字母，可能都是字母，也可能都是數(shù)字，隨機的4位字符串，最原始的驗證碼，驗證作用幾乎為零。

漢字，QQ網(wǎng)站注冊目前最新的驗證碼，都是漢字，隨機生成。

QQ網(wǎng)站用戶登錄用的是PNG格式，圖片用的隨機數(shù)字+隨機大寫英文字母，整個構圖有點張揚，每刷新一次,每個字符還會變位置呢！有時候出來的圖片，人眼都識別不了。（PS：這個人眼都識別不了的驗證碼，我可是深有體會，曾經(jīng)為了干一件事，結果很長很長的時間，都在那兒趴著看驗證碼了。）

MS的hotmail申請時候的是BMP格式。 隨機數(shù)字+隨機大寫英文字母+隨機干擾像素+隨機位置。?

韓文或日文。這玩意兒，我真正接觸的還是付費，發(fā)送到手機上的驗證碼是一些字符，然后電腦付費界面上是很多字符，讓正確輸入才能從卡里支出金額。（PS：雖然麻煩了點，但保險的說。）

問題驗證碼：問題驗證碼主要是以問答式的形式來進行填寫。它的查看比加模驗證碼更容易辨別和錄入，系統(tǒng)可以生成諸如“1+2=？”的問題讓用戶進行回答，當然這樣的問題是隨機生成的。另一種問題驗證碼，則是文字式的問題驗證碼，諸如生成問題“中國的全稱是什么？”，當然有些網(wǎng)站還在問題后面給出了提示答案或直接答案。（PS：CSDN上用的就是1+2=？式滴，話說有幾回看不清，我還沒答對呢。）

視頻驗證碼。高技術含量的東東，沒能普及。

驗證碼的使用

大多數(shù)網(wǎng)站的驗證碼都是需要點擊一下填寫框，然后會自動彈出驗證碼圖片。

由于驗證碼是隨機產(chǎn)生的，有很大幾率會出現(xiàn)無法清楚識別的驗證碼圖片，所以需要注意的是，一般網(wǎng)站都會有相應的提示，如“看不清，換一張”等，如果沒有提示，

則直接點擊當前的驗證碼圖片，可以完成驗證碼的更換。

我們這里展示的是滑塊驗證，滑塊驗證碼是一種很常見的行為驗證碼，用戶只需要輕輕滑動滑塊填充拼圖，即可完成安全驗證。

通常包括觸發(fā)式、嵌入式和彈出式三種形式。


驗證碼的作用

防止惡意破解密碼、刷票、論壇灌水，也有效防止某個黑客對某一個特定注冊用戶用特定程序暴力破解方式進行不斷的登陸嘗試。

防止：惡意破解密碼、刷票、論壇灌水

? ? ? 有效防止某個黑客對某一個特定注冊用戶用特定程序暴力破解方式進行不斷的登陸嘗試，實際上是用驗證碼是現(xiàn)在很多網(wǎng)站通行的

方式（比如招商銀行的網(wǎng)上個人銀行，百度社區(qū)），我們利用比較簡易的方式實現(xiàn)了這個功能。雖然登陸麻煩一點，但是對網(wǎng)友的密

碼安全還來說這個功能還是很有必要，也很重要。但我們還是提醒大家主要保護自己的密碼 ， 盡量使用混雜了數(shù)字、字母、符號在

內(nèi)的6位以上密碼，不要使用諸如1234之類的簡單密碼或者與用戶名相同、類似的密碼 ，免得你的賬號給人盜用給自己帶來不必要的

麻煩。

? ? ?驗證碼一般是防止批量注冊的，人眼看起來都費勁，何況是機器。二像百度貼吧未登錄發(fā)貼要輸入驗證碼大概是防止大規(guī)模匿名

回帖的發(fā)生。目前，不少網(wǎng)站為了防止用戶利用機器人自動注冊、登錄、灌水，都采用了驗證碼技術。所謂驗證碼，就是將一串隨機

產(chǎn)生的數(shù)字或符號，生成一幅圖片， 圖片里加上一些干擾，例如隨機畫數(shù)條直線，畫一些點（防止OCR），由用戶肉眼識別其中的

驗證碼信息，輸入表單提交網(wǎng)站驗證，驗證成功后才能使用某項功能。

一般注冊用戶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>


歡迎關注訂閱我的微信公眾平臺【熊澤有話說】，更多好玩易學知識等你來取

作者：熊澤-學習中的苦與樂

公眾號：熊澤有話說

創(chuàng)作不易，轉(zhuǎn)載或者部分轉(zhuǎn)載、摘錄，請在文章明顯位置注明作者和原文鏈接。?

?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容