{"id":969,"date":"2025-02-21T01:14:09","date_gmt":"2025-02-20T17:14:09","guid":{"rendered":"https:\/\/hali.life\/?p=969"},"modified":"2025-03-22T21:57:17","modified_gmt":"2025-03-22T13:57:17","slug":"%e3%80%90%e8%87%aa%e5%88%b6%e5%b0%8f%e5%b7%a5%e5%85%b7%e3%80%91%e5%8a%a0%e5%be%ae%e4%bf%a1-%e8%81%94%e7%b3%bb%e6%96%b9%e5%bc%8f-%ef%bc%8c%e5%bc%95%e5%af%bc%e5%9b%be%e3%80%81%e8%a1%a8%e6%83%85%e5%8c%85","status":"publish","type":"post","link":"https:\/\/hali.life\/?p=969","title":{"rendered":"\u3010\u81ea\u5236\u5c0f\u5de5\u5177\u3011\u52a0\u5fae\u4fe1 \u8054\u7cfb\u65b9\u5f0f \uff0c\u5f15\u5bfc\u56fe\u3001\u8868\u60c5\u5305\u3002"},"content":{"rendered":"\n<div class=\"captcha-container-custom\">\n    <div class=\"input-group-custom\">\n        <label class=\"label-custom\">\u7b2c\u4e00\u884c\u6587\u5b57\uff1a<\/label>\n        <input type=\"text\" id=\"topText\" value=\"\u8fd9\u662f\u54c8\u5229\u7684\u5fae\u4fe1\" class=\"input-custom\">\n    <\/div>\n    <div class=\"input-group-custom\">\n        <label class=\"label-custom\">\u7b2c\u4e8c\u884c\u6587\u5b57\uff08\u5fc5\u586b\uff09\uff1a<\/label>\n        <input type=\"text\" id=\"mainText\" value=\"coder_hali\" class=\"input-custom\">\n        <span class=\"error-text-custom\" id=\"errorMsg\">\u7b2c\u4e8c\u884c\u4e0d\u80fd\u4e3a\u7a7a\uff01<\/span>\n    <\/div>\n    <div class=\"input-group-custom\">\n        <label class=\"label-custom\">\u7b2c\u4e09\u884c\u6587\u5b57\uff1a<\/label>\n        <input type=\"text\" id=\"bottomText\" value=\"\u52a0\u6211\u8be6\u804a\" class=\"input-custom\">\n    <\/div>\n    <div class=\"input-group-custom\">\n        <label class=\"label-custom\">\u5e72\u6270\u5f3a\u5ea6\uff1a<\/label>\n        <input \n            type=\"range\" \n            id=\"distortionLevel\" \n            min=\"0\" \n            max=\"100\" \n            value=\"35\"\n            class=\"slider-custom\"\n        >\n        <span class=\"distortion-value-custom\" id=\"distortionValue\">35%<\/span>\n    <\/div>\n    <button class=\"button-custom\" onclick=\"validateAndDraw()\">\u751f\u6210<\/button>\n    <canvas id=\"captchaCanvas\" class=\"canvas-custom\" width=\"250\" height=\"120\"><\/canvas>\n<\/div>\n\n<style>\n    \/* \u91cd\u7f6e\u7279\u5b9a\u5bb9\u5668\u5185\u7684\u6837\u5f0f *\/\n    .captcha-container-custom * {\n        box-sizing: border-box;\n        margin: 0;\n        padding: 0;\n    }\n\n    .captcha-container-custom {\n        background: white !important;\n        padding: 20px !important;\n        border-radius: 10px !important;\n        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1) !important;\n        text-align: center !important;\n        max-width: 300px !important;\n        margin: 20px auto !important;\n        font-family: Arial, sans-serif !important;\n    }\n\n    .input-group-custom {\n        margin-bottom: 15px !important;\n        text-align: center !important;\n        display: flex !important;\n        flex-direction: column !important;\n        align-items: center !important;\n    }\n\n    .label-custom {\n        font-weight: bold !important;\n        margin-bottom: 5px !important;\n        width: 100% !important;\n        text-align: left !important;\n        display: block !important;\n        color: #333 !important;\n        font-size: 14px !important;\n    }\n\n    .input-custom {\n        width: 90% !important;\n        padding: 8px !important;\n        border: 1px solid #ddd !important;\n        border-radius: 5px !important;\n        margin-top: 5px !important;\n        background: white !important;\n        color: #333 !important;\n        font-size: 14px !important;\n        line-height: normal !important;\n        height: auto !important;\n    }\n\n    .slider-custom {\n        width: 90% !important;\n        margin: 10px 0 !important;\n        -webkit-appearance: none !important;\n        appearance: none !important;\n        height: 5px !important;\n        background: #ddd !important;\n        border-radius: 5px !important;\n        outline: none !important;\n    }\n\n    .slider-custom::-webkit-slider-thumb {\n        -webkit-appearance: none !important;\n        appearance: none !important;\n        width: 15px !important;\n        height: 15px !important;\n        background: #007bff !important;\n        border-radius: 50% !important;\n        cursor: pointer !important;\n    }\n\n    .slider-custom::-moz-range-thumb {\n        width: 15px !important;\n        height: 15px !important;\n        background: #007bff !important;\n        border-radius: 50% !important;\n        cursor: pointer !important;\n        border: none !important;\n    }\n\n    .distortion-value-custom {\n        font-size: 14px !important;\n        color: #666 !important;\n        display: inline-block !important;\n        margin-top: 5px !important;\n    }\n\n    .error-text-custom {\n        color: red !important;\n        font-size: 14px !important;\n        display: none !important;\n        margin-top: 5px !important;\n        width: 100% !important;\n        text-align: center !important;\n    }\n\n    .button-custom {\n        background: #007bff !important;\n        color: white !important;\n        padding: 10px 20px !important;\n        border: none !important;\n        border-radius: 5px !important;\n        cursor: pointer !important;\n        font-size: 16px !important;\n        margin-top: 10px !important;\n        transition: background 0.3s !important;\n        line-height: normal !important;\n        height: auto !important;\n        display: inline-block !important;\n        text-decoration: none !important;\n    }\n\n    .button-custom:hover {\n        background: #0056b3 !important;\n    }\n\n    .canvas-custom {\n        display: block !important;\n        margin: 15px auto !important;\n        border: 1px solid #ccc !important;\n        border-radius: 8px !important;\n        background: #eef1f5 !important;\n        max-width: 100% !important;\n    }\n<\/style>\n\n<script>\n    const distortionSlider = document.getElementById(\"distortionLevel\");\n    const distortionValue = document.getElementById(\"distortionValue\");\n\n    distortionSlider.oninput = function() {\n        distortionValue.textContent = this.value + \"%\";\n        drawCaptcha();\n    }\n\n    function validateAndDraw() {\n        const mainText = document.getElementById(\"mainText\").value.trim();\n        const errorMsg = document.getElementById(\"errorMsg\");\n\n        if (mainText === \"\") {\n            errorMsg.style.display = \"block\";\n            return;\n        } else {\n            errorMsg.style.display = \"none\";\n        }\n\n        drawCaptcha();\n    }\n\n    function drawCaptcha() {\n        const canvas = document.getElementById(\"captchaCanvas\");\n        const ctx = canvas.getContext(\"2d\");\n        const distortionLevel = document.getElementById(\"distortionLevel\").value \/ 100;\n\n        const topText = document.getElementById(\"topText\").value;\n        const mainText = document.getElementById(\"mainText\").value;\n        const bottomText = document.getElementById(\"bottomText\").value;\n\n        \/\/ \u6e05\u7a7a\u753b\u5e03\n        ctx.clearRect(0, 0, canvas.width, canvas.height);\n        ctx.fillStyle = \"#eef1f5\";\n        ctx.fillRect(0, 0, canvas.width, canvas.height);\n\n        \/\/ \u8ba1\u7b97\u5e72\u6270\u5143\u7d20\u6570\u91cf\n        const numLines = Math.floor(5 + distortionLevel * 15); \/\/ 5-20\u6761\u7ebf\n        const numDots = Math.floor(50 + distortionLevel * 150); \/\/ 50-200\u4e2a\u70b9\n        const lineWidth = 0.5 + distortionLevel * 2; \/\/ 0.5-2.5\u50cf\u7d20\u7ebf\u5bbd\n        const dotSize = 0.5 + distortionLevel * 2; \/\/ 0.5-2.5\u50cf\u7d20\u70b9\u5927\u5c0f\n        const noiseOpacity = 0.3 + distortionLevel * 0.4; \/\/ 0.3-0.7\u900f\u660e\u5ea6\n\n        \/\/ \u7ed8\u5236\u5e72\u6270\u7ebf\n        for (let i = 0; i < numLines; i++) {\n            const points = Math.floor(2 + distortionLevel * 3);\n            ctx.strokeStyle = `rgba(${Math.random() * 150}, ${Math.random() * 150}, ${Math.random() * 150}, ${noiseOpacity})`;\n            ctx.lineWidth = Math.random() * lineWidth;\n            \n            ctx.beginPath();\n            let startX = Math.random() * canvas.width;\n            let startY = Math.random() * canvas.height;\n            ctx.moveTo(startX, startY);\n\n            for (let p = 0; p < points; p++) {\n                const x = Math.random() * canvas.width;\n                const y = Math.random() * canvas.height;\n                const cp1x = startX + (x - startX) \/ 3 + (Math.random() - 0.5) * 30;\n                const cp1y = startY + (y - startY) \/ 3 + (Math.random() - 0.5) * 30;\n                const cp2x = startX + 2 * (x - startX) \/ 3 + (Math.random() - 0.5) * 30;\n                const cp2y = startY + 2 * (y - startY) \/ 3 + (Math.random() - 0.5) * 30;\n                \n                ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);\n                startX = x;\n                startY = y;\n            }\n            ctx.stroke();\n        }\n\n        \/\/ \u7ed8\u5236\u5e72\u6270\u70b9\n        for (let i = 0; i < numDots; i++) {\n            ctx.fillStyle = `rgba(${Math.random() * 200}, ${Math.random() * 200}, ${Math.random() * 200}, ${noiseOpacity})`;\n            ctx.beginPath();\n            ctx.arc(\n                Math.random() * canvas.width, \n                Math.random() * canvas.height, \n                Math.random() * dotSize, \n                0, \n                Math.PI * 2\n            );\n            ctx.fill();\n        }\n\n        function drawText(text, x, y, fontSize, color, rotateAngle, scaleX, scaleY) {\n            ctx.font = `${fontSize}px Arial`;\n            ctx.fillStyle = color;\n            ctx.save();\n            ctx.translate(x, y);\n            ctx.rotate(rotateAngle);\n            ctx.scale(scaleX, scaleY);\n            ctx.fillText(text, 0, 0);\n            ctx.restore();\n        }\n\n        \/\/ \u7ed8\u5236\u7b2c\u4e00\u884c\u548c\u7b2c\u4e09\u884c\u6587\u5b57\n        drawText(topText, canvas.width \/ 2 - ctx.measureText(topText).width \/ 2, 25, 14, \"#333\", 0, 1, 1);\n        drawText(bottomText, canvas.width \/ 2 - ctx.measureText(bottomText).width \/ 2, 100, 14, \"#333\", 0, 1, 1);\n\n        \/\/ \u7ed8\u5236\u4e3b\u6587\u5b57\uff08\u7b2c\u4e8c\u884c\uff0c\u4fdd\u6301\u539f\u6709\u7684\u968f\u673a\u6548\u679c\uff09\n        let startX = 25;\n        let letterSpacing = 18;\n        for (let i = 0; i < mainText.length; i++) {\n            let char = mainText[i];\n            let angle = Math.random() * 0.4 - 0.2;  \/\/ \u968f\u673a\u65cb\u8f6c\n            let scaleX = 0.9 + Math.random() * 0.2;  \/\/ \u968f\u673a\u7f29\u653e\n            let scaleY = 0.9 + Math.random() * 0.2;\n            let yOffset = Math.random() * 10 - 5;    \/\/ \u968f\u673a\u5782\u76f4\u504f\u79fb\n\n            drawText(\n                char, \n                startX, \n                65 + yOffset, \n                24, \n                `hsl(${Math.random() * 360}, 80%, 40%)`,  \/\/ \u968f\u673a\u989c\u8272\n                angle, \n                scaleX, \n                scaleY\n            );\n            startX += letterSpacing;\n        }\n    }\n\n    \/\/ \u521d\u59cb\u7ed8\u5236\n    drawCaptcha();\n<\/script>\n\n\n\n<p>\u4e0b\u8f7d\u79bb\u7ebf\u7248\uff1a<a href=\"https:\/\/pan.quark.cn\/s\/47d466a07ef3\" target=\"_blank\" rel=\"noreferrer noopener\"><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">\u300c\u52a0V\u5f15\u5bfc\u56fe\u5de5\u5177\u300d<\/mark><\/strong><\/a>  <br><\/p>\n\n\n\n<h1 class=\"wp-block-heading\">\u7b80\u4ecb<\/h1>\n\n\n\n<p>\u6211\u505a\u4e86\u4e00\u4e2a\u5de5\u5177\u554a\uff0c\u80fd\u628a\u6587\u5b57\u9690\u85cf\u4e8e\u56fe\u7247\u4e4b\u4e2d\uff0c\u6211\u4eec\u53ef\u4ee5\u628a\u5fae\u4fe1\u53f7\u554a\uff0c\u8054\u7cfb\u65b9\u5f0f\uff0c\u751f\u6210\u4e00\u5f20\u5f15\u5bfc\u56fe\uff0c\u628a\u5f15\u5bfc\u56fe\u53d1\u7ed9\u5ba2\u6237\uff0c<strong>\u8fd9\u6837\u53ef\u4ee5\u89c4\u907f\u4e00\u4e9b\u9650\u5236<\/strong>\u3002\u6211\u4e3a\u4ec0\u4e48\u8981\u505a\u8fd9\u4e2a\u4e1c\u897f\u5462\uff0c\u6211\u662f\u89c9\u5f97\uff0c\u73b0\u5728\u7684\u4e92\u8054\u7f51\u771f\u7684\u662f\u8d8a\u6765\u8d8a\u95ed\u585e\uff0c20\u5e74\u524d\u7684\u4e92\u8054\u7f51\uff0c\u8d34\u5427\u3001\u8bba\u575b\u4e0b\u9762\u968f\u4fbf\u53ef\u4ee5\u7559\u81ea\u5df1\u7684QQ\u53f7\u3002\u4f60\u518d\u770b\u770b\u73b0\u5728\uff0c\u4f60\u60f3\u5728\u5c0f\u7ea2\u85af\u7ed9\u4eba\u53d1\u4e2a\u5fae\u4fe1\u53f7\u96be\u4e8e\u4e0a\u9752\u5929\u3002\u96be\u9053\u4e92\u8054\u7f51\u4e0d\u662f\u5e94\u8be5\u62c9\u8fd1\u4eba\u4eec\u4e4b\u95f4\u7684\u8ddd\u79bb\uff0c\u66f4\u65b9\u4fbf\u4eba\u4eec\u4e48\uff1f\u4e3a\u4ec0\u4e48\u73b0\u5728\u641e\u51fa\u6765\u4fe1\u606f\u8327\u623f\u8fd9\u79cd\u4e1c\u897f\uff1f\u60f3\u6211\u8fd9\u6837\u7684\u81ea\u5a92\u4f53\u4eba\uff0c\u6211\u603b\u8981\u7ed9\u6211\u7684\u7c89\u4e1d\u5206\u4eab\u4e00\u4e9b\u4e1c\u897f\u5427\uff0c\u6211\u505a\u7684\u8f6f\u4ef6\u3001\u6211\u5199\u7684\u6559\u7a0b\uff0c\u6211\u90fd\u60f3\u514d\u8d39\u5206\u4eab\u7ed9\u6211\u7684\u7c89\u4e1d\uff0c\u7ed3\u679c\u5e73\u53f0\u6765\u4e00\u53e5\u201c\u4e0d\u5141\u8bb8\uff0c\u4f60\u514d\u8d39\u4e5f\u4e0d\u5141\u8bb8\u53d1\u201d\u3002\u592ajb\u6076\u5fc3\u4e86\u3002\u3002\u3002\u3002\u3002\u3002\u3002\u3002\u884c\u4e1a\u4e71\u8c61\u7684\u9519\u8bef\u4e0d\u80fd\u8ba9\u6211\u4eec\u666e\u901a\u4eba\u627f\u62c5\u554a\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u7b2c\u4e00\u884c\u6587\u5b57\uff1a \u7b2c\u4e8c\u884c\u6587\u5b57\uff08\u5fc5\u586b\uff09\uff1a \u7b2c\u4e8c\u884c\u4e0d\u80fd\u4e3a\u7a7a\uff01 \u7b2c\u4e09\u884c\u6587\u5b57\uff1a \u5e72\u6270\u5f3a\u5ea6\uff1a 35% \u751f\u6210 \u4e0b\u8f7d\u79bb\u7ebf\u7248\uff1a\u300c\u52a0&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":972,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-969","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"views":6343,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/hali.life\/index.php?rest_route=\/wp\/v2\/posts\/969","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hali.life\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hali.life\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hali.life\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hali.life\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=969"}],"version-history":[{"count":7,"href":"https:\/\/hali.life\/index.php?rest_route=\/wp\/v2\/posts\/969\/revisions"}],"predecessor-version":[{"id":1036,"href":"https:\/\/hali.life\/index.php?rest_route=\/wp\/v2\/posts\/969\/revisions\/1036"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hali.life\/index.php?rest_route=\/wp\/v2\/media\/972"}],"wp:attachment":[{"href":"https:\/\/hali.life\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=969"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hali.life\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=969"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hali.life\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=969"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}