溫習資料演算法—js滑塊驗證碼

學習中的苦與樂發表於2021-01-28
演算法JS

前言

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

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

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

 原始碼下載地址+演示地址

百度網盤原始碼下載地址：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的地方以及各大論壇都要輸入驗證碼。

 

原始碼

直接拷貝即可使用

<!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
創作不易，轉載或者部分轉載、摘錄，請在文章明顯位置註明作者和原文連結。  

 

相關文章