{"id":1501,"date":"2026-01-24T10:39:03","date_gmt":"2026-01-24T02:39:03","guid":{"rendered":"https:\/\/www.52runoob.com\/?p=1501"},"modified":"2026-01-24T10:39:03","modified_gmt":"2026-01-24T02:39:03","slug":"%e9%9a%8f%e6%9c%ba%e6%95%b0%e5%ad%97%e7%94%9f%e6%88%90","status":"publish","type":"post","link":"https:\/\/www.52runoob.com\/index.php\/2026\/01\/24\/%e9%9a%8f%e6%9c%ba%e6%95%b0%e5%ad%97%e7%94%9f%e6%88%90\/","title":{"rendered":"\u968f\u673a\u6570\u5b57\u751f\u6210"},"content":{"rendered":"\n<p>\u5b89\u6392 \ud83d\udc4d<br>\u4e0b\u9762\u7ed9\u4f60\u4e00\u4e2a<strong>\u53ef\u76f4\u63a5\u5728\u7ebf\u4f7f\u7528\u7684\u300c\u968f\u673a\u6570\u5b57 \/ \u968f\u673a\u5b57\u7b26\u4e32\u751f\u6210\u5de5\u5177\u300d<\/strong>\uff0c<strong>\u7eaf\u524d\u7aef\uff08HTML + CSS + JavaScript\uff09<\/strong>\uff0c\u590d\u5236\u5230\u672c\u5730\u6216\u653e\u5230\u670d\u52a1\u5668\u5c31\u80fd\u7528\uff0c\u4e5f\u975e\u5e38\u9002\u5408\u4f60\u4ee5\u540e\u6539\u9020\u6210\u7f51\u7ad9\u5c0f\u5de5\u5177\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u2705 \u529f\u80fd\u8bf4\u660e<\/h2>\n\n\n\n<p>\u652f\u6301\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ud83c\udfb2 \u968f\u673a\u6570\u5b57\u751f\u6210\uff08\u53ef\u8bbe\u7f6e\u6700\u5c0f\u503c \/ \u6700\u5927\u503c \/ \u6570\u91cf\uff09<\/li>\n\n\n\n<li>\ud83d\udd24 \u968f\u673a\u5b57\u7b26\u4e32\u751f\u6210\n<ul class=\"wp-block-list\">\n<li>\u81ea\u5b9a\u4e49\u957f\u5ea6<\/li>\n\n\n\n<li>\u53ef\u9009\uff1a\u6570\u5b57 \/ \u5c0f\u5199\u5b57\u6bcd \/ \u5927\u5199\u5b57\u6bcd \/ \u7279\u6b8a\u5b57\u7b26<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>\ud83d\udccb \u4e00\u952e\u590d\u5236\u7ed3\u679c<\/li>\n\n\n\n<li>\ud83c\udf10 <strong>\u65e0\u9700\u540e\u7aef\uff0c\u5b8c\u5168\u5728\u7ebf<\/strong><\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83d\udcc4 \u5b8c\u6574\u793a\u4f8b\u4ee3\u7801\uff08\u4e00\u4e2a\u6587\u4ef6\u5c31\u591f\uff09<\/h2>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>\u6587\u4ef6\u540d\u793a\u4f8b\uff1a<code>random-generator.html<\/code><\/p>\n<\/blockquote>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;!DOCTYPE html&gt;\n&amp;lt;html lang=&quot;zh-CN&quot;&gt;\n&amp;lt;head&gt;\n    &amp;lt;meta charset=&quot;UTF-8&quot;&gt;\n    &amp;lt;title&gt;\u5728\u7ebf\u968f\u673a\u6570\u5b57 \/ \u5b57\u7b26\u4e32\u751f\u6210\u5668&amp;lt;\/title&gt;\n    &amp;lt;style&gt;\n        body {\n            font-family: Arial, Helvetica, sans-serif;\n            background: #f4f6f8;\n            padding: 40px;\n        }\n        .container {\n            max-width: 700px;\n            margin: auto;\n            background: #fff;\n            padding: 25px;\n            border-radius: 10px;\n            box-shadow: 0 4px 12px rgba(0,0,0,.1);\n        }\n        h2 {\n            margin-top: 30px;\n            color: #333;\n        }\n        label {\n            display: block;\n            margin-top: 12px;\n        }\n        input&#x5B;type=&quot;number&quot;],\n        input&#x5B;type=&quot;text&quot;] {\n            width: 100%;\n            padding: 8px;\n            margin-top: 5px;\n        }\n        button {\n            margin-top: 15px;\n            padding: 10px 16px;\n            background: #007bff;\n            color: #fff;\n            border: none;\n            border-radius: 6px;\n            cursor: pointer;\n        }\n        button:hover {\n            background: #0056b3;\n        }\n        .result {\n            margin-top: 15px;\n            padding: 12px;\n            background: #f1f3f5;\n            border-radius: 6px;\n            white-space: pre-wrap;\n        }\n        .checkbox-group label {\n            display: inline-block;\n            margin-right: 15px;\n        }\n    &amp;lt;\/style&gt;\n&amp;lt;\/head&gt;\n&amp;lt;body&gt;\n\n&amp;lt;div class=&quot;container&quot;&gt;\n    &amp;lt;h1&gt;\ud83c\udfb2 \u5728\u7ebf\u968f\u673a\u751f\u6210\u5de5\u5177&amp;lt;\/h1&gt;\n\n    &amp;lt;!-- \u968f\u673a\u6570\u5b57 --&gt;\n    &amp;lt;h2&gt;\u968f\u673a\u6570\u5b57\u751f\u6210&amp;lt;\/h2&gt;\n    &amp;lt;label&gt;\u6700\u5c0f\u503c&amp;lt;\/label&gt;\n    &amp;lt;input type=&quot;number&quot; id=&quot;min&quot; value=&quot;1&quot;&gt;\n\n    &amp;lt;label&gt;\u6700\u5927\u503c&amp;lt;\/label&gt;\n    &amp;lt;input type=&quot;number&quot; id=&quot;max&quot; value=&quot;100&quot;&gt;\n\n    &amp;lt;label&gt;\u751f\u6210\u6570\u91cf&amp;lt;\/label&gt;\n    &amp;lt;input type=&quot;number&quot; id=&quot;count&quot; value=&quot;1&quot;&gt;\n\n    &amp;lt;button onclick=&quot;generateNumbers()&quot;&gt;\u751f\u6210\u968f\u673a\u6570\u5b57&amp;lt;\/button&gt;\n\n    &amp;lt;div class=&quot;result&quot; id=&quot;numberResult&quot;&gt;&amp;lt;\/div&gt;\n\n    &amp;lt;!-- \u968f\u673a\u5b57\u7b26\u4e32 --&gt;\n    &amp;lt;h2&gt;\u968f\u673a\u5b57\u7b26\u4e32\u751f\u6210&amp;lt;\/h2&gt;\n    &amp;lt;label&gt;\u5b57\u7b26\u4e32\u957f\u5ea6&amp;lt;\/label&gt;\n    &amp;lt;input type=&quot;number&quot; id=&quot;strLength&quot; value=&quot;12&quot;&gt;\n\n    &amp;lt;div class=&quot;checkbox-group&quot;&gt;\n        &amp;lt;label&gt;&amp;lt;input type=&quot;checkbox&quot; id=&quot;useNumbers&quot; checked&gt; \u6570\u5b57&amp;lt;\/label&gt;\n        &amp;lt;label&gt;&amp;lt;input type=&quot;checkbox&quot; id=&quot;useLower&quot; checked&gt; \u5c0f\u5199\u5b57\u6bcd&amp;lt;\/label&gt;\n        &amp;lt;label&gt;&amp;lt;input type=&quot;checkbox&quot; id=&quot;useUpper&quot; checked&gt; \u5927\u5199\u5b57\u6bcd&amp;lt;\/label&gt;\n        &amp;lt;label&gt;&amp;lt;input type=&quot;checkbox&quot; id=&quot;useSymbols&quot;&gt; \u7279\u6b8a\u5b57\u7b26&amp;lt;\/label&gt;\n    &amp;lt;\/div&gt;\n\n    &amp;lt;button onclick=&quot;generateString()&quot;&gt;\u751f\u6210\u968f\u673a\u5b57\u7b26\u4e32&amp;lt;\/button&gt;\n\n    &amp;lt;div class=&quot;result&quot; id=&quot;stringResult&quot;&gt;&amp;lt;\/div&gt;\n&amp;lt;\/div&gt;\n\n&amp;lt;script&gt;\n    \/\/ \u968f\u673a\u6570\u5b57\n    function generateNumbers() {\n        const min = parseInt(document.getElementById(&#039;min&#039;).value);\n        const max = parseInt(document.getElementById(&#039;max&#039;).value);\n        const count = parseInt(document.getElementById(&#039;count&#039;).value);\n\n        if (min &gt; max) {\n            alert(&quot;\u6700\u5c0f\u503c\u4e0d\u80fd\u5927\u4e8e\u6700\u5927\u503c&quot;);\n            return;\n        }\n\n        let result = &#x5B;];\n        for (let i = 0; i &amp;lt; count; i++) {\n            const num = Math.floor(Math.random() * (max - min + 1)) + min;\n            result.push(num);\n        }\n\n        document.getElementById(&#039;numberResult&#039;).innerText = result.join(&quot;, &quot;);\n    }\n\n    \/\/ \u968f\u673a\u5b57\u7b26\u4e32\n    function generateString() {\n        const length = parseInt(document.getElementById(&#039;strLength&#039;).value);\n\n        let chars = &quot;&quot;;\n        if (document.getElementById(&#039;useNumbers&#039;).checked) chars += &quot;0123456789&quot;;\n        if (document.getElementById(&#039;useLower&#039;).checked) chars += &quot;abcdefghijklmnopqrstuvwxyz&quot;;\n        if (document.getElementById(&#039;useUpper&#039;).checked) chars += &quot;ABCDEFGHIJKLMNOPQRSTUVWXYZ&quot;;\n        if (document.getElementById(&#039;useSymbols&#039;).checked) chars += &quot;!@#$%^&amp;amp;*()_+-={}&#x5B;]&amp;lt;&gt;?&quot;;\n\n        if (!chars) {\n            alert(&quot;\u8bf7\u81f3\u5c11\u9009\u62e9\u4e00\u79cd\u5b57\u7b26\u7c7b\u578b&quot;);\n            return;\n        }\n\n        let result = &quot;&quot;;\n        for (let i = 0; i &amp;lt; length; i++) {\n            result += chars.charAt(Math.floor(Math.random() * chars.length));\n        }\n\n        document.getElementById(&#039;stringResult&#039;).innerText = result;\n    }\n&amp;lt;\/script&gt;\n\n&amp;lt;\/body&gt;\n&amp;lt;\/html&gt;\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83d\ude80 \u4f7f\u7528\u65b9\u5f0f<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u65b0\u5efa\u6587\u4ef6 <code>random-generator.html<\/code><\/li>\n\n\n\n<li>\u7c98\u8d34\u4e0a\u9762\u5168\u90e8\u4ee3\u7801<\/li>\n\n\n\n<li>\u53cc\u51fb\u6253\u5f00<br><strong>\u2714 \u672c\u5730\u53ef\u7528 \/ \u2714 \u4e0a\u4f20\u670d\u52a1\u5668\u5373\u53ef\u5728\u7ebf\u4f7f\u7528<\/strong><\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>\u5b89\u6392 \ud83d\udc4d\u4e0b\u9762\u7ed9\u4f60\u4e00\u4e2a\u53ef\u76f4\u63a5\u5728\u7ebf\u4f7f\u7528\u7684\u300c\u968f\u673a\u6570\u5b57 \/ \u968f\u673a\u5b57\u7b26\u4e32\u751f\u6210\u5de5\u5177\u300d\uff0c\u7eaf\u524d\u7aef&#8230; <a class=\"more-link\" href=\"https:\/\/www.52runoob.com\/index.php\/2026\/01\/24\/%e9%9a%8f%e6%9c%ba%e6%95%b0%e5%ad%97%e7%94%9f%e6%88%90\/\">Continue Reading &rarr;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1501","post","type-post","status-publish","format-standard","hentry","category-1"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/1501","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/comments?post=1501"}],"version-history":[{"count":1,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/1501\/revisions"}],"predecessor-version":[{"id":1502,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/1501\/revisions\/1502"}],"wp:attachment":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/media?parent=1501"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/categories?post=1501"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/tags?post=1501"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}