聊天平台源码，登录时拼图验证

聊天平台源码，登录时拼图验证实现的相关代码

<!DOCTYPE html><br><html><br><head><br>    <meta charset="UTF-8"><br>    <meta http-equiv="X-UA-Compatible" content="IE=edge"><br>    <meta name="viewport" content="width=device-width, initial-scale=1.0"><br>    <style><br>        body {<br>            display: flex;<br>            justify-content: center;<br>            align-items: center;<br>            min-height: 100vh;<br>        }<br>        #captcha {<br>            display: block;<br>            width: var(--width);<br>            height: var(--height);<br>            border-radius: 4px;<br>            background-image: url(https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2676921178,3792372773&fm=55&app=54&f=JPEG?w=1680&h=630);<br>            background-size: cover;<br>            background-position: center;<br>            box-shadow: 0 2px 4px rgba(0, 0, 0, .3);<br>            position: relative;<br>            box-sizing: border-box;<br>        }<br>        #captcha::before,<br>        #captcha::after {<br>            position: absolute;<br>            content: "";<br>            display: block;<br>            width: inherit;<br>            height: inherit;<br>            background-image: inherit;<br>            background-size: inherit;<br>            background-position: inherit;<br>            clip-path: var(--clip-path);<br>            --webkit-clip-path: var(--clip-path);<br>        }<br>        #captcha::after {<br>            transform: translateX(calc(var(--clip-offsetX) * -1 + var(--moved)));<br>            transition: .25s all ease-in-out;<br>        }<br>        #captcha::before {<br>            <br>            background-blend-mode: multiply;<br>        }<br>        #captcha:active #handle span,<br>        #captcha:active::after {<br>            transition: none;<br>        }<br>        #captcha #handle {<br>            width: calc(var(--width) - (3px * 2));<br>            height: 30px;<br>            border-radius: 18px;<br>            background-color: #eee;<br>            position: absolute;<br>            bottom: -50px;<br>            left: 0;<br>            box-shadow: inset 0 0 12px rgba(0, 0, 0, .2);<br>            border: 3px solid #ccc;<br>        }<br>        #handle span {<br>            display: block;<br>            width: var(--puzzle-width);<br>            height: inherit;<br>            border-radius: inherit;<br>            background-color: #fff;<br>            box-shadow: inset 0 0 6px rgba(0, 0, 0, .25), 0 2px 4px rgba(0, 0, 0, .3);<br>            position: absolute;<br>            cursor: move;<br>            transform: translateX(var(--moved));<br>            transition: .25s all ease-in-out;<br>        }<br>        #captcha.passed #handle,<br>        #captcha.passed::after,<br>        #captcha.passed::before {<br>            opacity: 0;<br>        }<br>    </style><br></head><br><body><br>    <div id="captcha"><br>        <div id="handle"><br>            <span></span><br>        </div><br>    </div><br>    <script><br>        let width = 400;        // 宽度<br>        let height = 260;       // 高度<br>        let puzzleWidth = 80;   // 切图宽<br>        let puzzleHeight = 80;  // 切图高<br>        let moved = 0;          // 移动位置<br>        let mpe = 5;            // 允许最大误差<br>        let offsetX = 6;        // 边距值  <br>        let offsetY = 0;        // 边距值 <br>        let shouldMove = false;<br>        <br>        let clipRectX1 = randomRange(puzzleWidth + offsetX, width - puzzleWidth - offsetX);<br>        let clipRectX2 = clipRectX1 + puzzleWidth;<br>        let clipRectY1 = randomRange(puzzleHeight + offsetX, height - puzzleHeight - offsetY);<br>        let clipRectY2 = clipRectY1 + puzzleHeight;<br>        let captcha = document.querySelector('#captcha');<br>        let handle = document.querySelector('#handle');<br>        let button = document.querySelector('#handle span');<br>        button.addEventListener("mousedown", (e) => {<br>            shouldMove = true;<br>        })<br>        window.addEventListener("mousemove", (e) => {<br>            if (shouldMove) {<br>                const offsetLeft = handle.getBoundingClientRect().left;<br>                const buttonWidth = button.getBoundingClientRect().width;<br>                moved = e.clientX - offsetLeft - buttonWidth / 2;<br>                render();<br>            }<br>        })<br>        window.addEventListener("mouseup", (e) => {<br>            if (shouldMove) {<br>                const finalOffset = e.clientX - handle.getBoundingClientRect().left - puzzleWidth / 2;<br>                if (Math.abs(finalOffset - clipRectX1) < mpe) captcha.classList.add('passed')<br>                else moved = 0;<br>                render();<br>                shouldMove = false;<br>            }<br>        })<br>        /**<br>         * 超出省略<br>         */<br>        function clamp(num, a, b) {<br>            return Math.max(Math.min(num, Math.max(a, b)), Math.min(a, b))<br>        }<br>        /**<br>         * 随机数字<br>         */<br>        function randomRange(min, max) {<br>            return Math.round(Math.random() * (max - min)) + min<br>        }<br>        /**<br>         *  渲染<br>         */<br>        function render() {<br>            let clipPath = `polygon( ${clipRectX1}px ${clipRectY1}px, ${clipRectX2}px ${clipRectY1}px, ${clipRectX2}px ${clipRectY2}px, ${clipRectX1}px ${clipRectY2}px )`;<br>            captcha.style = `--clip-offsetX:${clipRectX1}px;--moved:${clamp(moved, 0, width - puzzleWidth - offsetX)}px;--clip-path:${clipPath};--width:${width}px;--height:${height}px;--puzzle-width:${puzzleWidth}px;--puzzle-height:${puzzleHeight}px`;<br>        }<br>        render();<br>    </script><br></body><br></html>