前言
大多數的應用軟體都需要輸入一些驗證碼，驗證碼的樣式也多種多樣，
比如搶票，提交訂單需要驗證碼，很多人就納悶了，怎么還需要驗證碼呢？這不是浪費時間嘛，
存在即合理，合理就是現實的，
原始碼下載地址+演示地址
百度網盤原始碼下載地址：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://www.cnblogs.com/xiongze520/p/"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 創作不易，轉載或者部分轉載、摘錄，請在文章明顯位置注明作者和原文鏈接，
|
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/253892.html
標籤：JavaScript
上一篇：建構式模式
下一篇：原型模式