直播平臺軟體開發，前端實現登入拼圖驗證

直播平臺軟體開發，前端實現登入拼圖驗證

搭建框架

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

// css
 
<style>
    .check{
            width: 400px;
            height: 300px;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-image: url();
        }
</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;
    }

 新增拖動條

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

我們先新增一個拖動區域。

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

以上就是直播平臺軟體開發，前端實現登入拼圖驗證， 更多內容歡迎關注之後的文章