{"id":250,"date":"2026-03-16T23:18:07","date_gmt":"2026-03-16T15:18:07","guid":{"rendered":"https:\/\/www.resilence.cn\/?p=250"},"modified":"2026-03-16T23:18:07","modified_gmt":"2026-03-16T15:18:07","slug":"day-11-%e4%ba%8b%e4%bb%b6%e5%a4%84%e7%90%86","status":"publish","type":"post","link":"https:\/\/www.resilence.cn\/?p=250","title":{"rendered":"Day-11-\u4e8b\u4ef6\u5904\u7406"},"content":{"rendered":"

Day 11: \u4e8b\u4ef6\u5904\u7406<\/h1>\n
\n

\u524d\u60c5\u56de\u987e<\/strong>: \u5728 Day 10 \u4e2d\uff0c\u6211\u4eec\u5b66\u4e60\u4e86 DOM \u64cd\u4f5c\u57fa\u7840\uff0c\u4e86\u89e3\u4e86\u5982\u4f55\u9009\u62e9\u3001\u4fee\u6539\u3001\u521b\u5efa\u548c\u5220\u9664 DOM \u5143\u7d20\u3002\u4eca\u5929\u6211\u4eec\u8981\u5b66\u4e60\u7684\u662f\u5982\u4f55\u8ba9\u9875\u9762"\u6d3b"\u8d77\u6765\u2014\u2014\u54cd\u5e94\u7528\u6237\u7684\u64cd\u4f5c\u3002<\/p>\n<\/blockquote>\n

\ud83c\udfaf \u5b66\u4e60\u76ee\u6807<\/h2>\n
    \n
  • \u7406\u89e3\u4ec0\u4e48\u662f\u4e8b\u4ef6\u548c\u4e8b\u4ef6\u6d41<\/li>\n
  • \u638c\u63e1\u4e8b\u4ef6\u76d1\u542c\u5668\u7684\u6dfb\u52a0\u548c\u79fb\u9664<\/li>\n
  • \u4e86\u89e3\u4e8b\u4ef6\u5bf9\u8c61\uff08Event Object\uff09\u7684\u5c5e\u6027\u548c\u65b9\u6cd5<\/li>\n
  • \u5b66\u4f1a\u963b\u6b62\u9ed8\u8ba4\u884c\u4e3a\u548c\u4e8b\u4ef6\u5192\u6ce1<\/li>\n
  • \u638c\u63e1\u5e38\u89c1\u7684\u4e8b\u4ef6\u7c7b\u578b\uff08\u9f20\u6807\u3001\u952e\u76d8\u3001\u8868\u5355\u7b49\uff09<\/li>\n
  • \u4e86\u89e3\u4e8b\u4ef6\u59d4\u6258\u7684\u539f\u7406\u548c\u5e94\u7528<\/li>\n<\/ul>\n

    \ud83d\udca1 \u6838\u5fc3\u6982\u5ff5<\/h2>\n

    \u4ec0\u4e48\u662f\u4e8b\u4ef6\uff08Event\uff09\uff1f<\/h3>\n

    \u4e8b\u4ef6<\/strong>\u662f\u6587\u6863\u6216\u6d4f\u89c8\u5668\u7a97\u53e3\u4e2d\u53d1\u751f\u7684\u7279\u5b9a\u4ea4\u4e92\u77ac\u95f4\u3002\u4f8b\u5982\uff1a<\/p>\n

      \n
    • \u7528\u6237\u70b9\u51fb\u6309\u94ae<\/li>\n
    • \u7528\u6237\u6309\u4e0b\u952e\u76d8<\/li>\n
    • \u9875\u9762\u52a0\u8f7d\u5b8c\u6210<\/li>\n
    • \u8868\u5355\u63d0\u4ea4<\/li>\n<\/ul>\n

      \u4e8b\u4ef6\u662f JavaScript \u4e0e\u7528\u6237\u4ea4\u4e92\u7684\u6838\u5fc3\u673a\u5236\u3002<\/p>\n

      \u4e8b\u4ef6\u6d41<\/h3>\n

      \u5f53\u4e00\u4e2a\u4e8b\u4ef6\u53d1\u751f\u65f6\uff0c\u4e8b\u4ef6\u4f1a\u5728 DOM \u6811\u4e2d\u4f20\u64ad\u3002\u6709\u4e09\u4e2a\u9636\u6bb5<\/strong>\uff1a<\/p>\n

        \n
      1. \u6355\u83b7\u9636\u6bb5<\/strong>\uff08Capture Phase\uff09: \u4ece window<\/code> \u5411\u4e0b\u4f20\u64ad\u5230\u76ee\u6807\u5143\u7d20<\/li>\n
      2. \u76ee\u6807\u9636\u6bb5<\/strong>\uff08Target Phase\uff09: \u4e8b\u4ef6\u5230\u8fbe\u76ee\u6807\u5143\u7d20<\/li>\n
      3. \u5192\u6ce1\u9636\u6bb5<\/strong>\uff08Bubbling Phase\uff09: \u4ece\u76ee\u6807\u5143\u7d20\u5411\u4e0a\u4f20\u64ad\u56de window<\/code><\/li>\n<\/ol>\n
        \u70b9\u51fb\u6309\u94ae\u65f6\u7684\u6d41\u7a0b\uff1a\n\n\u6355\u83b7\u9636\u6bb5\uff1awindow \u2192 document \u2192 html \u2192 body \u2192 div \u2192 button\n\u76ee\u6807\u9636\u6bb5\uff1abutton\n\u5192\u6ce1\u9636\u6bb5\uff1abutton \u2192 div \u2192 body \u2192 html \u2192 document \u2192 window\n<\/code><\/pre>\n
        \u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c\u4e8b\u4ef6\u76d1\u542c\u5668\u5728\u5192\u6ce1\u9636\u6bb5\u89e6\u53d1\u3002<\/strong><\/p>\n
        \ud83d\udcdd \u57fa\u672c\u8bed\u6cd5<\/h2>\n
        \u6dfb\u52a0\u4e8b\u4ef6\u76d1\u542c\u5668<\/h3>\n
        \u4f7f\u7528 addEventListener()<\/code> \u65b9\u6cd5\u6dfb\u52a0\u4e8b\u4ef6\u76d1\u542c\u5668\uff1a<\/p>\n
        element.addEventListener(event, function, useCapture);\n<\/code><\/pre>\n
        \u53c2\u6570<\/strong>:<\/p>\n
          \n
        • event<\/code>: \u4e8b\u4ef6\u540d\u79f0\uff08\u5982 "click"<\/code>, "mouseover"<\/code>\uff09<\/li>\n
        • function<\/code>: \u4e8b\u4ef6\u5904\u7406\u51fd\u6570<\/li>\n
        • useCapture<\/code>: \u53ef\u9009\uff0c\u662f\u5426\u5728\u6355\u83b7\u9636\u6bb5\u89e6\u53d1\uff08\u9ed8\u8ba4 false<\/code>\uff09<\/li>\n<\/ul>\n
          \u793a\u4f8b<\/strong>:<\/p>\n
          \/\/ \u9009\u62e9\u6309\u94ae\nconst button = document.querySelector('button');\n\n\/\/ \u6dfb\u52a0\u70b9\u51fb\u4e8b\u4ef6\nbutton.addEventListener('click', function(event) {\n    console.log('\u6309\u94ae\u88ab\u70b9\u51fb\u4e86\uff01');\n});\n<\/code><\/pre>\n
          \u79fb\u9664\u4e8b\u4ef6\u76d1\u542c\u5668<\/h3>\n
          \u4f7f\u7528 removeEventListener()<\/code> \u65b9\u6cd5\u79fb\u9664\uff1a<\/p>\n
          \/\/ \u5b9a\u4e49\u547d\u540d\u51fd\u6570\nfunction handleClick(event) {\n    console.log('\u6309\u94ae\u88ab\u70b9\u51fb\u4e86\uff01');\n}\n\n\/\/ \u6dfb\u52a0\u76d1\u542c\u5668\nbutton.addEventListener('click', handleClick);\n\n\/\/ \u79fb\u9664\u76d1\u542c\u5668\nbutton.removeEventListener('click', handleClick);\n<\/code><\/pre>\n
          \u6ce8\u610f<\/strong>: \u53ea\u80fd\u79fb\u9664\u547d\u540d\u51fd\u6570\uff0c\u4e0d\u80fd\u79fb\u9664\u533f\u540d\u51fd\u6570\uff01<\/p>\n
          \n
          \ud83c\udfae \u793a\u4f8b\u4ee3\u7801<\/h2>\n
          \u793a\u4f8b 1: \u57fa\u672c\u7684\u70b9\u51fb\u4e8b\u4ef6<\/h3>\n
          <!DOCTYPE html>\n<html>\n<head>\n    <title>\u4e8b\u4ef6\u5904\u7406\u793a\u4f8b<\/title>\n<\/head>\n<body>\n    <button id="myButton">\u70b9\u51fb\u6211<\/button>\n    <p id="message">\u7b49\u5f85\u70b9\u51fb...<\/p>\n\n    <script>\n        \/\/ \u9009\u62e9\u5143\u7d20\n        const button = document.getElementById('myButton');\n        const message = document.getElementById('message');\n\n        \/\/ \u6dfb\u52a0\u70b9\u51fb\u4e8b\u4ef6\n        button.addEventListener('click', function() {\n            message.textContent = '\u6309\u94ae\u88ab\u70b9\u51fb\u4e86\uff01';\n            message.style.color = 'green';\n        });\n    <\/script>\n<\/body>\n<\/html>\n<\/code><\/pre>\n
          \u6548\u679c<\/strong>: \u70b9\u51fb\u6309\u94ae\u540e\uff0c\u6587\u5b57\u4f1a\u53d8\u4e3a\u7eff\u8272\u5e76\u663e\u793a"\u6309\u94ae\u88ab\u70b9\u51fb\u4e86\uff01"<\/p>\n
          \n
          \u793a\u4f8b 2: \u4e8b\u4ef6\u5bf9\u8c61\uff08Event Object\uff09<\/h3>\n
          \u4e8b\u4ef6\u5904\u7406\u51fd\u6570\u4f1a\u63a5\u6536\u4e00\u4e2a\u4e8b\u4ef6\u5bf9\u8c61<\/strong>\uff0c\u5305\u542b\u4e8b\u4ef6\u7684\u8be6\u7ec6\u4fe1\u606f\uff1a<\/p>\n
          button.addEventListener('click', function(event) {\n    \/\/ event.type: \u4e8b\u4ef6\u7c7b\u578b\n    console.log('\u4e8b\u4ef6\u7c7b\u578b:', event.type); \/\/ "click"\n\n    \/\/ event.target: \u89e6\u53d1\u4e8b\u4ef6\u7684\u5143\u7d20\n    console.log('\u76ee\u6807\u5143\u7d20:', event.target); \/\/ <button>\u5143\u7d20\n\n    \/\/ event.clientX, event.clientY: \u9f20\u6807\u4f4d\u7f6e\n    console.log('\u9f20\u6807\u4f4d\u7f6e:', event.clientX, event.clientY);\n\n    \/\/ event.timeStamp: \u4e8b\u4ef6\u53d1\u751f\u7684\u65f6\u95f4\u6233\n    console.log('\u65f6\u95f4\u6233:', event.timeStamp);\n});\n<\/code><\/pre>\n
          \n
          \u793a\u4f8b 3: \u963b\u6b62\u9ed8\u8ba4\u884c\u4e3a<\/h3>\n
          \u6709\u4e9b\u5143\u7d20\u6709\u9ed8\u8ba4\u884c\u4e3a\uff0c\u4f8b\u5982\uff1a<\/p>\n
            \n
          • \u70b9\u51fb\u94fe\u63a5\u4f1a\u8df3\u8f6c<\/li>\n
          • \u70b9\u51fb\u63d0\u4ea4\u6309\u94ae\u4f1a\u63d0\u4ea4\u8868\u5355<\/li>\n
          • \u6309\u7a7a\u683c\u952e\u4f1a\u5411\u4e0b\u6eda\u52a8<\/li>\n<\/ul>\n
            \u4f7f\u7528 event.preventDefault()<\/code> \u53ef\u4ee5\u963b\u6b62\u9ed8\u8ba4\u884c\u4e3a\uff1a<\/p>\n
            <a id="link" href="https:\/\/example.com">\u70b9\u51fb\u6211\u4e0d\u4f1a\u8df3\u8f6c<\/a>\n\n<script>\n    const link = document.getElementById('link');\n\n    link.addEventListener('click', function(event) {\n        \/\/ \u963b\u6b62\u94fe\u63a5\u8df3\u8f6c\n        event.preventDefault();\n        alert('\u94fe\u63a5\u88ab\u70b9\u51fb\u4e86\uff0c\u4f46\u6ca1\u6709\u8df3\u8f6c\uff01');\n    });\n<\/script>\n<\/code><\/pre>\n
            \n
            \u793a\u4f8b 4: \u963b\u6b62\u4e8b\u4ef6\u5192\u6ce1<\/h3>\n
            <div id="outer" style="padding: 50px; background: lightblue;">\n    \u5916\u5c42\n    <div id="inner" style="padding: 30px; background: lightcoral;">\n        \u5185\u5c42\n    <\/div>\n<\/div>\n\n<script>\n    const outer = document.getElementById('outer');\n    const inner = document.getElementById('inner');\n\n    outer.addEventListener('click', function() {\n        console.log('\u5916\u5c42\u88ab\u70b9\u51fb');\n    });\n\n    inner.addEventListener('click', function(event) {\n        console.log('\u5185\u5c42\u88ab\u70b9\u51fb');\n\n        \/\/ \u963b\u6b62\u4e8b\u4ef6\u5192\u6ce1\u5230\u5916\u5c42\n        event.stopPropagation();\n    });\n<\/script>\n<\/code><\/pre>\n
            \u6548\u679c<\/strong>: \u70b9\u51fb\u5185\u5c42\u65f6\uff0c\u53ea\u4f1a\u8f93\u51fa"\u5185\u5c42\u88ab\u70b9\u51fb"\uff0c\u4e0d\u4f1a\u89e6\u53d1\u5916\u5c42\u7684\u70b9\u51fb\u4e8b\u4ef6\u3002<\/p>\n
            \n
            \u793a\u4f8b 5: \u5e38\u89c1\u4e8b\u4ef6\u7c7b\u578b<\/h3>\n
            \u9f20\u6807\u4e8b\u4ef6<\/h4>\n
            const box = document.getElementById('box');\n\n\/\/ \u70b9\u51fb\nbox.addEventListener('click', function() {\n    console.log('\u70b9\u51fb');\n});\n\n\/\/ \u53cc\u51fb\nbox.addEventListener('dblclick', function() {\n    console.log('\u53cc\u51fb');\n});\n\n\/\/ \u9f20\u6807\u79fb\u5165\nbox.addEventListener('mouseenter', function() {\n    this.style.backgroundColor = 'lightblue';\n});\n\n\/\/ \u9f20\u6807\u79fb\u51fa\nbox.addEventListener('mouseleave', function() {\n    this.style.backgroundColor = 'lightcoral';\n});\n\n\/\/ \u9f20\u6807\u79fb\u52a8\nbox.addEventListener('mousemove', function(event) {\n    console.log(`\u9f20\u6807\u4f4d\u7f6e: ${event.clientX}, ${event.clientY}`);\n});\n<\/code><\/pre>\n
            \u952e\u76d8\u4e8b\u4ef6<\/h4>\n
            \/\/ \u6309\u4e0b\u6309\u952e\ndocument.addEventListener('keydown', function(event) {\n    console.log(`\u6309\u952e: ${event.key}`);\n    console.log(`\u952e\u7801: ${event.code}`);\n\n    \/\/ \u68c0\u6d4b\u7279\u5b9a\u6309\u952e\n    if (event.key === 'Enter') {\n        console.log('\u56de\u8f66\u952e\u88ab\u6309\u4e0b');\n    }\n\n    \/\/ \u68c0\u6d4b\u7ec4\u5408\u952e\n    if (event.ctrlKey && event.key === 's') {\n        event.preventDefault(); \/\/ \u963b\u6b62\u4fdd\u5b58\n        console.log('Ctrl+S \u88ab\u6309\u4e0b');\n    }\n});\n\n\/\/ \u91ca\u653e\u6309\u952e\ndocument.addEventListener('keyup', function(event) {\n    console.log(`\u6309\u952e ${event.key} \u88ab\u91ca\u653e`);\n});\n<\/code><\/pre>\n
            \u8868\u5355\u4e8b\u4ef6<\/h4>\n
            <form id="myForm">\n    <input type="text" id="username" placeholder="\u7528\u6237\u540d">\n    <input type="email" id="email" placeholder="\u90ae\u7bb1">\n    <button type="submit">\u63d0\u4ea4<\/button>\n<\/form>\n\n<script>\n    const form = document.getElementById('myForm');\n    const username = document.getElementById('username');\n\n    \/\/ \u8868\u5355\u63d0\u4ea4\n    form.addEventListener('submit', function(event) {\n        event.preventDefault(); \/\/ \u963b\u6b62\u8868\u5355\u9ed8\u8ba4\u63d0\u4ea4\n\n        const name = username.value;\n        console.log('\u63d0\u4ea4\u7684\u7528\u6237\u540d:', name);\n    });\n\n    \/\/ \u8f93\u5165\u6846\u5185\u5bb9\u53d8\u5316\n    username.addEventListener('input', function(event) {\n        console.log('\u5f53\u524d\u8f93\u5165:', event.target.value);\n    });\n\n    \/\/ \u83b7\u5f97\u7126\u70b9\n    username.addEventListener('focus', function() {\n        this.style.backgroundColor = 'lightyellow';\n    });\n\n    \/\/ \u5931\u53bb\u7126\u70b9\n    username.addEventListener('blur', function() {\n        this.style.backgroundColor = 'white';\n        console.log('\u6700\u7ec8\u8f93\u5165:', this.value);\n    });\n<\/script>\n<\/code><\/pre>\n
            \u9875\u9762\u4e8b\u4ef6<\/h4>\n
            \/\/ \u9875\u9762\u52a0\u8f7d\u5b8c\u6210\nwindow.addEventListener('load', function() {\n    console.log('\u9875\u9762\u6240\u6709\u8d44\u6e90\uff08\u56fe\u7247\u3001\u6837\u5f0f\u7b49\uff09\u5df2\u52a0\u8f7d\u5b8c\u6210');\n});\n\n\/\/ DOM \u52a0\u8f7d\u5b8c\u6210\uff08\u66f4\u5feb\uff09\ndocument.addEventListener('DOMContentLoaded', function() {\n    console.log('DOM \u5df2\u52a0\u8f7d\u5b8c\u6210\uff0c\u53ef\u4ee5\u64cd\u4f5c\u5143\u7d20\u4e86');\n});\n\n\/\/ \u9875\u9762\u6eda\u52a8\nwindow.addEventListener('scroll', function() {\n    console.log('\u6eda\u52a8\u4f4d\u7f6e:', window.scrollY);\n});\n\n\/\/ \u7a97\u53e3\u5927\u5c0f\u6539\u53d8\nwindow.addEventListener('resize', function() {\n    console.log('\u7a97\u53e3\u5927\u5c0f:', window.innerWidth, window.innerHeight);\n});\n<\/code><\/pre>\n
            \n
            \u793a\u4f8b 6: \u4e8b\u4ef6\u59d4\u6258<\/h3>\n
            \u4e8b\u4ef6\u59d4\u6258<\/strong>\u662f\u5229\u7528\u4e8b\u4ef6\u5192\u6ce1\u673a\u5236\uff0c\u5c06\u4e8b\u4ef6\u5904\u7406\u4ea4\u7ed9\u7236\u5143\u7d20\u5904\u7406\u3002<\/p>\n
            \u95ee\u9898<\/strong>: \u5982\u679c\u6709 100 \u4e2a\u6309\u94ae\uff0c\u662f\u5426\u8981\u6dfb\u52a0 100 \u4e2a\u76d1\u542c\u5668\uff1f<\/p>\n
            \u89e3\u51b3<\/strong>: \u4f7f\u7528\u4e8b\u4ef6\u59d4\u6258\uff0c\u53ea\u6dfb\u52a0 1 \u4e2a\u76d1\u542c\u5668\uff01<\/p>\n
            <ul id="list">\n    <li><button>\u6309\u94ae 1<\/button><\/li>\n    <li><button>\u6309\u94ae 2<\/button><\/li>\n    <li><button>\u6309\u94ae 3<\/button><\/li>\n    <!-- \u53ef\u80fd\u6709\u66f4\u591a\u6309\u94ae -->\n<\/ul>\n\n<script>\n    const list = document.getElementById('list');\n\n    \/\/ \u53ea\u6dfb\u52a0\u4e00\u4e2a\u76d1\u542c\u5668\u5230\u7236\u5143\u7d20\n    list.addEventListener('click', function(event) {\n        \/\/ \u68c0\u67e5\u70b9\u51fb\u7684\u662f\u5426\u662f\u6309\u94ae\n        if (event.target.tagName === 'BUTTON') {\n            console.log('\u70b9\u51fb\u4e86:', event.target.textContent);\n        }\n    });\n\n    \/\/ \u52a8\u6001\u6dfb\u52a0\u7684\u6309\u94ae\u4e5f\u4f1a\u751f\u6548\uff01\n    const li = document.createElement('li');\n    const button = document.createElement('button');\n    button.textContent = '\u6309\u94ae 4';\n    li.appendChild(button);\n    list.appendChild(li);\n<\/script>\n<\/code><\/pre>\n
            \u4e8b\u4ef6\u59d4\u6258\u7684\u4f18\u52bf<\/strong>:<\/p>\n
              \n
            • \u2705 \u51cf\u5c11\u4e8b\u4ef6\u76d1\u542c\u5668\u6570\u91cf\uff08\u63d0\u9ad8\u6027\u80fd\uff09<\/li>\n
            • \u2705 \u52a8\u6001\u6dfb\u52a0\u7684\u5143\u7d20\u81ea\u52a8\u7ed1\u5b9a\u4e8b\u4ef6<\/li>\n
            • \u2705 \u4ee3\u7801\u66f4\u7b80\u6d01<\/li>\n<\/ul>\n
              \n
              \u270d\ufe0f \u7ec3\u4e60\u4efb\u52a1<\/h2>\n
              \u7ec3\u4e60 1: \u70b9\u51fb\u8ba1\u6570\u5668<\/h3>\n
              \u76ee\u6807<\/strong>: \u521b\u5efa\u4e00\u4e2a\u8ba1\u6570\u5668\uff0c\u6bcf\u6b21\u70b9\u51fb\u6309\u94ae\u5c31\u52a0 1\u3002<\/p>\n
              \u8981\u6c42<\/strong>:<\/p>\n
                \n
              1. \u663e\u793a\u5f53\u524d\u8ba1\u6570\u503c\uff08\u521d\u59cb\u4e3a 0\uff09<\/li>\n
              2. \u70b9\u51fb"\u589e\u52a0"\u6309\u94ae\uff0c\u8ba1\u6570 +1<\/li>\n
              3. \u70b9\u51fb"\u51cf\u5c11"\u6309\u94ae\uff0c\u8ba1\u6570 -1<\/li>\n
              4. \u70b9\u51fb"\u91cd\u7f6e"\u6309\u94ae\uff0c\u8ba1\u6570\u5f52\u96f6<\/li>\n<\/ol>\n
                HTML \u7ed3\u6784<\/strong>:<\/p>\n
                <h1>\u8ba1\u6570\u5668: <span id="count">0<\/span><\/h1>\n<button id="increase">\u589e\u52a0<\/button>\n<button id="decrease">\u51cf\u5c11<\/button>\n<button id="reset">\u91cd\u7f6e<\/button>\n<\/code><\/pre>\n
                \u63d0\u793a<\/strong>:<\/p>\n
                  \n
                • \u4f7f\u7528 addEventListener<\/code> \u4e3a\u6bcf\u4e2a\u6309\u94ae\u6dfb\u52a0\u4e8b\u4ef6<\/li>\n
                • \u4f7f\u7528 textContent<\/code> \u66f4\u65b0\u8ba1\u6570\u503c<\/li>\n<\/ul>\n
                  \n
                  \u7ec3\u4e60 2: \u8f93\u5165\u9a8c\u8bc1<\/h3>\n
                  \u76ee\u6807<\/strong>: \u521b\u5efa\u4e00\u4e2a\u8868\u5355\uff0c\u5b9e\u65f6\u9a8c\u8bc1\u7528\u6237\u8f93\u5165\u3002<\/p>\n
                  \u9700\u6c42<\/strong>:<\/p>\n
                    \n
                  1. \u7528\u6237\u540d\uff1a\u81f3\u5c11 3 \u4e2a\u5b57\u7b26<\/li>\n
                  2. \u90ae\u7bb1\uff1a\u5fc5\u987b\u5305\u542b @<\/code><\/li>\n
                  3. \u5bc6\u7801\uff1a\u81f3\u5c11 8 \u4e2a\u5b57\u7b26<\/li>\n
                  4. \u5b9e\u65f6\u663e\u793a\u9a8c\u8bc1\u7ed3\u679c\uff08\u2713 \u6216 \u2717\uff09<\/li>\n<\/ol>\n
                    \u63d0\u793a<\/strong>:<\/p>\n
                      \n
                    • \u4f7f\u7528 input<\/code> \u4e8b\u4ef6\u76d1\u542c\u8f93\u5165\u53d8\u5316<\/li>\n
                    • \u4f7f\u7528\u6b63\u5219\u8868\u8fbe\u5f0f\u9a8c\u8bc1\u90ae\u7bb1\u683c\u5f0f<\/li>\n<\/ul>\n
                      \n
                      \u7ec3\u4e60 3: \u7b80\u6613\u5f85\u529e\u4e8b\u9879<\/h3>\n
                      \u76ee\u6807<\/strong>: \u4f7f\u7528\u4e8b\u4ef6\u59d4\u6258\u5b9e\u73b0\u5f85\u529e\u4e8b\u9879\u5217\u8868\u3002<\/p>\n
                      \u529f\u80fd<\/strong>:<\/p>\n
                        \n
                      1. \u8f93\u5165\u6846\u8f93\u5165\u4efb\u52a1\uff0c\u6309\u56de\u8f66\u6dfb\u52a0<\/li>\n
                      2. \u70b9\u51fb\u4efb\u52a1\u53ef\u4ee5\u5207\u6362\u5b8c\u6210\u72b6\u6001<\/li>\n
                      3. \u70b9\u51fb\u5220\u9664\u6309\u94ae\u53ef\u4ee5\u5220\u9664\u4efb\u52a1<\/li>\n
                      4. \u4f7f\u7528\u4e8b\u4ef6\u59d4\u6258\u5904\u7406\u70b9\u51fb\u4e8b\u4ef6<\/li>\n<\/ol>\n
                        \u63d0\u793a<\/strong>:<\/p>\n