記錄--前端實現登錄拼圖驗證

来源:https://www.cnblogs.com/smileZAZ/archive/2023/02/14/17120439.html
-Advertisement-
Play Games

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 前言 不知各位朋友現在在web端進行登錄的時候有沒有註意一個變化，以前登錄的時候是直接賬號密碼通過就可以直接登錄，再後來圖形驗證碼，數字結果運算驗證，到現在的拼圖驗證。這一系列的轉變都是為了防止機器操作，但對於我們來說，有億點麻煩，但也沒 ...


這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

前言

不知各位朋友現在在web端進行登錄的時候有沒有註意一個變化，以前登錄的時候是直接賬號密碼通過就可以直接登錄，再後來圖形驗證碼，數字結果運算驗證，到現在的拼圖驗證。這一系列的轉變都是為了防止機器操作，但對於我們來說，有億點麻煩，但也沒辦法呀。

今天我們也一起來做一個製造億點麻煩的人，實現一個拼圖驗證。

實現原理

這個實現原理並不複雜，我們只需要一張圖作為我們的拼接素材，我們再單獨弄一個盒子，然後移動它，到我們的指定位置，到達指定範圍內即驗證通過，反之驗證未通過。

既然原理我們知道了，那我們就開乾吧。

實現前端登錄拼圖驗證

本篇文章以 css 為主， javascript為輔實現。

搭建框架

我們要實現這個功能，我們需要先搭建出來一個框架。

// css

