前言

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

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

存在即合理，合理就是現實的。

源碼下載地址+演示地址

百度網盤源碼下載地址：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滑塊驗證碼

前言

源碼下載地址+演示地址

效果圖GIf

什麼是驗證碼

驗證碼的形式

驗證碼的使用

驗證碼的作用

源碼

自學編程兩個月，現在我月入 4 萬元

「實戰應用」如何用圖表控件LightningChart創建2D氣泡圖

百度安全多篇議題入選Blackhat Asia以硬技術發現“芯”問題

Google Chrome驅動程序 124.0.6367.62（正式版本）去哪下載？

編寫高質量代碼改善程序的157個建議：使用Dynamic來簡化反射的實現

解讀C#編程中最容易忽略7種編寫習慣！

盤點現在用的SqlServer 5種分頁方式和拉姆達表達式分頁，進來看看吧。

對於async和await的使用方式、作用效果不怎麼理解 ?沒關係，初步看這篇就夠了

只會Excel想做圖表可視化，讓數據動起來？可以，快來圍觀啦（附大量模板下載）基於echarts 24種數據可視化展示，填充數據就可用，動手能力強的還可以DIY（演示地址+下載地址）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結