前言
大多數(shù)的應(yīng)用軟件都需要輸入一些驗(yàn)證碼，驗(yàn)證碼的樣式也多種多樣。
比如搶票，提交訂單需要驗(yàn)證碼，很多人就納悶了，怎么還需要驗(yàn)證碼呢？這不是浪費(fèi)時(shí)間嘛。
存在即合理，合理就是現(xiàn)實(shí)的。
?源碼下載地址+演示地址
百度網(wǎng)盤源碼下載地址：https://pan.baidu.com/s/1l4ym4jsqEk1gRJTWTve6Gw
提取碼：xion?
在線演示地址：http://www.xiongze.net/yanzheng/index.html
?效果圖GIf
?什么是驗(yàn)證碼
驗(yàn)證碼（CAPTCHA）：是“Completely Automated Public Turing test to tell Computers and Humans Apart”（全自動(dòng)區(qū)分計(jì)算機(jī)和人類的圖靈測(cè)試）的縮寫，是一種區(qū)分用戶是計(jì)算機(jī)和人的公共全自動(dòng)程序。
驗(yàn)證碼的英文CAPTCHA 這個(gè)詞最早是在2000年由卡內(nèi)基梅隆大學(xué)的Luis von Ahn、Manuel Blum、Nicholas J.Hopper以及IBM的John Langford所提出。
在最初，是不存在驗(yàn)證碼這個(gè)東西的。自己登錄過(guò)的網(wǎng)站，有些一開始也是不用驗(yàn)證碼的，后來(lái)慢慢的發(fā)現(xiàn)也有了驗(yàn)證碼這一稀罕物。
根據(jù)網(wǎng)友所說(shuō)，最先提出解決人機(jī)識(shí)別問(wèn)題的是雅虎，其目的是防止垃圾郵件的轟炸，
它們于是找到了當(dāng)時(shí)年僅21歲的天才Luis von Ahn，這位天才給出的解決方案就是：人類皺皺眉，電腦聳聳肩的驗(yàn)證碼。
驗(yàn)證碼的形式
四位數(shù)字和字母，可能都是字母，也可能都是數(shù)字，隨機(jī)的4位字符串，最原始的驗(yàn)證碼，驗(yàn)證作用幾乎為零。
漢字，QQ網(wǎng)站注冊(cè)目前最新的驗(yàn)證碼，都是漢字，隨機(jī)生成。
QQ網(wǎng)站用戶登錄用的是PNG格式，圖片用的隨機(jī)數(shù)字+隨機(jī)大寫英文字母，整個(gè)構(gòu)圖有點(diǎn)張揚(yáng)，每刷新一次,每個(gè)字符還會(huì)變位置呢！有時(shí)候出來(lái)的圖片，人眼都識(shí)別不了。（PS：這個(gè)人眼都識(shí)別不了的驗(yàn)證碼，我可是深有體會(huì)，曾經(jīng)為了干一件事，結(jié)果很長(zhǎng)很長(zhǎng)的時(shí)間，都在那兒趴著看驗(yàn)證碼了。）
MS的hotmail申請(qǐng)時(shí)候的是BMP格式。 隨機(jī)數(shù)字+隨機(jī)大寫英文字母+隨機(jī)干擾像素+隨機(jī)位置。?
韓文或日文。這玩意兒，我真正接觸的還是付費(fèi)，發(fā)送到手機(jī)上的驗(yàn)證碼是一些字符，然后電腦付費(fèi)界面上是很多字符，讓正確輸入才能從卡里支出金額。（PS：雖然麻煩了點(diǎn)，但保險(xiǎn)的說(shuō)。）
問(wèn)題驗(yàn)證碼：?jiǎn)栴}驗(yàn)證碼主要是以問(wèn)答式的形式來(lái)進(jìn)行填寫。它的查看比加模驗(yàn)證碼更容易辨別和錄入，系統(tǒng)可以生成諸如“1+2=？”的問(wèn)題讓用戶進(jìn)行回答，當(dāng)然這樣的問(wèn)題是隨機(jī)生成的。另一種問(wèn)題驗(yàn)證碼，則是文字式的問(wèn)題驗(yàn)證碼，諸如生成問(wèn)題“中國(guó)的全稱是什么？”，當(dāng)然有些網(wǎng)站還在問(wèn)題后面給出了提示答案或直接答案。（PS：CSDN上用的就是1+2=？式滴，話說(shuō)有幾回看不清，我還沒(méi)答對(duì)呢。）
視頻驗(yàn)證碼。高技術(shù)含量的東東，沒(méi)能普及。
驗(yàn)證碼的使用
大多數(shù)網(wǎng)站的驗(yàn)證碼都是需要點(diǎn)擊一下填寫框，然后會(huì)自動(dòng)彈出驗(yàn)證碼圖片。
由于驗(yàn)證碼是隨機(jī)產(chǎn)生的，有很大幾率會(huì)出現(xiàn)無(wú)法清楚識(shí)別的驗(yàn)證碼圖片，所以需要注意的是，一般網(wǎng)站都會(huì)有相應(yīng)的提示，如“看不清，換一張”等，如果沒(méi)有提示，
則直接點(diǎn)擊當(dāng)前的驗(yàn)證碼圖片，可以完成驗(yàn)證碼的更換。
我們這里展示的是滑塊驗(yàn)證，滑塊驗(yàn)證碼是一種很常見(jiàn)的行為驗(yàn)證碼，用戶只需要輕輕滑動(dòng)滑塊填充拼圖，即可完成安全驗(yàn)證。
通常包括觸發(fā)式、嵌入式和彈出式三種形式。
驗(yàn)證碼的作用
防止惡意破解密碼、刷票、論壇灌水，也有效防止某個(gè)黑客對(duì)某一個(gè)特定注冊(cè)用戶用特定程序暴力破解方式進(jìn)行不斷的登陸嘗試。
防止：惡意破解密碼、刷票、論壇灌水
? ? ? 有效防止某個(gè)黑客對(duì)某一個(gè)特定注冊(cè)用戶用特定程序暴力破解方式進(jìn)行不斷的登陸嘗試，實(shí)際上是用驗(yàn)證碼是現(xiàn)在很多網(wǎng)站通行的
方式（比如招商銀行的網(wǎng)上個(gè)人銀行，百度社區(qū)），我們利用比較簡(jiǎn)易的方式實(shí)現(xiàn)了這個(gè)功能。雖然登陸麻煩一點(diǎn)，但是對(duì)網(wǎng)友的密
碼安全還來(lái)說(shuō)這個(gè)功能還是很有必要，也很重要。但我們還是提醒大家主要保護(hù)自己的密碼 ， 盡量使用混雜了數(shù)字、字母、符號(hào)在
內(nèi)的6位以上密碼，不要使用諸如1234之類的簡(jiǎn)單密碼或者與用戶名相同、類似的密碼 ，免得你的賬號(hào)給人盜用給自己帶來(lái)不必要的
麻煩。
? ? ?驗(yàn)證碼一般是防止批量注冊(cè)的，人眼看起來(lái)都費(fèi)勁，何況是機(jī)器。二像百度貼吧未登錄發(fā)貼要輸入驗(yàn)證碼大概是防止大規(guī)模匿名
回帖的發(fā)生。目前，不少網(wǎng)站為了防止用戶利用機(jī)器人自動(dòng)注冊(cè)、登錄、灌水，都采用了驗(yàn)證碼技術(shù)。所謂驗(yàn)證碼，就是將一串隨機(jī)
產(chǎn)生的數(shù)字或符號(hào)，生成一幅圖片， 圖片里加上一些干擾，例如隨機(jī)畫數(shù)條直線，畫一些點(diǎn)（防止OCR），由用戶肉眼識(shí)別其中的
驗(yàn)證碼信息，輸入表單提交網(wǎng)站驗(yàn)證，驗(yàn)證成功后才能使用某項(xiàng)功能。
一般注冊(cè)用戶ID的地方以及各大論壇都要輸入驗(yàn)證碼。
源碼
直接拷貝即可使用
<!doctype html>
<html>
<head>
? ? <meta charset="utf-8">
? ? <title>js滑動(dòng)驗(yàn)證</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;
? ? ? ? }
? ? ? ? /*滑動(dòng)塊樣式*/
? ? ? ? #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;
? ? ? ? }
? ? ? ? /*實(shí)體陰影塊樣式*/
? ? ? ? #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>
? ? ? ? ? ? <!--實(shí)體陰影塊-->
? ? ? ? ? ? <div id="tip"></div>
? ? ? ? </div>
? ? ? ? <!--滑動(dòng)塊-->
? ? ? ? <div id="block"></div>
? ? ? ? <p>拖動(dòng)滑塊驗(yàn)證 >>></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";
? ? ? ? //鼠標(biāo)按下事件
? ? ? ? block.onmousedown = function(e) {
? ? ? ? ? ? var ev = event || e;
? ? ? ? ? ? var startX = ev.x;
? ? ? ? ? ? //鼠標(biāo)滑動(dòng)事件
? ? ? ? ? ? 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;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? //設(shè)置滑動(dòng)塊的位置
? ? ? ? ? ? ? ? block.style.left = left + "px";
? ? ? ? ? ? ? ? tip.style.left = left + "px";
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? //鼠標(biāo)彈起事件
? ? ? ? document.onmouseup = function() {
? ? ? ? ? ? document.onmousemove = null;
? ? ? ? ? ? //閥值誤差為2
? ? ? ? ? ? if (Math.abs(tip.offsetLeft - shadow.offsetLeft) <= 2) {
? ? ? ? ? ? ? ? alert("成功");
? ? ? ? ? ? ? ? //這里可以做其他事情，比如關(guān)閉當(dāng)前頁(yè)面，顯示驗(yàn)證成功
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? block.style.left = 0;
? ? ? ? ? ? ? ? tip.style.left = 0;
? ? ? ? ? ? ? ? add();
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? //生成坐標(biāo)
? ? ? ? function add() {
? ? ? ? ? ? //獲取隨機(jī)坐標(biāo)
? ? ? ? ? ? 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>
歡迎關(guān)注訂閱我的微信公眾平臺(tái)【熊澤有話說(shuō)】，更多好玩易學(xué)知識(shí)等你來(lái)取
作者：熊澤-學(xué)習(xí)中的苦與樂(lè)
公眾號(hào)：熊澤有話說(shuō)
創(chuàng)作不易，轉(zhuǎn)載或者部分轉(zhuǎn)載、摘錄，請(qǐng)?jiān)谖恼旅黠@位置注明作者和原文鏈接。?