<style>
    .check{
            width: 400px;
            height: 300px;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-image: url(https://img0.baidu.com/it/u=2028084904,3939052004&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500);
        }
</style>

// html

<div class="check"></div>

我們畫出來後，它就長下麵圖這樣。

添加被校驗區域及校驗區域

我們需要添加一個被校驗的區域及校驗區域，用來做我們的校驗，像下圖這兩個東西。

這裡我們使用偽類來實現這兩個區域。

校驗區域

    .check::before{
            content: '';
            width: 50px;
            height: 50px;
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid #fff;
            position: absolute;
            top: 100px;
            left: 280px;
    }

這樣一個校驗區域就做好了。

被校驗區域

這裡我們需要使用到background-position根據我們的校驗區域大小進行切出我們的被校驗區域。

background-image和background-repeat我們直接繼承，background-position設置為校驗區域的坐標位置（也就是距離top和left的距離），我們將background-size圖片大小設為原盒子的大小。這樣我們就得到了校驗區域的那一片區域，也就是我們的被校驗區域了。

    .check-child{
            content: '';
            width: 50px;
            height: 50px;
            border: 1px solid #fff;
            background-image: inherit;
            background-repeat: inherit;
            background-size: 400px 300px;
            background-position: -280px -100px;
            position: absolute;
            top: 100px;
            left: 10px;
    }
    
    // html
    
    <!-- 被校驗區域 -->
    <div class="check-child"></div>

添加拖動條

這裡我們兩個區域都添加完了，我們需要添加一個拖動條。

我們先添加一個拖動區域。

    // css
    .drag{
            width: 400px;
            height: 50px;
            background-color: #e3e3e3;
            margin-top: 10px;
            position: relative;
    }
    
    // html
    <div class="drag"></div>

現在拖動區域有了，我們需要在拖動區域內添加一個可拖動的盒子，及操作說明，不然看起來交互效果不友好。

添加可拖動的盒子及交互說明

我們添加一個可以拖動的盒子。

    // css
    
    .drag-child{
        width: 50px;
        height: 50px;
        background-color: aquamarine;
        z-index: 10;
        position: absolute;
        top: 0;
        left: 0;
    }
    
    // html
    
    <!-- 可拖動的盒子 -->
    <div class="drag-child"></div>

 為了我們友好的交互，我們在拖動區域內給他添加操作說明。

    // css
    
    .drag-tips{
        display: flex;
        align-items: center;
        justify-content: end;
        width: 95%;
        height: 100%;
        margin: 0 auto;
        font-size: 12px;
        color: #8a8a8a;
    }
    
    // html
    
    <!-- 可拖動的盒子 -->
    <div class="drag-tips">
        <span>按住左邊按鈕向右拖動完成上方圖像驗證</span>
    </div>

拖動條動起來

這一步我們需要讓我們的拖動盒子動起來，讓他可以在拖動區域內隨意的左右拖動。

    // 獲取元素實例
    const drag = document.querySelector('.drag-child')

    // 聲明滑鼠按下事件
    const dragMouseDown = event => {
        // 添加滑鼠移動事件
        document.addEventListener('mousemove', dragMouseMove)
    }
    // 監聽滑鼠移動事件
    const dragMouseMove = event => {
        // 獲取當前 x 軸坐標
        const { offsetX } = event
        if(offsetX < 0 || offsetX > 350){
            return
        }
        // 修改可移動盒子的 x 軸坐標
        drag.style.transform = `translateX(${offsetX}px)`
    }
    // 結束滑鼠監聽事件
    const dragMouseUP = event => {
        // 移除滑鼠移動事件
        document.removeEventListener('mousemove', dragMouseMove)
    }

    // 添加滑鼠按下事件
    document.addEventListener('mousedown', dragMouseDown)
    // 添加滑鼠彈起事件
    document.addEventListener('mouseup', dragMouseUP)

現在我們的盒子就可以正常的拖動了，但現在它還有幾個問題，我們後面來解決。

  1. 提示文字會被選中；
  2. 在拖動區域內拖動會閃爍；

聯動被校驗區域

我們先讓被校驗區域跟著我們的拖動動起來。

    // 圖形校驗
    const check = document.querySelector('.check-child')
    
    // 修改被校驗區域坐標
    check.style.left = `${offsetX}px`

這樣我們的被校驗區域就能夠跟著動了，我們聲明一個方法用來表示，通過校驗的回調。

    // 通過校驗回調
    const success = () => {
        console.log('通過校驗');
    }
    
    // 監聽滑鼠移動事件
    const dragMouseMove = event => {
        // 獲取當前 x 軸坐標
        const { offsetX } = event
        if(offsetX < 0 || offsetX > 350){
            return
        }
        // 修改可移動盒子的 x 軸坐標
        drag.style.transform = `translateX(${offsetX}px)`
        
        // 修改被校驗區域坐標
        check.style.transform = `translateX(${offsetX}px)`

        if(offsetX >= 278 && offsetX <= 285){
            // 執行回調
            success()
        }
    }

添加交互動畫

這裡我們在滑鼠移出監聽的時候添加一個動畫，噹噹前未通過校驗的時候我們給他還原到初始位置。

@keyframes move {
    to {
        transform: translateX(0);
    }
}
    // 結束滑鼠監聽事件
    const dragMouseUP = event => {
        // 移除滑鼠移動事件
        document.removeEventListener('mousemove', dragMouseMove)

        // 獲取當前 x 軸坐標
        const { offsetX } = event

        if(offsetX < 278 || offsetX > 285){
            // 修改可移動盒子的 x 軸坐標
            drag.style.animation = 'move 0.5s ease-in-out'
            // 修改被校驗區域坐標
            check.style.animation = 'move 0.5s ease-in-out'
            
            // 動畫結束監聽回調
            const animationEnd = ()=>{
                // 修改可移動盒子的 x 軸坐標
                drag.style.transform = `translateX(${0}px)`
                // 修改被校驗區域坐標
                check.style.transform = `translateX(${0}px)`

                // 清除動畫屬性
                drag.style.animation = ''
                check.style.animation = ''
                // 移出動畫結束監聽
                document.removeEventListener("animationend", animationEnd)
            }
            // 添加動畫結束監聽
            document.addEventListener("animationend", animationEnd)
        }
    }

當我們未通過校驗，且放開滑鼠的時候，它就會自動回到初始位置。

解決遺留問題

1、 提示文字會被選中

我們在提示文字的樣式中添加user-select: none;，禁用掉文字選擇。

    /* 提示文字說明 */
    .drag-tips{
        display: flex;
        align-items: center;
        justify-content: end;
        width: 95%;
        height: 100%;
        margin: 0 auto;
        font-size: 12px;
        color: #8a8a8a;
        user-select: none;
        z-index: 1;
        position: absolute;
        top: 0;
        left: 0;

    }

2、 在拖動區域內拖動會閃爍

我們將我們剛剛使用的offsetX改為pageX。這裡需要註意一下邊距偏移量的問題哦。

    // 監聽滑鼠移動事件
    const dragMouseMove = event => {
        console.log(event);
        // 獲取當前 x 軸坐標
        const { pageX }  = event
        if(pageX < 0 || pageX > 350){
            return
        }
        // 修改可移動盒子的 x 軸坐標
        drag.style.transform = `translateX(${pageX}px)`
        
        // 修改被校驗區域坐標
        check.style.transform = `translateX(${pageX}px)`

        if(pageX >= 278 && pageX <= 285){
            // 執行回調
            success()
        }
    }
    // 結束滑鼠監聽事件
    const dragMouseUP = event => {
        // 移除滑鼠移動事件
        document.removeEventListener('mousemove', dragMouseMove)

        // 獲取當前 x 軸坐標
        const { pageX } = event

        if(pageX < 278 || pageX > 285){
            // 修改可移動盒子的 x 軸坐標
            drag.style.animation = 'move 0.5s ease-in-out'
            // 修改被校驗區域坐標
            check.style.animation = 'move 0.5s ease-in-out'
            
            // 動畫結束監聽回調
            const animationEnd = ()=>{
                // 修改可移動盒子的 x 軸坐標
                drag.style.transform = `translateX(${0}px)`
                // 修改被校驗區域坐標
                check.style.transform = `translateX(${0}px)`

                // 清除動畫屬性
                drag.style.animation = ''
                check.style.animation = ''
                // 移出動畫結束監聽
                document.removeEventListener("animationend", animationEnd)
            }
            // 添加動畫結束監聽
            document.addEventListener("animationend", animationEnd)
        }
    }

效果圖

我們看一下效果圖。

完整代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>drag</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        body{
            padding: 20px;
        }

        /* 圖形拼圖驗證碼 */
        .check{
            width: 400px;
            height: 300px;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-image: url(https://img0.baidu.com/it/u=2028084904,3939052004&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500);
            position: relative;
        }

        .check::before{
            content: '';
            width: 50px;
            height: 50px;
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid #fff;
            position: absolute;
            top: 100px;
            left: 280px;
        }

        .check-child{
            content: '';
            width: 50px;
            height: 50px;
            border: 1px solid #fff;
            background-image: inherit;
            background-repeat: inherit;
            background-size: 400px 300px;
            background-position: -280px -100px;
            position: absolute;
            top: 100px;
            left: 0;
        }
        /* 拖動條 */
        .drag{
            width: 400px;
            height: 50px;
            background-color: #e3e3e3;
            margin-top: 10px;
            position: relative;
        }
        /* 可拖動的盒子 */
        .drag-child{
            width: 50px;
            height: 50px;
            background-color: aquamarine;
            z-index: 10;
            position: absolute;
            top: 0;
            left: 0;
        }
        /* 提示文字說明 */
        .drag-tips{
            display: flex;
            align-items: center;
            justify-content: end;
            width: 95%;
            height: 100%;
            margin: 0 auto;
            font-size: 12px;
            color: #8a8a8a;
            user-select: none;
            z-index: 1;
            position: absolute;
            top: 0;
            left: 0;

        }

        @keyframes move {
            to {
                transform: translateX(0);
            }
        }
    </style>
</head>
<body>
    <!-- 圖形校驗區域 -->
    <div class="check">
        <!-- 被校驗區域 -->
        <div class="check-child"></div>
    </div>
    <!-- 拖動條 -->
    <div class="drag">
        <!-- 操作說明 -->
        <div class="drag-tips">
            <span>按住左邊按鈕向右拖動完成上方圖像驗證</span>
        </div>
        <!-- 可拖動的盒子 -->
        <div class="drag-child"></div>
    </div>
</body>
<script>
    // 獲取元素實例
    const drag = document.querySelector('.drag-child')

    // 圖形被校驗區域
    const check = document.querySelector('.check-child')

    // 通過校驗回調
    const success = () => {
        console.log('通過校驗');
    }

    // 聲明滑鼠按下事件
    const dragMouseDown = event => {
        // 添加滑鼠移動事件
        document.addEventListener('mousemove', dragMouseMove)
    }
    // 監聽滑鼠移動事件
    const dragMouseMove = event => {
        // 獲取當前 x 軸坐標
        const { pageX }  = event
        if(pageX < 0 || pageX > 350){
            return
        }
        // 修改可移動盒子的 x 軸坐標
        drag.style.transform = `translateX(${pageX}px)`
        
        // 修改被校驗區域坐標
        check.style.transform = `translateX(${pageX}px)`

        if(pageX >= 278 && pageX <= 285){
            // 執行回調
            success()
        }
    }
    // 結束滑鼠監聽事件
    const dragMouseUP = event => {
        // 移除滑鼠移動事件
        document.removeEventListener('mousemove', dragMouseMove)

        // 獲取當前 x 軸坐標
        const { pageX } = event

        if(pageX < 278 || pageX > 285){
            // 修改可移動盒子的 x 軸坐標
            drag.style.animation = 'move 0.5s ease-in-out'
            // 修改被校驗區域坐標
            check.style.animation = 'move 0.5s ease-in-out'
            
            // 動畫結束監聽回調
            const animationEnd = ()=>{
                // 修改可移動盒子的 x 軸坐標
                drag.style.transform = `translateX(${0}px)`
                // 修改被校驗區域坐標
                check.style.transform = `translateX(${0}px)`

                // 清除動畫屬性
                drag.style.animation = ''
                check.style.animation = ''
                // 移出動畫結束監聽
                document.removeEventListener("animationend", animationEnd)
            }
            // 添加動畫結束監聽
            document.addEventListener("animationend", animationEnd)
        }
    }

    // 添加滑鼠按下事件
    document.addEventListener('mousedown', dragMouseDown)
    // 添加滑鼠彈起事件
    document.addEventListener('mouseup', dragMouseUP)


</script>
</html>

本文轉載於：

https://juejin.cn/post/7175818459379417146

如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • MRS+LakeFormation：打造一站式湖倉，釋放數據價值
    摘要：華為LakeFormation是企業級的一站式湖倉構建服務。 本文分享自華為雲社區《華為雲MRS支持LakeFormation能力,打造一站式湖倉，釋放數據價值】》，作者：breakDawn 。 1 背景 1.1 數倉和數據湖的概念 數據分析技術在2010~2019年間，以湖倉兩層架構技術作為 ...
  • 新增或修改mysql表欄位--可重覆執行腳本
    想必大家在版本更新迭代中，不免需要對資料庫表的欄位進行修改欄位類型或者長度的情況， 如果是修改存儲過程或者自定義函數, 那還是很好改的, 不用擔心表功能收到影響. 如果是改欄位呢? 首先要判斷欄位是不是已經在系統裡面, 沒有的話, 需要新增上去, 有的話, 需不需要修改? 其次, 腳本如果報錯, 是 ...
  • 倒帶ChunJun，同心前行｜2022年度回顧&2023年共建規劃
    ChunJun是一個開始於2018年的批流一體數據集成框架項目，原名FlinkX。2022年2月22日，在FlinkX進行初版開源的整整四年後，技術團隊決定對FlinkX進行整體升級，並更名為ChunJun，希望為大家真正提供一個穩定、高效、易用的批流一體的數據集成框架。 2022年的ChunJun ...
  • GaussDB(DWS)性能調優：indexscan導致的性能問題識別與優化
    摘要：通常跑批加工場景下，都是大數量做關聯操作，通常不建議使用索引。有些時候因為計劃誤判導致使用索引的可能會導致嚴重的性能問題。本文從一個典型的索引導致性能的場景重發，剖析此類問題的特征，定位方法和解決方法 本文分享自華為雲社區《GaussDB(DWS)性能調優：indexscan導致的性能問題識別 ...
  • Redis避坑指南：為什麼要有分散式鎖？
    JUC提供的鎖機制，可以保證在同一個JVM進程中同一時刻只有一個線程執行操作邏輯； 多服務多節點的情況下，就意味著有多個JVM進程，要做到這樣，就需要有一個中間人； 分散式鎖就是用來保證在同一時刻，僅有一個JVM進程中的一個線程在執行操作邏輯； 換句話說，JUC的鎖和分散式鎖都是一種保護系統資... ...
  • ClickHouse 查詢優化詳細介紹
    你想要的 ClickHouse 優化，都在這裡。 ClickHouse 是 OLAP（Online analytical processing）資料庫，以速度見長[1]。ClickHouse 為什麼能這麼快？有兩點原因[2]： 架構優越 列式存儲 索引 數據壓縮 向量化執行 資源利用 關註底層細節... ...
  • mysql 日誌種類
    mysql日誌種類 錯誤日誌 二進位日誌 查詢日誌 慢查詢日誌 日誌 錯誤日誌 錯誤日誌是mysql中最重要的日誌之一，它記錄了當mysqld啟動和停止時，以及伺服器在運行過程中發生任何嚴重錯誤時的相關信息，當資料庫出現任何故障導致無法正常使用時，建議首先查看此日誌。 該日誌是預設開啟的，預設存放目 ...
  • 函數式編程：Flutter&Dart中的組合
    本文翻譯自: Composition in Flutter & Dart 在 Flutter & Dart 中使用組合創建模塊化應用程式。 什麼是組合？ 在dictionary.com 中 composition 的定義為：將部分或者元素組合成一個整體的行為。簡單說，組合就像堆樂高積木，我們可以將積 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類