js SVG应用---验证码

最新推荐文章于 2023-02-28 14:26:30 发布

caoliangya520

最新推荐文章于 2023-02-28 14:26:30 发布

阅读量182

点赞数

文章标签： js javascript

本文链接：https://blog.csdn.net/weixin_45494667/article/details/106612373

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        svg {
            width: 600px;
            height: 200px;
            border: 1px dashed #ccc;
            font-size: 100px;
        }
    </style>
</head>

<body>
    <svg><rect x="60" y="10" rx="0" ry="0" width="500" height="200" stroke="black" fill="transparent" stroke-width="1" />
    </svg>
    <input type="button" value="验证码">
    <script src="../util/tools.js"></script>
    <script>
  function Validate() {
            let date = "1234567890qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM";
            let svg = document.querySelector("svg");
            let Length = date.length;
            let number = 30;
            let text = "";
            for (let i = 0; i < number; i++) {
                text += `<line x1="${Tool.random(100)}" y1="${Tool.random(300)}" x2="${Tool.random(600)}" y2="${Tool.random(150)}" stroke=" rgb(${[Tool.random(0, 255)]},${Tool.random(0, 255)},${Tool.random(0, 255)})" fill="transparent" stroke-width="${Tool.random(1, 3)}" />`
            }
            for (let j = 0; j < 4; j++) {
                text += ` <text x="${100 + j * 100}" y="${100}" style="font-size:100;fill: rgb(${[Tool.random(0, 255)]},${Tool.random(0, 255)},${Tool.random(0, 255)})" rotate="${Tool.random(-50, 50)}">${date[Tool.random(Length - 1)]}
               
            </text>`
            }
            svg.innerHTML = text;

        }
        let input = document.querySelector("input");
        input.addEventListener("click", function () {
            Validate()
        })
        Validate()
    </script>
</body>

</html>

util工具包

let Tool = (function () {
    function random(start, end) {
        if (arguments.length === 0) {
            return 0
        } else if (arguments.length === 1) {
            end = start;
            start = 0;
        } else {
            if (end < start) {
                [end, start] = [start, end]
            }
        }
        return parseInt(Math.random() * (end - start + 1)) + start;
    }
    function color(opcity = 1) {
        return `rgba(${random(ZERO, 255)},${random(ZERO, 255)},${random(ZERO, 255)},${opcity})`
    }
    function curry(func, ...args) { //函数柯里化
        return function (...inArgs) {
            const allArgs = args.concat(inArgs);
            if (allArgs.length >= func.length) {
                return func(...allArgs);
            }
            else {
                return curry(func, ...allArgs);
            }
        }
    }
    function debounce(func, wait) {  //防抖函数
        let timerId = null;
        return function (...rag) {
            if (timerId) {
                clearTimeout(timerId);
            }
            timerId = setTimeout(() => {
                func(rag);
            }, wait);
        }
    }
    return { random, color,curry, debounce }
})()
    
 
    
 
   
 
```javascript