{"id":106639,"date":"2026-09-17T20:40:49","date_gmt":"2026-09-17T12:40:49","guid":{"rendered":"https:\/\/www.wsisp.com\/helps\/106639.html"},"modified":"2026-09-17T20:40:49","modified_gmt":"2026-09-17T12:40:49","slug":"python%e5%85%a8%e6%a0%88%e5%85%a5%e9%97%a8%e5%88%b0%e5%ae%9e%e6%88%98%e3%80%90javascript%e7%af%87-16%e3%80%91%e7%bb%bc%e5%90%88%e5%ae%9e%e6%88%98%ef%bc%9a%e4%ba%a4%e4%ba%92%e5%bc%8f%e6%95%b0%e6%8d%ae","status":"publish","type":"post","link":"https:\/\/www.wsisp.com\/helps\/106639.html","title":{"rendered":"Python\u5168\u6808\u5165\u95e8\u5230\u5b9e\u6218\u3010JavaScript\u7bc7 16\u3011\u7efc\u5408\u5b9e\u6218\uff1a\u4ea4\u4e92\u5f0f\u6570\u636e\u770b\u677f\uff0cJavaScript\u5168\u6808\u6280\u80fd\u6574\u5408"},"content":{"rendered":"

\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\"<\/p>\n

\u524d\u8a00<\/h2>\n

\u4e0a\u4e00\u7bc7\u300aJavaScript\u7bc7 15\u300b\u4e2d，\u6211\u4eec\u5b66\u4f1a\u4e86\u7528async\/await\u548cFetch API\u4ece\u540e\u7aef\u83b7\u53d6\u6570\u636e\u3002\u8fd9\u6807\u5fd7\u7740\u524d\u7aef"\u4e09\u677f\u65a7"\u2014\u2014HTML（\u7ed3\u6784）\u3001CSS（\u6837\u5f0f）\u3001JavaScript（\u4ea4\u4e92+\u6570\u636e）\u2014\u2014\u4f60\u5df2\u7ecf\u5b8c\u6574\u638c\u63e1\u3002\u73b0\u5728，\u4f60\u6709\u80fd\u529b\u6784\u5efa\u4e00\u4e2a\u771f\u6b63\u7684"\u52a8\u6001\u6570\u636e\u9a71\u52a8"\u7684\u9875\u9762\u4e86：\u4eceAPI\u83b7\u53d6\u6570\u636e\u3001\u7528JS\u5904\u7406\u6570\u636e\u3001\u518d\u7528DOM\u52a8\u6001\u6e32\u67d3\u5230\u9875\u9762\u4e0a\u3002<\/p>\n

\u672c\u7bc7\u4f5c\u4e3aJavaScript\u7bc7\u7684\u6536\u5b98\u4e4b\u4f5c，\u6211\u4eec\u5c06\u7efc\u5408\u8fd0\u7528\u5168\u90e816\u7bc7\u6587\u7ae0\u7684\u77e5\u8bc6，\u4ece\u96f6\u6784\u5efa\u4e00\u4e2a\u4ea4\u4e92\u5f0f\u6570\u636e\u4eea\u8868\u677f\u3002\u8fd9\u4e2a\u9879\u76ee\u4f1a\u7528\u5230\u4f60\u5b66\u8fc7\u7684\u6240\u6709\u6280\u80fd\u2014\u2014HTML\u7ed3\u6784\u642d\u5efa\u3001CSS Grid\/Flex\u5e03\u5c40\u4e0e\u52a8\u753b\u3001DOM\u64cd\u4f5c\u3001\u4e8b\u4ef6\u5904\u7406\u3001\u5f02\u6b65Fetch\u3001\u6570\u7ec4\u65b9\u6cd5\u3001\u5bf9\u8c61\u4e0eJSON\u2014\u2014\u5168\u90e8\u878d\u5408\u5728\u4e00\u4e2a\u5b8c\u6574\u7684\u9879\u76ee\u4e2d\u3002\u540c\u65f6，\u8fd9\u4e5f\u662f\u4e00\u4e2a\u5728\u7b80\u5386\u4e2d\u53ef\u4ee5\u76f4\u63a5\u5c55\u793a\u7684\u524d\u7aef\u9879\u76ee\u3002<\/p>\n

\u672c\u6587\u4e3aPython\u5168\u6808\u5f00\u53d1\u8005\u91cf\u8eab\u6253\u9020，\u91c7\u7528"\u9879\u76ee\u9a71\u52a8"\u6559\u5b66\u6cd5，\u4ece\u9879\u76ee\u9700\u6c42\u5206\u6790\u5230\u9010\u6a21\u5757\u5b9e\u73b0，\u5b8c\u6574\u8fd8\u539f\u4e00\u4e2a\u524d\u7aef\u6570\u636e\u770b\u677f\u7684\u5f00\u53d1\u5168\u8fc7\u7a0b\u3002\u5b8c\u6210\u8fd9\u4e2a\u9879\u76ee\u540e，\u4f60\u5c31\u53ef\u4ee5\u81ea\u4fe1\u5730\u8bf4：\u201c\u6211\u80fd\u7528JS\u72ec\u7acb\u5f00\u53d1\u524d\u7aef\u4ea4\u4e92\u5e94\u7528\u4e86\u201d\u3002<\/p>\n

\u672c\u8282\u6838\u5fc3\u5b66\u4e60\u5185\u5bb9：<\/p>\n

  • \u9879\u76ee\u9700\u6c42\u5206\u6790\u4e0e\u67b6\u6784\u8bbe\u8ba1<\/li>\n
  • \u6570\u636e\u770b\u677fHTML+CSS\u7ed3\u6784\u642d\u5efa（Grid\u5e03\u5c40）<\/li>\n
  • Fetch\u83b7\u53d6\u6a21\u62dfAPI\u6570\u636e<\/li>\n
  • \u7edf\u8ba1\u5361\u7247\u52a8\u6001\u6e32\u67d3<\/li>\n
  • \u6570\u636e\u8868\u683c：\u641c\u7d22\u3001\u6392\u5e8f\u3001\u5206\u9875\u529f\u80fd<\/li>\n
  • \u7b80\u5355\u7684\u7edf\u8ba1\u56fe\u8868（\u7eafCSS+JS\u5b9e\u73b0）<\/li>\n
  • \u5237\u65b0\u6309\u94ae\u4e0e\u52a0\u8f7d\u52a8\u753b<\/li>\n
  • JavaScript\u7bc7\u77e5\u8bc6\u56de\u987e\u4e0e\u4e0b\u7bc7\u9884\u544a<\/li>\n

    \u6587\u7ae0\u76ee\u5f55<\/h4>\n
      \n
    • \u524d\u8a00<\/li>\n
    • \u4e00\u3001\u9879\u76ee\u67b6\u6784\u8bbe\u8ba1<\/li>\n
    • \n
        \n
      • 1.1 \u9879\u76ee\u6982\u8ff0<\/li>\n
      • 1.2 \u6280\u672f\u6808<\/li>\n
      • 1.3 \u9875\u9762\u67b6\u6784<\/li>\n<\/ul>\n<\/li>\n
      • \u4e8c\u3001\u5b8c\u6574\u4ee3\u7801<\/li>\n
      • \u4e09\u3001\u9879\u76ee\u7528\u5230\u7684\u6240\u6709JS\u6280\u80fd\u56de\u987e<\/li>\n
      • \u56db\u3001JavaScript\u7bc7\u5b66\u4e60\u8def\u5f84\u56de\u987e<\/li>\n
      • \u4e94\u3001\u4e0b\u7bc7\u9884\u544a：Web\u5f00\u53d1\u7bc7<\/li>\n
      • \u516d\u3001\u4e13\u680f\u8ba2\u9605<\/li>\n<\/ul>\n

        \u4e00\u3001\u9879\u76ee\u67b6\u6784\u8bbe\u8ba1<\/h2>\n

        1.1 \u9879\u76ee\u6982\u8ff0<\/h3>\n

        \u6784\u5efa\u4e00\u4e2a"\u8bfe\u7a0b\u9500\u552e\u6570\u636e\u770b\u677f"，\u5305\u542b\u4ee5\u4e0b\u6a21\u5757：<\/p>\n\n\u6a21\u5757\u529f\u80fd\u63cf\u8ff0\u6838\u5fc3JS\u6280\u80fd<\/tr>\n\n\n\n\n\n
        \u7edf\u8ba1\u5361\u7247<\/td>\n\u5c55\u793a\u603b\u9500\u552e\u989d\u3001\u8ba2\u5355\u6570\u3001\u5b66\u5458\u6570（\u52a8\u6001\u66f4\u65b0）<\/td>\n\u5bf9\u8c61\u89e3\u6784\u3001\u6570\u7ec4reduce<\/td>\n<\/tr>\n
        \u6570\u636e\u8868\u683c<\/td>\n\u5c55\u793a\u8bfe\u7a0b\u5217\u8868，\u652f\u6301\u641c\u7d22\/\u6392\u5e8f\/\u5206\u9875<\/td>\n\u6570\u7ec4filter\/sort\/slice\u3001\u4e8b\u4ef6\u59d4\u6258<\/td>\n<\/tr>\n
        \u9500\u552e\u8d8b\u52bf\u56fe<\/td>\n\u7eafCSS\u67f1\u72b6\u56fe\u5c55\u793a\u8fd17\u5929\u9500\u552e\u989d（\u53ef\u5237\u65b0）<\/td>\n\u6570\u7ec4map\u3001DOM\u52a8\u6001\u6e32\u67d3<\/td>\n<\/tr>\n
        \u9876\u90e8\u5bfc\u822a<\/td>\n\u5237\u65b0\u6309\u94ae + \u6700\u540e\u66f4\u65b0\u65f6\u95f4<\/td>\nFetch\u3001\u4e8b\u4ef6\u5904\u7406\u3001\u5f02\u6b65async\/await<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

        1.2 \u6280\u672f\u6808<\/h3>\n
          \n
        • \u5e03\u5c40：CSS Grid + Flex<\/li>\n
        • \u6570\u636e：Fetch API\u4eceJSONPlaceholder\u83b7\u53d6\u6a21\u62df\u6570\u636e<\/li>\n
        • \u4ea4\u4e92：\u4e8b\u4ef6\u59d4\u6258\u3001\u8868\u5355\u4e8b\u4ef6<\/li>\n
        • \u6e32\u67d3：DOM\u64cd\u4f5c（innerHTML + map + join）<\/li>\n
        • \u5f02\u6b65：async\/await<\/li>\n
        • \u52a8\u753b：\u52a0\u8f7d\u8f6c\u5708\u3001\u5361\u7247\u60ac\u505c<\/li>\n<\/ul>\n

          1.3 \u9875\u9762\u67b6\u6784<\/h3>\n

          \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510
          \n\u2502 \u5bfc\u822a\u680f：\u6807\u9898 + \u5237\u65b0\u6309\u94ae + \u66f4\u65b0\u65f6\u95f4 \u2502
          \n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524
          \n\u2502 \u7edf\u8ba1\u5361\u7247：4\u4e2a\u6307\u6807\u5361\u7247（Grid\u81ea\u9002\u5e94） \u2502
          \n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524
          \n\u2502 \u2502
          \n\u2502 \u9500\u552e\u8d8b\u52bf：\u67f1\u72b6\u56fe（\u7eafCSS+JS） \u2502
          \n\u2502 \u2502
          \n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524
          \n\u2502 \u2502
          \n\u2502 \u8bfe\u7a0b\u8868\u683c：\u641c\u7d22+\u6392\u5e8f+\u5206\u9875 \u2502
          \n\u2502 \u2502
          \n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518<\/p>\n

          \u4e8c\u3001\u5b8c\u6574\u4ee3\u7801<\/h2>\n

          \"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\"<\/p>\n

          <!<\/span>DOCTYPE<\/span> html<\/span>><\/span><\/span>
          \n<<\/span>html<\/span> lang<\/span>=<\/span>"<\/span>zh-CN"<\/span><\/span>><\/span><\/span>
          \n<<\/span>head<\/span>><\/span><\/span>
          \n <<\/span>meta<\/span> charset<\/span>=<\/span>"<\/span>UTF-8"<\/span><\/span>><\/span><\/span>
          \n <<\/span>meta<\/span> name<\/span>=<\/span>"<\/span>viewport"<\/span><\/span> content<\/span>=<\/span>"<\/span>width=device-width, initial-scale=1.0"<\/span><\/span>><\/span><\/span>
          \n <<\/span>title<\/span>><\/span><\/span>\u8bfe\u7a0b\u9500\u552e\u6570\u636e\u770b\u677f<\/<\/span>title<\/span>><\/span><\/span>
          \n <<\/span>style<\/span>><\/span><\/span>
          \n \/* ========== \u5168\u5c40 ========== *\/<\/span>
          \n *<\/span> {<\/span> margin<\/span>:<\/span> 0;<\/span> padding<\/span>:<\/span> 0;<\/span> box-sizing<\/span>:<\/span> border-box;<\/span> }<\/span><\/p>\n

          :root<\/span> {<\/span>
          \n –primary<\/span>:<\/span> #3498db;<\/span>
          \n –success<\/span>:<\/span> #2ecc71;<\/span>
          \n –danger<\/span>:<\/span> #e74c3c;<\/span>
          \n –warning<\/span>:<\/span> #f39c12;<\/span>
          \n –dark<\/span>:<\/span> #1a1a2e;<\/span>
          \n –bg<\/span>:<\/span> #f0f2f5;<\/span>
          \n –card-bg<\/span>:<\/span> #ffffff;<\/span>
          \n –text<\/span>:<\/span> #333;<\/span>
          \n –text-light<\/span>:<\/span> #666;<\/span>
          \n –text-lighter<\/span>:<\/span> #999;<\/span>
          \n –border<\/span>:<\/span> #e8e8e8;<\/span>
          \n –radius<\/span>:<\/span> 8px;<\/span>
          \n –shadow<\/span>:<\/span> 0 1px 4px rgba<\/span>(<\/span>0,<\/span>0,<\/span>0,<\/span>0.06)<\/span>;<\/span>
          \n }<\/span><\/p>\n

          body<\/span> {<\/span>
          \n font-family<\/span>:<\/span> "\u5fae\u8f6f\u96c5\u9ed1"<\/span>,<\/span> -apple-system,<\/span> sans-serif;<\/span>
          \n background<\/span>:<\/span> var<\/span>(<\/span>–bg)<\/span>;<\/span>
          \n color<\/span>:<\/span> var<\/span>(<\/span>–text)<\/span>;<\/span>
          \n line-height<\/span>:<\/span> 1.6;<\/span>
          \n font-size<\/span>:<\/span> 14px;<\/span>
          \n }<\/span><\/p>\n

          \/* ========== \u5bfc\u822a\u680f ========== *\/<\/span>
          \n .navbar<\/span> {<\/span>
          \n background<\/span>:<\/span> var<\/span>(<\/span>–dark)<\/span>;<\/span>
          \n color<\/span>:<\/span> white;<\/span>
          \n padding<\/span>:<\/span> 0;<\/span>
          \n position<\/span>:<\/span> sticky;<\/span>
          \n top<\/span>:<\/span> 0;<\/span>
          \n z-index<\/span>:<\/span> 100;<\/span>
          \n }<\/span>
          \n .navbar-inner<\/span> {<\/span>
          \n max-width<\/span>:<\/span> 1200px;<\/span>
          \n margin<\/span>:<\/span> 0 auto;<\/span>
          \n padding<\/span>:<\/span> 15px 20px;<\/span>
          \n display<\/span>:<\/span> flex;<\/span>
          \n justify-content<\/span>:<\/span> space-between;<\/span>
          \n align-items<\/span>:<\/span> center;<\/span>
          \n }<\/span>
          \n .navbar h1<\/span> {<\/span>
          \n font-size<\/span>:<\/span> 20px;<\/span>
          \n font-weight<\/span>:<\/span> 500;<\/span>
          \n }<\/span>
          \n .navbar h1 span<\/span> {<\/span>
          \n color<\/span>:<\/span> var<\/span>(<\/span>–primary)<\/span>;<\/span>
          \n }<\/span>
          \n .navbar-right<\/span> {<\/span>
          \n display<\/span>:<\/span> flex;<\/span>
          \n align-items<\/span>:<\/span> center;<\/span>
          \n gap<\/span>:<\/span> 20px;<\/span>
          \n font-size<\/span>:<\/span> 13px;<\/span>
          \n color<\/span>:<\/span> #ccc;<\/span>
          \n }<\/span>
          \n .refresh-btn<\/span> {<\/span>
          \n padding<\/span>:<\/span> 8px 18px;<\/span>
          \n background<\/span>:<\/span> var<\/span>(<\/span>–primary)<\/span>;<\/span>
          \n color<\/span>:<\/span> white;<\/span>
          \n border<\/span>:<\/span> none;<\/span>
          \n border-radius<\/span>:<\/span> 5px;<\/span>
          \n cursor<\/span>:<\/span> pointer;<\/span>
          \n font-size<\/span>:<\/span> 14px;<\/span>
          \n transition<\/span>:<\/span> background 0.3s;<\/span>
          \n display<\/span>:<\/span> flex;<\/span>
          \n align-items<\/span>:<\/span> center;<\/span>
          \n gap<\/span>:<\/span> 6px;<\/span>
          \n }<\/span>
          \n .refresh-btn:hover<\/span> {<\/span>
          \n background<\/span>:<\/span> #2980b9;<\/span>
          \n }<\/span>
          \n .refresh-btn.loading<\/span> {<\/span>
          \n pointer-events<\/span>:<\/span> none;<\/span>
          \n opacity<\/span>:<\/span> 0.7;<\/span>
          \n }<\/span>
          \n .refresh-btn .spinner<\/span> {<\/span>
          \n display<\/span>:<\/span> none;<\/span>
          \n width<\/span>:<\/span> 14px;<\/span>
          \n height<\/span>:<\/span> 14px;<\/span>
          \n border<\/span>:<\/span> 2px solid rgba<\/span>(<\/span>255,<\/span>255,<\/span>255,<\/span>0.3)<\/span>;<\/span>
          \n border-top-color<\/span>:<\/span> white;<\/span>
          \n border-radius<\/span>:<\/span> 50%;<\/span>
          \n animation<\/span>:<\/span> spin 0.7s linear infinite;<\/span>
          \n }<\/span>
          \n .refresh-btn.loading .spinner<\/span> {<\/span> display<\/span>:<\/span> inline-block;<\/span> }<\/span>
          \n @keyframes<\/span> spin<\/span> {<\/span> to<\/span> {<\/span> transform<\/span>:<\/span> rotate<\/span>(<\/span>360deg)<\/span>;<\/span> }<\/span> }<\/span><\/p>\n

          \/* ========== \u4e3b\u5bb9\u5668 ========== *\/<\/span>
          \n .container<\/span> {<\/span>
          \n max-width<\/span>:<\/span> 1200px;<\/span>
          \n margin<\/span>:<\/span> 25px auto;<\/span>
          \n padding<\/span>:<\/span> 0 20px;<\/span>
          \n }<\/span><\/p>\n

          \/* ========== \u7edf\u8ba1\u5361\u7247 ========== *\/<\/span>
          \n .stats-grid<\/span> {<\/span>
          \n display<\/span>:<\/span> grid;<\/span>
          \n grid-template-columns<\/span>:<\/span> repeat<\/span>(<\/span>auto-fill,<\/span> minmax<\/span>(<\/span>240px,<\/span> 1fr)<\/span>)<\/span>;<\/span>
          \n gap<\/span>:<\/span> 20px;<\/span>
          \n margin-bottom<\/span>:<\/span> 25px;<\/span>
          \n }<\/span>
          \n .stat-card<\/span> {<\/span>
          \n background<\/span>:<\/span> var<\/span>(<\/span>–card-bg)<\/span>;<\/span>
          \n border-radius<\/span>:<\/span> var<\/span>(<\/span>–radius)<\/span>;<\/span>
          \n padding<\/span>:<\/span> 22px;<\/span>
          \n box-shadow<\/span>:<\/span> var<\/span>(<\/span>–shadow)<\/span>;<\/span>
          \n display<\/span>:<\/span> flex;<\/span>
          \n align-items<\/span>:<\/span> center;<\/span>
          \n gap<\/span>:<\/span> 16px;<\/span>
          \n transition<\/span>:<\/span> transform 0.3s;<\/span>
          \n }<\/span>
          \n .stat-card:hover<\/span> {<\/span>
          \n transform<\/span>:<\/span> translateY<\/span>(<\/span>-3px)<\/span>;<\/span>
          \n }<\/span>
          \n .stat-icon<\/span> {<\/span>
          \n width<\/span>:<\/span> 52px;<\/span>
          \n height<\/span>:<\/span> 52px;<\/span>
          \n border-radius<\/span>:<\/span> 12px;<\/span>
          \n display<\/span>:<\/span> flex;<\/span>
          \n justify-content<\/span>:<\/span> center;<\/span>
          \n align-items<\/span>:<\/span> center;<\/span>
          \n font-size<\/span>:<\/span> 24px;<\/span>
          \n color<\/span>:<\/span> white;<\/span>
          \n flex-shrink<\/span>:<\/span> 0;<\/span>
          \n }<\/span>
          \n .stat-icon.blue<\/span> {<\/span> background<\/span>:<\/span> linear-gradient<\/span>(<\/span>135deg,<\/span> #3498db,<\/span> #2980b9)<\/span>;<\/span> }<\/span>
          \n .stat-icon.green<\/span> {<\/span> background<\/span>:<\/span> linear-gradient<\/span>(<\/span>135deg,<\/span> #2ecc71,<\/span> #27ae60)<\/span>;<\/span> }<\/span>
          \n .stat-icon.orange<\/span> {<\/span> background<\/span>:<\/span> linear-gradient<\/span>(<\/span>135deg,<\/span> #f39c12,<\/span> #e67e22)<\/span>;<\/span> }<\/span>
          \n .stat-icon.purple<\/span> {<\/span> background<\/span>:<\/span> linear-gradient<\/span>(<\/span>135deg,<\/span> #9b59b6,<\/span> #8e44ad)<\/span>;<\/span> }<\/span><\/p>\n

          .stat-label<\/span> {<\/span>
          \n font-size<\/span>:<\/span> 13px;<\/span>
          \n color<\/span>:<\/span> var<\/span>(<\/span>–text-lighter)<\/span>;<\/span>
          \n margin-bottom<\/span>:<\/span> 4px;<\/span>
          \n }<\/span>
          \n .stat-value<\/span> {<\/span>
          \n font-size<\/span>:<\/span> 26px;<\/span>
          \n font-weight<\/span>:<\/span> bold;<\/span>
          \n color<\/span>:<\/span> var<\/span>(<\/span>–text)<\/span>;<\/span>
          \n }<\/span>
          \n .stat-change<\/span> {<\/span>
          \n font-size<\/span>:<\/span> 12px;<\/span>
          \n margin-top<\/span>:<\/span> 2px;<\/span>
          \n }<\/span>
          \n .stat-change.up<\/span> {<\/span> color<\/span>:<\/span> var<\/span>(<\/span>–success)<\/span>;<\/span> }<\/span>
          \n .stat-change.down<\/span> {<\/span> color<\/span>:<\/span> var<\/span>(<\/span>–danger)<\/span>;<\/span> }<\/span><\/p>\n

          \/* ========== \u56fe\u8868\u533a ========== *\/<\/span>
          \n .chart-card<\/span> {<\/span>
          \n background<\/span>:<\/span> var<\/span>(<\/span>–card-bg)<\/span>;<\/span>
          \n border-radius<\/span>:<\/span> var<\/span>(<\/span>–radius)<\/span>;<\/span>
          \n padding<\/span>:<\/span> 22px;<\/span>
          \n box-shadow<\/span>:<\/span> var<\/span>(<\/span>–shadow)<\/span>;<\/span>
          \n margin-bottom<\/span>:<\/span> 25px;<\/span>
          \n }<\/span>
          \n .chart-card h3<\/span> {<\/span>
          \n font-size<\/span>:<\/span> 16px;<\/span>
          \n margin-bottom<\/span>:<\/span> 18px;<\/span>
          \n display<\/span>:<\/span> flex;<\/span>
          \n justify-content<\/span>:<\/span> space-between;<\/span>
          \n align-items<\/span>:<\/span> center;<\/span>
          \n }<\/span>
          \n .chart-container<\/span> {<\/span>
          \n display<\/span>:<\/span> flex;<\/span>
          \n align-items<\/span>:<\/span> flex-end;<\/span>
          \n gap<\/span>:<\/span> 12px;<\/span>
          \n height<\/span>:<\/span> 200px;<\/span>
          \n padding<\/span>:<\/span> 0 10px;<\/span>
          \n }<\/span>
          \n .chart-bar-wrapper<\/span> {<\/span>
          \n flex<\/span>:<\/span> 1;<\/span>
          \n display<\/span>:<\/span> flex;<\/span>
          \n flex-direction<\/span>:<\/span> column;<\/span>
          \n align-items<\/span>:<\/span> center;<\/span>
          \n height<\/span>:<\/span> 100%;<\/span>
          \n justify-content<\/span>:<\/span> flex-end;<\/span>
          \n }<\/span>
          \n .chart-bar<\/span> {<\/span>
          \n width<\/span>:<\/span> 100%;<\/span>
          \n max-width<\/span>:<\/span> 50px;<\/span>
          \n background<\/span>:<\/span> linear-gradient<\/span>(<\/span>180deg,<\/span> #3498db,<\/span> #2980b9)<\/span>;<\/span>
          \n border-radius<\/span>:<\/span> 4px 4px 0 0;<\/span>
          \n transition<\/span>:<\/span> height 0.5s ease;<\/span>
          \n position<\/span>:<\/span> relative;<\/span>
          \n }<\/span>
          \n .chart-bar:hover<\/span> {<\/span>
          \n background<\/span>:<\/span> linear-gradient<\/span>(<\/span>180deg,<\/span> #5dade2,<\/span> #3498db)<\/span>;<\/span>
          \n }<\/span>
          \n .chart-value<\/span> {<\/span>
          \n font-size<\/span>:<\/span> 12px;<\/span>
          \n color<\/span>:<\/span> var<\/span>(<\/span>–text-light)<\/span>;<\/span>
          \n margin-bottom<\/span>:<\/span> 5px;<\/span>
          \n font-weight<\/span>:<\/span> bold;<\/span>
          \n }<\/span>
          \n .chart-label<\/span> {<\/span>
          \n font-size<\/span>:<\/span> 12px;<\/span>
          \n color<\/span>:<\/span> var<\/span>(<\/span>–text-lighter)<\/span>;<\/span>
          \n margin-top<\/span>:<\/span> 8px;<\/span>
          \n }<\/span><\/p>\n

          \/* ========== \u8868\u683c\u533a\u57df ========== *\/<\/span>
          \n .table-card<\/span> {<\/span>
          \n background<\/span>:<\/span> var<\/span>(<\/span>–card-bg)<\/span>;<\/span>
          \n border-radius<\/span>:<\/span> var<\/span>(<\/span>–radius)<\/span>;<\/span>
          \n padding<\/span>:<\/span> 22px;<\/span>
          \n box-shadow<\/span>:<\/span> var<\/span>(<\/span>–shadow)<\/span>;<\/span>
          \n }<\/span>
          \n .table-header-bar<\/span> {<\/span>
          \n display<\/span>:<\/span> flex;<\/span>
          \n justify-content<\/span>:<\/span> space-between;<\/span>
          \n align-items<\/span>:<\/span> center;<\/span>
          \n margin-bottom<\/span>:<\/span> 18px;<\/span>
          \n flex-wrap<\/span>:<\/span> wrap;<\/span>
          \n gap<\/span>:<\/span> 12px;<\/span>
          \n }<\/span>
          \n .table-header-bar h3<\/span> {<\/span> font-size<\/span>:<\/span> 16px;<\/span> }<\/span>
          \n .search-box input<\/span> {<\/span>
          \n padding<\/span>:<\/span> 8px 14px;<\/span>
          \n border<\/span>:<\/span> 1px solid var<\/span>(<\/span>–border)<\/span>;<\/span>
          \n border-radius<\/span>:<\/span> 20px;<\/span>
          \n font-size<\/span>:<\/span> 14px;<\/span>
          \n outline<\/span>:<\/span> none;<\/span>
          \n width<\/span>:<\/span> 220px;<\/span>
          \n transition<\/span>:<\/span> border-color 0.3s;<\/span>
          \n }<\/span>
          \n .search-box input:focus<\/span> {<\/span>
          \n border-color<\/span>:<\/span> var<\/span>(<\/span>–primary)<\/span>;<\/span>
          \n }<\/span>
          \n table<\/span> {<\/span>
          \n width<\/span>:<\/span> 100%;<\/span>
          \n border-collapse<\/span>:<\/span> collapse;<\/span>
          \n }<\/span>
          \n th<\/span> {<\/span>
          \n text-align<\/span>:<\/span> left;<\/span>
          \n padding<\/span>:<\/span> 10px 12px;<\/span>
          \n border-bottom<\/span>:<\/span> 2px solid var<\/span>(<\/span>–border)<\/span>;<\/span>
          \n font-size<\/span>:<\/span> 13px;<\/span>
          \n color<\/span>:<\/span> var<\/span>(<\/span>–text-lighter)<\/span>;<\/span>
          \n cursor<\/span>:<\/span> pointer;<\/span>
          \n user-select<\/span>:<\/span> none;<\/span>
          \n white-space<\/span>:<\/span> nowrap;<\/span>
          \n }<\/span>
          \n th:hover<\/span> {<\/span> color<\/span>:<\/span> var<\/span>(<\/span>–text)<\/span>;<\/span> }<\/span>
          \n th .sort-arrow<\/span> {<\/span> margin-left<\/span>:<\/span> 4px;<\/span> font-size<\/span>:<\/span> 11px;<\/span> }<\/span>
          \n td<\/span> {<\/span>
          \n padding<\/span>:<\/span> 10px 12px;<\/span>
          \n border-bottom<\/span>:<\/span> 1px solid #f0f0f0;<\/span>
          \n font-size<\/span>:<\/span> 14px;<\/span>
          \n }<\/span>
          \n tr:hover td<\/span> {<\/span> background<\/span>:<\/span> #fafafa;<\/span> }<\/span><\/p>\n

          .tag<\/span> {<\/span>
          \n display<\/span>:<\/span> inline-block;<\/span>
          \n padding<\/span>:<\/span> 2px 10px;<\/span>
          \n border-radius<\/span>:<\/span> 12px;<\/span>
          \n font-size<\/span>:<\/span> 12px;<\/span>
          \n }<\/span>
          \n .tag-hot<\/span> {<\/span> background<\/span>:<\/span> #fde8e8;<\/span> color<\/span>:<\/span> #e74c3c;<\/span> }<\/span>
          \n .tag-new<\/span> {<\/span> background<\/span>:<\/span> #e8f4fd;<\/span> color<\/span>:<\/span> #3498db;<\/span> }<\/span>
          \n .tag-normal<\/span> {<\/span> background<\/span>:<\/span> #eaf7e9;<\/span> color<\/span>:<\/span> #27ae60;<\/span> }<\/span><\/p>\n

          \/* \u5206\u9875 *\/<\/span>
          \n .pagination<\/span> {<\/span>
          \n display<\/span>:<\/span> flex;<\/span>
          \n justify-content<\/span>:<\/span> center;<\/span>
          \n align-items<\/span>:<\/span> center;<\/span>
          \n gap<\/span>:<\/span> 6px;<\/span>
          \n margin-top<\/span>:<\/span> 20px;<\/span>
          \n }<\/span>
          \n .pagination button<\/span> {<\/span>
          \n padding<\/span>:<\/span> 6px 12px;<\/span>
          \n border<\/span>:<\/span> 1px solid var<\/span>(<\/span>–border)<\/span>;<\/span>
          \n background<\/span>:<\/span> white;<\/span>
          \n border-radius<\/span>:<\/span> 4px;<\/span>
          \n cursor<\/span>:<\/span> pointer;<\/span>
          \n font-size<\/span>:<\/span> 13px;<\/span>
          \n transition<\/span>:<\/span> all 0.2s;<\/span>
          \n }<\/span>
          \n .pagination button:hover:not(:disabled)<\/span> {<\/span>
          \n background<\/span>:<\/span> var<\/span>(<\/span>–primary)<\/span>;<\/span>
          \n color<\/span>:<\/span> white;<\/span>
          \n border-color<\/span>:<\/span> var<\/span>(<\/span>–primary)<\/span>;<\/span>
          \n }<\/span>
          \n .pagination button:disabled<\/span> {<\/span>
          \n opacity<\/span>:<\/span> 0.4;<\/span>
          \n cursor<\/span>:<\/span> default;<\/span>
          \n }<\/span>
          \n .pagination button.active<\/span> {<\/span>
          \n background<\/span>:<\/span> var<\/span>(<\/span>–primary)<\/span>;<\/span>
          \n color<\/span>:<\/span> white;<\/span>
          \n border-color<\/span>:<\/span> var<\/span>(<\/span>–primary)<\/span>;<\/span>
          \n }<\/span>
          \n .pagination .page-info<\/span> {<\/span>
          \n font-size<\/span>:<\/span> 13px;<\/span>
          \n color<\/span>:<\/span> var<\/span>(<\/span>–text-lighter)<\/span>;<\/span>
          \n margin<\/span>:<\/span> 0 10px;<\/span>
          \n }<\/span><\/p>\n

          \/* \u65e0\u6570\u636e\/\u9519\u8bef\u72b6\u6001 *\/<\/span>
          \n .empty-state<\/span> {<\/span>
          \n text-align<\/span>:<\/span> center;<\/span>
          \n padding<\/span>:<\/span> 40px;<\/span>
          \n color<\/span>:<\/span> var<\/span>(<\/span>–text-lighter)<\/span>;<\/span>
          \n }<\/span><\/p>\n

          \/* ========== \u54cd\u5e94\u5f0f ========== *\/<\/span>
          \n @media<\/span> (<\/span>max-width<\/span>:<\/span> 768px)<\/span><\/span> {<\/span>
          \n .navbar-inner<\/span> {<\/span> flex-direction<\/span>:<\/span> column;<\/span> gap<\/span>:<\/span> 10px;<\/span> }<\/span>
          \n .navbar-right<\/span> {<\/span> width<\/span>:<\/span> 100%;<\/span> justify-content<\/span>:<\/span> center;<\/span> }<\/span>
          \n .table-header-bar<\/span> {<\/span> flex-direction<\/span>:<\/span> column;<\/span> align-items<\/span>:<\/span> stretch;<\/span> }<\/span>
          \n .search-box input<\/span> {<\/span> width<\/span>:<\/span> 100%;<\/span> }<\/span>
          \n .pagination<\/span> {<\/span> flex-wrap<\/span>:<\/span> wrap;<\/span> }<\/span>
          \n .chart-container<\/span> {<\/span> height<\/span>:<\/span> 150px;<\/span> }<\/span>
          \n }<\/span>
          \n <\/span><\/span><\/<\/span>style<\/span>><\/span><\/span>
          \n<\/<\/span>head<\/span>><\/span><\/span>
          \n<<\/span>body<\/span>><\/span><\/span>
          \n <!– \u5bfc\u822a\u680f –><\/span>
          \n <<\/span>nav<\/span> class<\/span>=<\/span>"<\/span>navbar"<\/span><\/span>><\/span><\/span>
          \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>navbar-inner"<\/span><\/span>><\/span><\/span>
          \n <<\/span>h1<\/span>><\/span><\/span><<\/span>span<\/span>><\/span><\/span>Python<\/<\/span>span<\/span>><\/span><\/span>\u6570\u636e\u5206\u6790\u770b\u677f<\/<\/span>h1<\/span>><\/span><\/span>
          \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>navbar-right"<\/span><\/span>><\/span><\/span>
          \n <<\/span>span<\/span> id<\/span>=<\/span>"<\/span>update-time"<\/span><\/span>><\/span><\/span>\u6700\u540e\u66f4\u65b0：–<\/<\/span>span<\/span>><\/span><\/span>
          \n <<\/span>button<\/span> class<\/span>=<\/span>"<\/span>refresh-btn"<\/span><\/span> id<\/span>=<\/span>"<\/span>refresh-btn"<\/span><\/span>><\/span><\/span>
          \n <<\/span>span<\/span> class<\/span>=<\/span>"<\/span>spinner"<\/span><\/span>><\/span><\/span><\/<\/span>span<\/span>><\/span><\/span>
          \n \u5237\u65b0\u6570\u636e
          \n <\/<\/span>button<\/span>><\/span><\/span>
          \n <\/<\/span>div<\/span>><\/span><\/span>
          \n <\/<\/span>div<\/span>><\/span><\/span>
          \n <\/<\/span>nav<\/span>><\/span><\/span><\/p>\n

          <!– \u4e3b\u5185\u5bb9 –><\/span>
          \n <<\/span>main<\/span> class<\/span>=<\/span>"<\/span>container"<\/span><\/span>><\/span><\/span>
          \n <!– \u7edf\u8ba1\u5361\u7247 –><\/span>
          \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>stats-grid"<\/span><\/span> id<\/span>=<\/span>"<\/span>stats-grid"<\/span><\/span>><\/span><\/span><\/<\/span>div<\/span>><\/span><\/span><\/p>\n

          <!– \u9500\u552e\u8d8b\u52bf\u56fe –><\/span>
          \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>chart-card"<\/span><\/span>><\/span><\/span>
          \n <<\/span>h3<\/span>><\/span><\/span>\u8fd17\u5929\u9500\u552e\u8d8b\u52bf <<\/span>span<\/span> style<\/span>=<\/span>"<\/span>font-weight<\/span>:<\/span>normal;<\/span>font-size<\/span>:<\/span>13px;<\/span>color<\/span>:<\/span>#999<\/span>"<\/span><\/span><\/span>><\/span><\/span>\u5355\u4f4d：\u5143<\/<\/span>span<\/span>><\/span><\/span><\/<\/span>h3<\/span>><\/span><\/span>
          \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>chart-container"<\/span><\/span> id<\/span>=<\/span>"<\/span>chart-container"<\/span><\/span>><\/span><\/span><\/<\/span>div<\/span>><\/span><\/span>
          \n <\/<\/span>div<\/span>><\/span><\/span><\/p>\n

          <!– \u6570\u636e\u8868\u683c –><\/span>
          \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>table-card"<\/span><\/span>><\/span><\/span>
          \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>table-header-bar"<\/span><\/span>><\/span><\/span>
          \n <<\/span>h3<\/span>><\/span><\/span>\u8bfe\u7a0b\u9500\u552e\u5217\u8868<\/<\/span>h3<\/span>><\/span><\/span>
          \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>search-box"<\/span><\/span>><\/span><\/span>
          \n <<\/span>input<\/span> type<\/span>=<\/span>"<\/span>text"<\/span><\/span> id<\/span>=<\/span>"<\/span>search-input"<\/span><\/span> placeholder<\/span>=<\/span>"<\/span>\u641c\u7d22\u8bfe\u7a0b\u540d\u79f0…"<\/span><\/span>><\/span><\/span>
          \n <\/<\/span>div<\/span>><\/span><\/span>
          \n <\/<\/span>div<\/span>><\/span><\/span>
          \n <<\/span>div<\/span> id<\/span>=<\/span>"<\/span>table-wrapper"<\/span><\/span>><\/span><\/span>
          \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>empty-state"<\/span><\/span>><\/span><\/span>\u52a0\u8f7d\u4e2d…<\/<\/span>div<\/span>><\/span><\/span>
          \n <\/<\/span>div<\/span>><\/span><\/span>
          \n <\/<\/span>div<\/span>><\/span><\/span>
          \n <\/<\/span>main<\/span>><\/span><\/span><\/p>\n

          <<\/span>script<\/span>><\/span><\/span>
          \n \/\/ ========== \u5168\u5c40\u72b6\u6001 ==========<\/span>
          \n let<\/span> allCourses =<\/span> [<\/span>]<\/span>;<\/span> \/\/ \u5168\u91cf\u6570\u636e<\/span>
          \n let<\/span> filteredCourses =<\/span> [<\/span>]<\/span>;<\/span> \/\/ \u641c\u7d22\/\u6392\u5e8f\u540e\u7684\u6570\u636e<\/span>
          \n let<\/span> sortField =<\/span> "sales"<\/span>;<\/span>
          \n let<\/span> sortOrder =<\/span> "desc"<\/span>;<\/span> \/\/ "asc" \u6216 "desc"<\/span>
          \n let<\/span> currentPage =<\/span> 1<\/span>;<\/span>
          \n const<\/span> pageSize =<\/span> 6<\/span>;<\/span><\/p>\n

          \/\/ ========== \u5de5\u5177\u51fd\u6570 ==========<\/span>
          \n function<\/span> formatCurrency<\/span>(<\/span>num<\/span>)<\/span> {<\/span>
          \n return<\/span> "\u00a5"<\/span> +<\/span> num.<\/span>toLocaleString<\/span>(<\/span>"zh-CN"<\/span>)<\/span>;<\/span>
          \n }<\/span><\/p>\n

          function<\/span> formatDate<\/span>(<\/span>)<\/span> {<\/span>
          \n const<\/span> now =<\/span> new<\/span> Date<\/span>(<\/span>)<\/span>;<\/span>
          \n return<\/span> now.<\/span>toLocaleString<\/span>(<\/span>"zh-CN"<\/span>)<\/span>;<\/span>
          \n }<\/span><\/p>\n

          \/\/ ========== \u6570\u636e\u83b7\u53d6 ==========<\/span>
          \n async<\/span> function<\/span> fetchDashboardData<\/span>(<\/span>)<\/span> {<\/span>
          \n const<\/span> refreshBtn =<\/span> document.<\/span>querySelector<\/span>(<\/span>"#refresh-btn"<\/span>)<\/span>;<\/span>
          \n refreshBtn.<\/span>classList.<\/span>add<\/span>(<\/span>"loading"<\/span>)<\/span>;<\/span><\/p>\n

          try<\/span> {<\/span>
          \n const<\/span> response =<\/span> await<\/span> fetch<\/span>(<\/span>"https:\/\/jsonplaceholder.typicode.com\/users"<\/span>)<\/span>;<\/span>
          \n if<\/span> (<\/span>!<\/span>response.<\/span>ok)<\/span> throw<\/span> new<\/span> Error<\/span>(<\/span>`<\/span>HTTP <\/span>${<\/span>response.<\/span>status}<\/span><\/span>`<\/span><\/span>)<\/span>;<\/span>
          \n const<\/span> users =<\/span> await<\/span> response.<\/span>json<\/span>(<\/span>)<\/span>;<\/span><\/p>\n

          \/\/ \u7528\u771f\u5b9eAPI\u7684\u7528\u6237\u6570\u636e\u6a21\u62df\u8bfe\u7a0b\u9500\u552e\u6570\u636e<\/span>
          \n const<\/span> tags =<\/span> [<\/span>"hot"<\/span>,<\/span> "new"<\/span>,<\/span> "normal"<\/span>]<\/span>;<\/span>
          \n const<\/span> tagLabels =<\/span> {<\/span> hot<\/span>:<\/span> "\u70ed\u95e8"<\/span>,<\/span> new<\/span>:<\/span> "\u65b0\u8bfe"<\/span>,<\/span> normal<\/span>:<\/span> "\u5e38\u89c4"<\/span> }<\/span>;<\/span><\/p>\n

          allCourses =<\/span> users.<\/span>slice<\/span>(<\/span>0<\/span>,<\/span> 12<\/span>)<\/span>.<\/span>map<\/span>(<\/span>(<\/span>user,<\/span> i<\/span>)<\/span> =><\/span> (<\/span>{<\/span>
          \n id<\/span>:<\/span> i +<\/span> 1<\/span>,<\/span>
          \n title<\/span>:<\/span> `<\/span>\u3010<\/span>${<\/span>user.<\/span>name.<\/span>split<\/span>(<\/span>" "<\/span>)<\/span>[<\/span>0<\/span>]<\/span>}<\/span><\/span>\u3011<\/span>${<\/span>[<\/span>"Python\u5168\u6808\u5b9e\u6218"<\/span>,<\/span> "JavaScript\u9ad8\u7ea7\u7f16\u7a0b"<\/span>,<\/span> "MySQL\u6027\u80fd\u4f18\u5316"<\/span>,<\/span> "Django\u4f01\u4e1a\u5f00\u53d1"<\/span>,<\/span> "FastAPI\u5fae\u670d\u52a1"<\/span>,<\/span> "Vue3\u524d\u7aef\u5b9e\u6218"<\/span>,<\/span> "Linux\u8fd0\u7ef4\u90e8\u7f72"<\/span>,<\/span> "Redis\u7f13\u5b58\u6280\u672f"<\/span>,<\/span> "Docker\u5bb9\u5668\u5316"<\/span>,<\/span> "AI\u5927\u6a21\u578b\u5e94\u7528"<\/span>,<\/span> "\u7f51\u7edc\u722c\u866b\u5b9e\u6218"<\/span>,<\/span> "\u6570\u636e\u7ed3\u6784\u4e0e\u7b97\u6cd5"<\/span>]<\/span>[<\/span>i %<\/span> 12<\/span>]<\/span>}<\/span><\/span>`<\/span><\/span>,<\/span>
          \n category<\/span>:<\/span> [<\/span>"Python"<\/span>,<\/span> "\u524d\u7aef"<\/span>,<\/span> "\u6570\u636e\u5e93"<\/span>,<\/span> "\u8fd0\u7ef4"<\/span>,<\/span> "AI"<\/span>]<\/span>[<\/span>i %<\/span> 5<\/span>]<\/span>,<\/span>
          \n price<\/span>:<\/span> (<\/span>Math.<\/span>random<\/span>(<\/span>)<\/span> *<\/span> 200<\/span> +<\/span> 50<\/span>)<\/span>.<\/span>toFixed<\/span>(<\/span>2<\/span>)<\/span> *<\/span> 1<\/span>,<\/span>
          \n sales<\/span>:<\/span> Math.<\/span>floor<\/span>(<\/span>Math.<\/span>random<\/span>(<\/span>)<\/span> *<\/span> 5000<\/span>)<\/span> +<\/span> 200<\/span>,<\/span>
          \n rating<\/span>:<\/span> (<\/span>Math.<\/span>random<\/span>(<\/span>)<\/span> *<\/span> 2<\/span> +<\/span> 3<\/span>)<\/span>.<\/span>toFixed<\/span>(<\/span>1<\/span>)<\/span> *<\/span> 1<\/span>,<\/span>
          \n tag<\/span>:<\/span> tags[<\/span>i %<\/span> 3<\/span>]<\/span>,<\/span>
          \n tagLabel<\/span>:<\/span> tagLabels[<\/span>tags[<\/span>i %<\/span> 3<\/span>]<\/span>]<\/span>,<\/span>
          \n updated<\/span>:<\/span> new<\/span> Date<\/span>(<\/span>Date.<\/span>now<\/span>(<\/span>)<\/span> –<\/span> Math.<\/span>random<\/span>(<\/span>)<\/span> *<\/span> 30<\/span> *<\/span> 86400000<\/span>)<\/span>.<\/span>toISOString<\/span>(<\/span>)<\/span>.<\/span>split<\/span>(<\/span>"T"<\/span>)<\/span>[<\/span>0<\/span>]<\/span>
          \n }<\/span>)<\/span>)<\/span>;<\/span><\/p>\n

          filteredCourses =<\/span> [<\/span>…<\/span>allCourses]<\/span>;<\/span>
          \n document.<\/span>querySelector<\/span>(<\/span>"#update-time"<\/span>)<\/span>.<\/span>textContent =<\/span> `<\/span>\u6700\u540e\u66f4\u65b0：<\/span>${<\/span>formatDate<\/span>(<\/span>)<\/span>}<\/span><\/span>`<\/span><\/span>;<\/span><\/p>\n

          renderAll<\/span>(<\/span>)<\/span>;<\/span>
          \n }<\/span> catch<\/span> (<\/span>error)<\/span> {<\/span>
          \n console.<\/span>error<\/span>(<\/span>"\u6570\u636e\u52a0\u8f7d\u5931\u8d25："<\/span>,<\/span> error.<\/span>message)<\/span>;<\/span>
          \n document.<\/span>querySelector<\/span>(<\/span>"#table-wrapper"<\/span>)<\/span>.<\/span>innerHTML =<\/span> `<\/span>
          \n <div class="empty-state" style="color:#e74c3c;">
          \n \u6570\u636e\u52a0\u8f7d\u5931\u8d25：<\/span>${<\/span>error.<\/span>message}<\/span><\/span><br>
          \n <button class="refresh-btn" onclick="fetchDashboardData()" style="margin-top:12px">\u91cd\u65b0\u52a0\u8f7d<\/button>
          \n <\/div>
          \n <\/span>`<\/span><\/span>;<\/span>
          \n }<\/span> finally<\/span> {<\/span>
          \n refreshBtn.<\/span>classList.<\/span>remove<\/span>(<\/span>"loading"<\/span>)<\/span>;<\/span>
          \n }<\/span>
          \n }<\/span><\/p>\n

          \/\/ ========== \u6e32\u67d3\u7edf\u8ba1\u5361\u7247 ==========<\/span>
          \n function<\/span> renderStats<\/span>(<\/span>)<\/span> {<\/span>
          \n const<\/span> totalSales =<\/span> filteredCourses.<\/span>reduce<\/span>(<\/span>(<\/span>sum,<\/span> c<\/span>)<\/span> =><\/span> sum +<\/span> c.<\/span>sales,<\/span> 0<\/span>)<\/span>;<\/span>
          \n const<\/span> totalCourses =<\/span> filteredCourses.<\/span>length;<\/span>
          \n const<\/span> avgRating =<\/span> (<\/span>filteredCourses.<\/span>reduce<\/span>(<\/span>(<\/span>sum,<\/span> c<\/span>)<\/span> =><\/span> sum +<\/span> c.<\/span>rating,<\/span> 0<\/span>)<\/span> \/<\/span> totalCourses)<\/span>.<\/span>toFixed<\/span>(<\/span>1<\/span>)<\/span>;<\/span>
          \n const<\/span> avgPrice =<\/span> (<\/span>filteredCourses.<\/span>reduce<\/span>(<\/span>(<\/span>sum,<\/span> c<\/span>)<\/span> =><\/span> sum +<\/span> c.<\/span>price,<\/span> 0<\/span>)<\/span> \/<\/span> totalCourses)<\/span>.<\/span>toFixed<\/span>(<\/span>0<\/span>)<\/span>;<\/span><\/p>\n

          const<\/span> stats =<\/span> [<\/span>
          \n {<\/span> label<\/span>:<\/span> "\u603b\u9500\u552e\u989d"<\/span>,<\/span> value<\/span>:<\/span> formatCurrency<\/span>(<\/span>totalSales)<\/span>,<\/span> icon<\/span>:<\/span> "&#128200;"<\/span>,<\/span> color<\/span>:<\/span> "blue"<\/span>,<\/span> change<\/span>:<\/span> "+12.5%"<\/span>,<\/span> direction<\/span>:<\/span> "up"<\/span> }<\/span>,<\/span>
          \n {<\/span> label<\/span>:<\/span> "\u8bfe\u7a0b\u603b\u6570"<\/span>,<\/span> value<\/span>:<\/span> totalCourses +<\/span> " \u95e8"<\/span>,<\/span> icon<\/span>:<\/span> "&#128218;"<\/span>,<\/span> color<\/span>:<\/span> "green"<\/span>,<\/span> change<\/span>:<\/span> `<\/span>\u5728\u7ebf <\/span>${<\/span>totalCourses}<\/span><\/span>`<\/span><\/span>,<\/span> direction<\/span>:<\/span> "up"<\/span> }<\/span>,<\/span>
          \n {<\/span> label<\/span>:<\/span> "\u5e73\u5747\u8bc4\u5206"<\/span>,<\/span> value<\/span>:<\/span> avgRating +<\/span> " \/ 5.0"<\/span>,<\/span> icon<\/span>:<\/span> "&#11088;"<\/span>,<\/span> color<\/span>:<\/span> "orange"<\/span>,<\/span> change<\/span>:<\/span> "-0.1%"<\/span>,<\/span> direction<\/span>:<\/span> "down"<\/span> }<\/span>,<\/span>
          \n {<\/span> label<\/span>:<\/span> "\u5e73\u5747\u4ef7\u683c"<\/span>,<\/span> value<\/span>:<\/span> formatCurrency<\/span>(<\/span>avgPrice)<\/span>,<\/span> icon<\/span>:<\/span> "&#128176;"<\/span>,<\/span> color<\/span>:<\/span> "purple"<\/span>,<\/span> change<\/span>:<\/span> "+5.2%"<\/span>,<\/span> direction<\/span>:<\/span> "up"<\/span> }<\/span>
          \n ]<\/span>;<\/span><\/p>\n

          document.<\/span>querySelector<\/span>(<\/span>"#stats-grid"<\/span>)<\/span>.<\/span>innerHTML =<\/span> stats.<\/span>map<\/span>(<\/span>s<\/span> =><\/span> `<\/span>
          \n <div class="stat-card">
          \n <div class="stat-icon <\/span>${<\/span>s.<\/span>color}<\/span><\/span>"><\/span>${<\/span>s.<\/span>icon}<\/span><\/span><\/div>
          \n <div>
          \n <div class="stat-label"><\/span>${<\/span>s.<\/span>label}<\/span><\/span><\/div>
          \n <div class="stat-value"><\/span>${<\/span>s.<\/span>value}<\/span><\/span><\/div>
          \n <div class="stat-change <\/span>${<\/span>s.<\/span>direction}<\/span><\/span>"><\/span>${<\/span>s.<\/span>change}<\/span><\/span> <\/span>${<\/span>s.<\/span>direction ===<\/span> "up"<\/span> ?<\/span> "&#8593;"<\/span> :<\/span> "&#8595;"<\/span>}<\/span><\/span><\/div>
          \n <\/div>
          \n <\/div>
          \n <\/span>`<\/span><\/span>)<\/span>.<\/span>join<\/span>(<\/span>""<\/span>)<\/span>;<\/span>
          \n }<\/span><\/p>\n

          \/\/ ========== \u6e32\u67d3\u67f1\u72b6\u56fe ==========<\/span>
          \n function<\/span> renderChart<\/span>(<\/span>)<\/span> {<\/span>
          \n const<\/span> days =<\/span> [<\/span>"\u5468\u4e00"<\/span>,<\/span> "\u5468\u4e8c"<\/span>,<\/span> "\u5468\u4e09"<\/span>,<\/span> "\u5468\u56db"<\/span>,<\/span> "\u5468\u4e94"<\/span>,<\/span> "\u5468\u516d"<\/span>,<\/span> "\u5468\u65e5"<\/span>]<\/span>;<\/span>
          \n const<\/span> values =<\/span> days.<\/span>map<\/span>(<\/span>(<\/span>)<\/span> =><\/span> Math.<\/span>floor<\/span>(<\/span>Math.<\/span>random<\/span>(<\/span>)<\/span> *<\/span> 8000<\/span>)<\/span> +<\/span> 2000<\/span>)<\/span>;<\/span>
          \n const<\/span> maxValue =<\/span> Math.<\/span>max<\/span>(<\/span>…<\/span>values)<\/span>;<\/span><\/p>\n

          document.<\/span>querySelector<\/span>(<\/span>"#chart-container"<\/span>)<\/span>.<\/span>innerHTML =<\/span> values.<\/span>map<\/span>(<\/span>(<\/span>v,<\/span> i<\/span>)<\/span> =><\/span> {<\/span>
          \n const<\/span> heightPercent =<\/span> (<\/span>v \/<\/span> maxValue *<\/span> 100<\/span>)<\/span>.<\/span>toFixed<\/span>(<\/span>0<\/span>)<\/span>;<\/span>
          \n return<\/span> `<\/span>
          \n <div class="chart-bar-wrapper">
          \n <div class="chart-value"><\/span>${<\/span>formatCurrency<\/span>(<\/span>v)<\/span>}<\/span><\/span><\/div>
          \n <div class="chart-bar" style="height:<\/span>${<\/span>heightPercent}<\/span><\/span>%"><\/div>
          \n <div class="chart-label"><\/span>${<\/span>days[<\/span>i]<\/span>}<\/span><\/span><\/div>
          \n <\/div>
          \n <\/span>`<\/span><\/span>;<\/span>
          \n }<\/span>)<\/span>.<\/span>join<\/span>(<\/span>""<\/span>)<\/span>;<\/span>
          \n }<\/span><\/p>\n

          \/\/ ========== \u641c\u7d22\u4e0e\u6392\u5e8f ==========<\/span>
          \n function<\/span> applyFilters<\/span>(<\/span>)<\/span> {<\/span>
          \n const<\/span> keyword =<\/span> document.<\/span>querySelector<\/span>(<\/span>"#search-input"<\/span>)<\/span>.<\/span>value.<\/span>toLowerCase<\/span>(<\/span>)<\/span>.<\/span>trim<\/span>(<\/span>)<\/span>;<\/span><\/p>\n

          \/\/ \u641c\u7d22\u8fc7\u6ee4<\/span>
          \n let<\/span> result =<\/span> allCourses.<\/span>filter<\/span>(<\/span>c<\/span> =><\/span>
          \n c.<\/span>title.<\/span>toLowerCase<\/span>(<\/span>)<\/span>.<\/span>includes<\/span>(<\/span>keyword)<\/span> ||<\/span>
          \n c.<\/span>category.<\/span>toLowerCase<\/span>(<\/span>)<\/span>.<\/span>includes<\/span>(<\/span>keyword)<\/span>
          \n )<\/span>;<\/span><\/p>\n

          \/\/ \u6392\u5e8f<\/span>
          \n result.<\/span>sort<\/span>(<\/span>(<\/span>a,<\/span> b<\/span>)<\/span> =><\/span> {<\/span>
          \n const<\/span> aVal =<\/span> a[<\/span>sortField]<\/span>;<\/span>
          \n const<\/span> bVal =<\/span> b[<\/span>sortField]<\/span>;<\/span>
          \n if<\/span> (<\/span>sortOrder ===<\/span> "asc"<\/span>)<\/span> return<\/span> aVal ><\/span> bVal ?<\/span> 1<\/span> :<\/span> –<\/span>1<\/span>;<\/span>
          \n return<\/span> aVal <<\/span> bVal ?<\/span> 1<\/span> :<\/span> –<\/span>1<\/span>;<\/span>
          \n }<\/span>)<\/span>;<\/span><\/p>\n

          filteredCourses =<\/span> result;<\/span>
          \n currentPage =<\/span> 1<\/span>;<\/span>
          \n renderTable<\/span>(<\/span>)<\/span>;<\/span>
          \n renderStats<\/span>(<\/span>)<\/span>;<\/span>
          \n }<\/span><\/p>\n

          \/\/ ========== \u6e32\u67d3\u8868\u683c ==========<\/span>
          \n function<\/span> renderTable<\/span>(<\/span>)<\/span> {<\/span>
          \n const<\/span> start =<\/span> (<\/span>currentPage –<\/span> 1<\/span>)<\/span> *<\/span> pageSize;<\/span>
          \n const<\/span> end =<\/span> start +<\/span> pageSize;<\/span>
          \n const<\/span> pageData =<\/span> filteredCourses.<\/span>slice<\/span>(<\/span>start,<\/span> end)<\/span>;<\/span>
          \n const<\/span> totalPages =<\/span> Math.<\/span>ceil<\/span>(<\/span>filteredCourses.<\/span>length \/<\/span> pageSize)<\/span> ||<\/span> 1<\/span>;<\/span><\/p>\n

          \/\/ \u6392\u5e8f\u7bad\u5934<\/span>
          \n function<\/span> arrow<\/span>(<\/span>field<\/span>)<\/span> {<\/span>
          \n if<\/span> (<\/span>field !==<\/span> sortField)<\/span> return<\/span> " &#8597;"<\/span>;<\/span>
          \n return<\/span> sortOrder ===<\/span> "asc"<\/span> ?<\/span> " &#8593;"<\/span> :<\/span> " &#8595;"<\/span>;<\/span>
          \n }<\/span><\/p>\n

          const<\/span> html =<\/span> `<\/span>
          \n <table>
          \n <thead>
          \n <tr>
          \n <th data-sort="title">\u8bfe\u7a0b\u540d\u79f0<span class="sort-arrow"><\/span>${<\/span>arrow<\/span>(<\/span>"title"<\/span>)<\/span>}<\/span><\/span><\/span><\/th>
          \n <th data-sort="category">\u5206\u7c7b<span class="sort-arrow"><\/span>${<\/span>arrow<\/span>(<\/span>"category"<\/span>)<\/span>}<\/span><\/span><\/span><\/th>
          \n <th data-sort="price">\u4ef7\u683c<span class="sort-arrow"><\/span>${<\/span>arrow<\/span>(<\/span>"price"<\/span>)<\/span>}<\/span><\/span><\/span><\/th>
          \n <th data-sort="sales">\u9500\u91cf<span class="sort-arrow"><\/span>${<\/span>arrow<\/span>(<\/span>"sales"<\/span>)<\/span>}<\/span><\/span><\/span><\/th>
          \n <th data-sort="rating">\u8bc4\u5206<span class="sort-arrow"><\/span>${<\/span>arrow<\/span>(<\/span>"rating"<\/span>)<\/span>}<\/span><\/span><\/span><\/th>
          \n <th>\u6807\u7b7e<\/th>
          \n <th>\u66f4\u65b0\u65f6\u95f4<\/th>
          \n <\/tr>
          \n <\/thead>
          \n <tbody>
          \n <\/span>${<\/span>pageData.<\/span>length ===<\/span> 0<\/span> ?<\/span> `<\/span> <tr><td colspan="7"><div class="empty-state">\u6682\u65e0\u5339\u914d\u6570\u636e<\/div><\/td><\/tr> <\/span>`<\/span><\/span> :<\/span> pageData.<\/span>map<\/span>(<\/span>c<\/span> =><\/span> `<\/span> <tr> <td><strong><\/span>${<\/span>c.<\/span>title}<\/span><\/span><\/strong><\/td> <td><\/span>${<\/span>c.<\/span>category}<\/span><\/span><\/td> <td><\/span>${<\/span>formatCurrency<\/span>(<\/span>c.<\/span>price)<\/span>}<\/span><\/span><\/td> <td><\/span>${<\/span>c.<\/span>sales}<\/span><\/span><\/td> <td><\/span>${<\/span>c.<\/span>rating}<\/span><\/span><\/td> <td><span class="tag tag-<\/span>${<\/span>c.<\/span>tag}<\/span><\/span>"><\/span>${<\/span>c.<\/span>tagLabel}<\/span><\/span><\/span><\/td> <td style="color:#999"><\/span>${<\/span>c.<\/span>updated}<\/span><\/span><\/td> <\/tr> <\/span>`<\/span><\/span>)<\/span>.<\/span>join<\/span>(<\/span>""<\/span>)<\/span>}<\/span><\/span>
          \n <\/tbody>
          \n <\/table><\/p>\n

          <\/span>${<\/span>totalPages ><\/span> 1<\/span> ?<\/span> `<\/span> <div class="pagination"> <button <\/span>${<\/span>currentPage ===<\/span> 1<\/span> ?<\/span> "disabled"<\/span> :<\/span> ""<\/span>}<\/span><\/span> data-page="<\/span>${<\/span>currentPage –<\/span> 1<\/span>}<\/span><\/span>">\u4e0a\u4e00\u9875<\/button> <\/span>${<\/span>Array.<\/span>from<\/span>(<\/span>{<\/span>length<\/span>:<\/span> totalPages}<\/span>,<\/span> (<\/span>_,<\/span> i<\/span>)<\/span> =><\/span> i +<\/span> 1<\/span>)<\/span>.<\/span>map<\/span>(<\/span>p<\/span> =><\/span> `<\/span> <button class="<\/span>${<\/span>p ===<\/span> currentPage ?<\/span> 'active'<\/span> :<\/span> ''<\/span>}<\/span><\/span>" data-page="<\/span>${<\/span>p}<\/span><\/span>"><\/span>${<\/span>p}<\/span><\/span><\/button> <\/span>`<\/span><\/span>)<\/span>.<\/span>join<\/span>(<\/span>""<\/span>)<\/span>}<\/span><\/span> <button <\/span>${<\/span>currentPage ===<\/span> totalPages ?<\/span> "disabled"<\/span> :<\/span> ""<\/span>}<\/span><\/span> data-page="<\/span>${<\/span>currentPage +<\/span> 1<\/span>}<\/span><\/span>">\u4e0b\u4e00\u9875<\/button> <span class="page-info">\u5171 <\/span>${<\/span>filteredCourses.<\/span>length}<\/span><\/span> \u6761 \/ <\/span>${<\/span>totalPages}<\/span><\/span> \u9875<\/span> <\/div> <\/span>`<\/span><\/span> :<\/span> ""<\/span>}<\/span><\/span>
          \n <\/span>`<\/span><\/span>;<\/span><\/p>\n

          document.<\/span>querySelector<\/span>(<\/span>"#table-wrapper"<\/span>)<\/span>.<\/span>innerHTML =<\/span> html;<\/span>
          \n }<\/span><\/p>\n

          \/\/ ========== \u4e8b\u4ef6\u59d4\u6258：\u8868\u683c\u6392\u5e8f\u548c\u5206\u9875 ==========<\/span>
          \n document.<\/span>querySelector<\/span>(<\/span>"#table-wrapper"<\/span>)<\/span>.<\/span>addEventListener<\/span>(<\/span>"click"<\/span>,<\/span> (<\/span>event<\/span>)<\/span> =><\/span> {<\/span>
          \n const<\/span> target =<\/span> event.<\/span>target;<\/span><\/p>\n

          \/\/ \u70b9\u51fb\u8868\u5934\u6392\u5e8f<\/span>
          \n const<\/span> th =<\/span> target.<\/span>closest<\/span>(<\/span>"th"<\/span>)<\/span>;<\/span>
          \n if<\/span> (<\/span>th &&<\/span> th.<\/span>dataset.<\/span>sort)<\/span> {<\/span>
          \n const<\/span> field =<\/span> th.<\/span>dataset.<\/span>sort;<\/span>
          \n if<\/span> (<\/span>field ===<\/span> sortField)<\/span> {<\/span>
          \n sortOrder =<\/span> sortOrder ===<\/span> "asc"<\/span> ?<\/span> "desc"<\/span> :<\/span> "asc"<\/span>;<\/span>
          \n }<\/span> else<\/span> {<\/span>
          \n sortField =<\/span> field;<\/span>
          \n sortOrder =<\/span> "desc"<\/span>;<\/span>
          \n }<\/span>
          \n applyFilters<\/span>(<\/span>)<\/span>;<\/span>
          \n return<\/span>;<\/span>
          \n }<\/span><\/p>\n

          \/\/ \u70b9\u51fb\u5206\u9875\u6309\u94ae<\/span>
          \n const<\/span> btn =<\/span> target.<\/span>closest<\/span>(<\/span>"button[data-page]"<\/span>)<\/span>;<\/span>
          \n if<\/span> (<\/span>btn &&<\/span> !<\/span>btn.<\/span>disabled)<\/span> {<\/span>
          \n currentPage =<\/span> parseInt<\/span>(<\/span>btn.<\/span>dataset.<\/span>page)<\/span>;<\/span>
          \n renderTable<\/span>(<\/span>)<\/span>;<\/span>
          \n \/\/ \u6eda\u52a8\u5230\u8868\u683c\u9876\u90e8<\/span>
          \n document.<\/span>querySelector<\/span>(<\/span>".table-card"<\/span>)<\/span>.<\/span>scrollIntoView<\/span>(<\/span>{<\/span> behavior<\/span>:<\/span> "smooth"<\/span> }<\/span>)<\/span>;<\/span>
          \n return<\/span>;<\/span>
          \n }<\/span>
          \n }<\/span>)<\/span>;<\/span><\/p>\n

          \/\/ \u641c\u7d22\u4e8b\u4ef6<\/span>
          \n document.<\/span>querySelector<\/span>(<\/span>"#search-input"<\/span>)<\/span>.<\/span>addEventListener<\/span>(<\/span>"input"<\/span>,<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
          \n applyFilters<\/span>(<\/span>)<\/span>;<\/span>
          \n }<\/span>)<\/span>;<\/span><\/p>\n

          \/\/ \u5237\u65b0\u6309\u94ae<\/span>
          \n document.<\/span>querySelector<\/span>(<\/span>"#refresh-btn"<\/span>)<\/span>.<\/span>addEventListener<\/span>(<\/span>"click"<\/span>,<\/span> fetchDashboardData)<\/span>;<\/span><\/p>\n

          \/\/ ========== \u6e32\u67d3\u5168\u90e8 ==========<\/span>
          \n function<\/span> renderAll<\/span>(<\/span>)<\/span> {<\/span>
          \n renderStats<\/span>(<\/span>)<\/span>;<\/span>
          \n renderChart<\/span>(<\/span>)<\/span>;<\/span>
          \n applyFilters<\/span>(<\/span>)<\/span>;<\/span>
          \n }<\/span><\/p>\n

          \/\/ ========== \u9875\u9762\u521d\u59cb\u5316 ==========<\/span>
          \n fetchDashboardData<\/span>(<\/span>)<\/span>;<\/span>
          \n <\/span><\/span><\/<\/span>script<\/span>><\/span><\/span>
          \n<\/<\/span>body<\/span>><\/span><\/span>
          \n<\/<\/span>html<\/span>><\/span><\/span><\/p>\n

          \u4e09\u3001\u9879\u76ee\u7528\u5230\u7684\u6240\u6709JS\u6280\u80fd\u56de\u987e<\/h2>\n

          \u8fd9\u4e2a\u6570\u636e\u770b\u677f\u9879\u76ee\u5c06JS\u7bc7\u7684\u5168\u90e8\u77e5\u8bc6\u878d\u4f1a\u8d2f\u901a：<\/p>\n\nJS\u6280\u80fd\u5728\u672c\u9879\u76ee\u4e2d\u7684\u5e94\u7528<\/tr>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
          \u53d8\u91cf\u4e0e\u7c7b\u578b（02\u7bc7）<\/td>\nlet\u58f0\u660e\u7684\u5168\u5c40\u72b6\u6001\u3001const\u58f0\u660e\u7684\u5e38\u91cf\u3001\u6a21\u677f\u5b57\u7b26\u4e32<\/td>\n<\/tr>\n
          \u8fd0\u7b97\u7b26（03\u7bc7）<\/td>\n===\u6bd4\u8f83\u3001&&\u77ed\u8def\u3001…\u5c55\u5f00\u3001`<\/td>\n<\/tr>\n
          \u6d41\u7a0b\u63a7\u5236（04\u7bc7）<\/td>\nif-else\u5224\u65ad\u6392\u5e8f\u65b9\u5411\u3001for\/forEach\u904d\u5386\u6570\u636e<\/td>\n<\/tr>\n
          \u51fd\u6570（05\u7bc7）<\/td>\n\u5927\u91cf\u7bad\u5934\u51fd\u6570\u3001\u56de\u8c03\u51fd\u6570（\u4e8b\u4ef6\u5904\u7406）\u3001\u51fd\u6570\u5c01\u88c5\u590d\u7528<\/td>\n<\/tr>\n
          \u6570\u7ec4\u65b9\u6cd5（06\u7bc7）<\/td>\nmap\u6e32\u67d3HTML\u3001filter\u641c\u7d22\u8fc7\u6ee4\u3001reduce\u7edf\u8ba1\u6c42\u548c\u3001sort\u6392\u5e8f\u3001slice\u5206\u9875<\/td>\n<\/tr>\n
          \u5bf9\u8c61\u4e0eJSON（07\u7bc7）<\/td>\n\u5bf9\u8c61\u5b57\u9762\u91cf\u3001\u89e3\u6784\u8d4b\u503c{ name }\u3001API\u8fd4\u56de\u5230\u5bf9\u8c61\u7684\u8f6c\u6362<\/td>\n<\/tr>\n
          ES6+\u7279\u6027（08\u7bc7）<\/td>\n\u6a21\u677f\u5b57\u7b26\u4e32\u3001\u6269\u5c55\u8fd0\u7b97\u7b26\u3001\u53ef\u9009\u94fe<\/td>\n<\/tr>\n
          \u4f5c\u7528\u57df\u4e0ethis（09\u7bc7）<\/td>\n\u4e8b\u4ef6\u59d4\u6258\u4e2d\u7684event.target\u5224\u65ad<\/td>\n<\/tr>\n
          DOM\u5165\u95e8（10\u7bc7）<\/td>\nquerySelector\u3001innerHTML\u3001classList\u64cd\u4f5c\u52a0\u8f7d\u72b6\u6001<\/td>\n<\/tr>\n
          DOM\u8fdb\u9636（11\u7bc7）<\/td>\n\u52a8\u6001\u751f\u6210\u5927\u91cfHTML\u8282\u70b9\u3001closest()\u5411\u4e0a\u67e5\u627e<\/td>\n<\/tr>\n
          \u4e8b\u4ef6\u5165\u95e8（12\u7bc7）<\/td>\naddEventListener\u3001\u952e\u76d8\u4e8b\u4ef6\u3001DOMContentLoaded<\/td>\n<\/tr>\n
          \u4e8b\u4ef6\u8fdb\u9636（13\u7bc7）<\/td>\n\u4e8b\u4ef6\u59d4\u6258（\u8868\u683c\u6392\u5e8f+\u5206\u9875\u7edf\u4e00\u7528\u4e00\u4e2a\u4e8b\u4ef6\u5904\u7406）<\/td>\n<\/tr>\n
          Promise（14\u7bc7）<\/td>\n.then\u94fe\u3001.catch\u9519\u8bef\u5904\u7406\u3001.finally<\/td>\n<\/tr>\n
          async\/await + Fetch（15\u7bc7）<\/td>\nasync function\u3001await fetch()\u3001try-catch\u3001\u5e76\u884c\/\u4e32\u884c<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

          \u56db\u3001JavaScript\u7bc7\u5b66\u4e60\u8def\u5f84\u56de\u987e<\/h2>\n

          \u7b2c\u4e00\u9636\u6bb5（01-06）：\u8bed\u8a00\u57fa\u7840
          \n JS\u5165\u95e8 \u2192 \u53d8\u91cf\u7c7b\u578b \u2192 \u8fd0\u7b97\u7b26 \u2192 \u6d41\u7a0b\u63a7\u5236 \u2192 \u51fd\u6570 \u2192 \u6570\u7ec4\u5b57\u7b26\u4e32
          \n \u76ee\u6807：\u80fd\u7528JS\u5199\u72ec\u7acb\u7684\u903b\u8f91\u4ee3\u7801<\/p>\n

          \u7b2c\u4e8c\u9636\u6bb5（07-09）：\u6838\u5fc3\u8fdb\u9636
          \n \u5bf9\u8c61\u4e0eJSON \u2192 ES6+\u7279\u6027 \u2192 \u4f5c\u7528\u57df\/\u95ed\u5305\/this
          \n \u76ee\u6807：\u7406\u89e3JS\u7684\u6838\u5fc3\u673a\u5236\u548c\u73b0\u4ee3\u8bed\u6cd5<\/p>\n

          \u7b2c\u4e09\u9636\u6bb5（10-13）：DOM\u4e0e\u4e8b\u4ef6
          \n DOM\u5165\u95e8 \u2192 DOM\u8fdb\u9636 \u2192 \u4e8b\u4ef6\u5165\u95e8 \u2192 \u4e8b\u4ef6\u8fdb\u9636+\u8868\u5355\u5b9e\u6218
          \n \u76ee\u6807：\u80fd\u64cd\u4f5c\u9875\u9762\u5143\u7d20\u3001\u54cd\u5e94\u7528\u6237\u4ea4\u4e92<\/p>\n

          \u7b2c\u56db\u9636\u6bb5（14-16）：\u5f02\u6b65\u4e0e\u5b9e\u6218
          \n Promise \u2192 async\/await+Fetch \u2192 \u7efc\u5408\u5b9e\u6218
          \n \u76ee\u6807：\u80fd\u83b7\u53d6\u540e\u7aef\u6570\u636e\u3001\u6784\u5efa\u5b8c\u6574\u4ea4\u4e92\u5e94\u7528<\/p>\n

          \u4ececonsole.log("Hello World")\u5230\u4e00\u4e2a\u529f\u80fd\u5b8c\u6574\u7684\u4ea4\u4e92\u5f0f\u6570\u636e\u770b\u677f，\u4f60\u5df2\u7ecf\u638c\u63e1\u4e86\u524d\u7aefJavaScript\u5f00\u53d1\u7684\u5168\u90e8\u6838\u5fc3\u80fd\u529b\u3002\u4f60\u80fd\u83b7\u53d6API\u6570\u636e\u3001\u5904\u7406\u6570\u636e\u3001\u52a8\u6001\u6e32\u67d3\u9875\u9762\u3001\u54cd\u5e94\u6240\u6709\u7528\u6237\u4ea4\u4e92\u2014\u2014\u8fd9\u4e9b\u90fd\u662f\u771f\u5b9e\u9879\u76ee\u4e2d\u6bcf\u5929\u90fd\u5728\u505a\u7684\u4e8b\u60c5\u3002<\/p>\n

          \u4e94\u3001\u4e0b\u7bc7\u9884\u544a：Web\u5f00\u53d1\u7bc7<\/h2>\n

          JavaScript\u7bc7\u5230\u6b64\u5706\u6ee1\u7ed3\u675f\u3002\u4f46\u8fd9\u5e76\u4e0d\u610f\u5473\u7740\u5168\u6808\u5f00\u53d1\u7684\u7ec8\u70b9\u2014\u2014\u6070\u6070\u76f8\u53cd，\u4f60\u521a\u521a\u7ad9\u5230\u4e86\u6700\u6709\u610f\u4e49\u7684\u8d77\u70b9\u4e0a\u3002\u81f3\u6b64，\u4f60\u5df2\u7ecf\u638c\u63e1\u4e86：<\/p>\n

            \n
          • Python（\u57fa\u7840\u7bc7+\u8fdb\u9636\u7bc7）：\u540e\u7aef\u903b\u8f91\u548c\u6570\u636e\u5904\u7406<\/li>\n
          • MySQL（\u6570\u636e\u5e93\u7bc7）：\u6570\u636e\u5b58\u50a8\u548c\u7ba1\u7406<\/li>\n
          • HTML+CSS（\u524d\u7aef\u7bc7）：\u9875\u9762\u7ed3\u6784\u548c\u6837\u5f0f<\/li>\n
          • JavaScript（JavaScript\u7bc7）：\u524d\u7aef\u4ea4\u4e92\u548c\u6570\u636e\u901a\u4fe1<\/li>\n<\/ul>\n

            \u8fd9\u56db\u5757\u62fc\u56fe\u5df2\u7ecf\u96c6\u9f50\u3002\u5728\u63a5\u4e0b\u6765\u7684Web\u5f00\u53d1\u7bc7\u4e2d，\u6211\u4eec\u5c06\u628a\u8fd9\u4e00\u5207\u4e32\u8054\u8d77\u6765\u2014\u2014\u5b66\u4e60\u5982\u4f55\u4f7f\u7528FastAPI\/Django\u6784\u5efa\u771f\u6b63\u7684\u540e\u7aef\u670d\u52a1，\u63a5\u6536\u524d\u7aefJS\u7684Fetch\u8bf7\u6c42，\u64cd\u4f5cMySQL\u6570\u636e\u5e93，\u5c06\u771f\u6b63\u7684\u4e1a\u52a1\u6570\u636e\u8fd4\u56de\u7ed9\u524d\u7aef\u3002\u5c4a\u65f6\u4f60\u5c06\u770b\u5230\u4e00\u4e2a\u5b8c\u6574\u7684\u5168\u6808\u5e94\u7528\u662f\u5982\u4f55\u8fd0\u8f6c\u7684：\u7528\u6237\u5728\u6d4f\u89c8\u5668\u4e2d\u70b9\u51fb\u6309\u94ae \u2192 JS\u53d1\u9001\u8bf7\u6c42 \u2192 Python\u540e\u7aef\u5904\u7406 \u2192 \u67e5\u8be2MySQL\u6570\u636e\u5e93 \u2192 \u6570\u636e\u8fd4\u56de \u2192 JS\u6e32\u67d3\u5230\u9875\u9762\u3002\u8fd9\u624d\u662f\u5168\u6808\u5f00\u53d1\u7684\u5b8c\u6574\u95ed\u73af\u3002<\/p>\n

            \u6211\u4eecWeb\u5f00\u53d1\u7bc7\u89c1！<\/p>\n

            \u516d\u3001\u4e13\u680f\u8ba2\u9605<\/h2>\n
              \n
            • \u4e13\u680f\u4f18\u70b9？\u300aPython\u4ece\u5165\u95e8\u5230\u5b9e\u6218\u300b，\u4e13\u680f\u5185\u5bb9\u6db5\u76d6：Python\u57fa\u7840\u5230\u9ad8\u7ea7\u7f16\u7a0b\u3001\u5e76\u53d1\u7f16\u7a0b（\u8fdb\u7a0b\/\u7ebf\u7a0b\/\u534f\u7a0b）\u3001\u7f51\u7edc\u7f16\u7a0b（TCP\/UDP\/Socket）\u3001\u6838\u5fc3\u5185\u7f6e\/\u7b2c\u4e09\u65b9\u6a21\u5757\u3001\u6570\u636e\u5e93\u6838\u5fc3\u5b9e\u6218\u3001Web\u5f00\u53d1（Django\/Flask\/FastAPI\u6846\u67b6）\u3001\u6570\u636e\u5e93（MySQL\/ORM\/\u5f02\u6b65\u6570\u636e\u5e93）\u3001\u7f51\u7edc\u722c\u866b（\u540c\u6b65\/\u5f02\u6b65\/\u5206\u5e03\u5f0f）\u3001AI\u5b9e\u6218\u3001Linux\u90e8\u7f72\u8fd0\u7ef4\u3001\u524d\u7aef\u5f00\u53d1\u3001JavaScript\u5168\u6808\u7b49\u6838\u5fc3\u77e5\u8bc6，\u4ee5\u9879\u76ee\u9a71\u52a8\u6559\u5b66，\u6784\u5efa\u6e05\u6670\u5b66\u4e60\u8def\u5f84，\u9002\u5408\u96f6\u57fa\u7840\u5165\u95e8\u548c\u8fdb\u9636\u63d0\u5347\u7684\u540c\u5b66，\u8ddf\u7740\u4e00\u6b65\u6b65\u4ece\u5165\u95e8\u5230\u7cbe\u901a！\u4e13\u680f\u5730\u5740：https:\/\/blog.csdn.net\/zsh_1314520\/category_13108073.html<\/font><\/li>\n
            • \u6587\u7ae0\u662f\u6c38\u4e45\u5417？ \u4e00\u6b21\u8ba2\u9605\u540e\u53ef\u6c38\u4e45\u514d\u8d39\u67e5\u770b\u4e13\u680f\u5185\u6240\u6709\u6587\u7ae0，\u540e\u7eed\u4f1a\u6301\u7eed\u66f4\u65b0\u5168\u6808\u76f8\u5173\u5185\u5bb9，\u7b2c\u4e00\u65f6\u95f4\u83b7\u53d6\u6700\u65b0\u6559\u7a0b！<\/font><\/li>\n
            • \u6709\u7b54\u7591\u4ea4\u6d41\u7fa4\u5417？ \u8ba2\u9605\u4e13\u680f\u540e\u6709\u4e13\u5c5e\u7684\u5168\u6808\u5b66\u4e60\u7b54\u7591\u7fa4，\u7fa4\u5185\u63d0\u4f9b\u4e13\u4e1a\u95ee\u9898\u7b54\u7591\u3001\u548c\u4f17\u591a\u5b66\u4e60\u8005\u62b1\u56e2\u53d6\u6696，\u4e00\u8d77\u6c89\u6dc0\u6280\u672f\u3001\u8d4b\u80fd\u6210\u957f！<\/font><\/li>\n
            • \u8fdb\u7fa4\u65b9\u5f0f？ \u8ba2\u9605\u4e13\u680f\u540e\u53ef\u76f4\u63a5\u5728\u4e13\u680f\u5185\u7533\u8bf7\u52a0\u5165\u7b54\u7591\u7fa4，\u6216\u79c1\u4fe1\u535a\u4e3b\u6c9f\u901a\u8fdb\u7fa4\u4e8b\u5b9c：https:\/\/bbs.csdn.net\/topics\/620104702<\/font><\/li>\n
            • \u66f4\u591a\u5e72\u8d27？ \u70b9\u8d5e+\u6536\u85cf+\u5173\u6ce8\u535a\u4e3b\u4e0d\u8ff7\u8def！\u535a\u4e3b\u535a\u5ba2\u94fe\u63a5：https:\/\/blog.csdn.net\/zsh_1314520?spm=1000.2115.3001.5343，\u4e13\u6ce8Python\u5168\u6808\u6280\u672f\u5206\u4eab，\u8bc4\u8bba\u533a\u7559\u8a00\u95ee\u9898\u4f1a\u4e00\u4e00\u56de\u590d，\u52a9\u529b\u5927\u5bb6\u8f7b\u677e\u641e\u5b9aPython\u5168\u6808！<\/font><\/li>\n<\/ul>\n

              \u3010\u539f\u521b\u58f0\u660e\u3011 \u9664\u672c\u6587\u539f\u6587\u5730\u5740\u4ee5\u5916，\u5982\u53d1\u73b0\u540c\u6b3e\u5185\u5bb9\u7686\u4e3a\u76d7\u7248，\u672c\u6587\u5df2\u6536\u5f55\u4e8e\u300aPython\u5168\u6808：\u4ece\u5165\u95e8\u5230\u5b9e\u6218\u300b，\u8bf7\u52ff\u8d2d\u4e70\u76d7\u7248\u6587\u7ae0\u548c\u4e13\u680f，\u5982\u8d2d\u4e70\u76d7\u7248\u5185\u5bb9\u4e0d\u63d0\u4f9b\u4efb\u4f55\u670d\u52a1\u3002\u539f\u6587\u5730\u5740：https:\/\/blog.csdn.net\/zsh_1314520\/article\/details\/165755258<\/p>\n","protected":false},"excerpt":{"rendered":"

              \u524d\u8a00
              \n\u4e0a\u4e00\u7bc7\u300aJavaScript\u7bc7 15\u300b\u4e2d，\u6211\u4eec\u5b66\u4f1a\u4e86\u7528async\/await\u548cFetch API\u4ece\u540e\u7aef\u83b7\u53d6\u6570\u636e\u3002\u8fd9\u6807\u5fd7\u7740\u524d\u7aef\\”\u4e09\u677f\u65a7\\”\u2014\u2014HTML（\u7ed3\u6784）\u3001CSS（\u6837\u5f0f）\u3001JavaScript（\u4ea4\u4e92\u6570\u636e）\u2014\u2014\u4f60\u5df2\u7ecf\u5b8c\u6574\u638c\u63e1\u3002\u73b0\u5728，\u4f60\u6709\u80fd\u529b\u6784\u5efa\u4e00\u4e2a\u771f\u6b63\u7684\\”\u52a8\u6001\u6570\u636e\u9a71\u52a8\\”\u7684\u9875\u9762\u4e86：\u4eceAPI\u83b7\u53d6\u6570\u636e\u3001\u7528JS\u5904\u7406\u6570\u636e\u3001\u518d\u7528DOM\u52a8\u6001\u6e32\u67d3\u5230\u9875\u9762\u4e0a\u3002
              \n\u672c<\/p>\n","protected":false},"author":2,"featured_media":106637,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[11653,2340,187,81,87,190],"topic":[],"class_list":["post-106639","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-server","tag-11653","tag-es6","tag-javascript","tag-python","tag-87","tag-190"],"yoast_head":"\nPython\u5168\u6808\u5165\u95e8\u5230\u5b9e\u6218\u3010JavaScript\u7bc7 16\u3011\u7efc\u5408\u5b9e\u6218\uff1a\u4ea4\u4e92\u5f0f\u6570\u636e\u770b\u677f\uff0cJavaScript\u5168\u6808\u6280\u80fd\u6574\u5408 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.wsisp.com\/helps\/106639.html\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Python\u5168\u6808\u5165\u95e8\u5230\u5b9e\u6218\u3010JavaScript\u7bc7 16\u3011\u7efc\u5408\u5b9e\u6218\uff1a\u4ea4\u4e92\u5f0f\u6570\u636e\u770b\u677f\uff0cJavaScript\u5168\u6808\u6280\u80fd\u6574\u5408 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"og:description\" content=\"\u524d\u8a00 \u4e0a\u4e00\u7bc7\u300aJavaScript\u7bc7 15\u300b\u4e2d，\u6211\u4eec\u5b66\u4f1a\u4e86\u7528async\/await\u548cFetch API\u4ece\u540e\u7aef\u83b7\u53d6\u6570\u636e\u3002\u8fd9\u6807\u5fd7\u7740\u524d\u7aef"\u4e09\u677f\u65a7"\u2014\u2014HTML（\u7ed3\u6784）\u3001CSS（\u6837\u5f0f）\u3001JavaScript（\u4ea4\u4e92\u6570\u636e）\u2014\u2014\u4f60\u5df2\u7ecf\u5b8c\u6574\u638c\u63e1\u3002\u73b0\u5728，\u4f60\u6709\u80fd\u529b\u6784\u5efa\u4e00\u4e2a\u771f\u6b63\u7684"\u52a8\u6001\u6570\u636e\u9a71\u52a8"\u7684\u9875\u9762\u4e86：\u4eceAPI\u83b7\u53d6\u6570\u636e\u3001\u7528JS\u5904\u7406\u6570\u636e\u3001\u518d\u7528DOM\u52a8\u6001\u6e32\u67d3\u5230\u9875\u9762\u4e0a\u3002 \u672c\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wsisp.com\/helps\/106639.html\" \/>\n<meta property=\"og:site_name\" content=\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"article:published_time\" content=\"2026-09-17T12:40:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/09\/20260917124046-6aabdfce17685.gif\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/106639.html\",\"url\":\"https:\/\/www.wsisp.com\/helps\/106639.html\",\"name\":\"Python\u5168\u6808\u5165\u95e8\u5230\u5b9e\u6218\u3010JavaScript\u7bc7 16\u3011\u7efc\u5408\u5b9e\u6218\uff1a\u4ea4\u4e92\u5f0f\u6570\u636e\u770b\u677f\uff0cJavaScript\u5168\u6808\u6280\u80fd\u6574\u5408 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"isPartOf\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\"},\"datePublished\":\"2026-09-17T12:40:49+00:00\",\"dateModified\":\"2026-09-17T12:40:49+00:00\",\"author\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/106639.html#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.wsisp.com\/helps\/106639.html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/106639.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.wsisp.com\/helps\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Python\u5168\u6808\u5165\u95e8\u5230\u5b9e\u6218\u3010JavaScript\u7bc7 16\u3011\u7efc\u5408\u5b9e\u6218\uff1a\u4ea4\u4e92\u5f0f\u6570\u636e\u770b\u677f\uff0cJavaScript\u5168\u6808\u6280\u80fd\u6574\u5408\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\",\"url\":\"https:\/\/www.wsisp.com\/helps\/\",\"name\":\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"description\":\"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"contentUrl\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"caption\":\"admin\"},\"sameAs\":[\"http:\/\/wp.wsisp.com\"],\"url\":\"https:\/\/www.wsisp.com\/helps\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Python\u5168\u6808\u5165\u95e8\u5230\u5b9e\u6218\u3010JavaScript\u7bc7 16\u3011\u7efc\u5408\u5b9e\u6218\uff1a\u4ea4\u4e92\u5f0f\u6570\u636e\u770b\u677f\uff0cJavaScript\u5168\u6808\u6280\u80fd\u6574\u5408 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.wsisp.com\/helps\/106639.html","og_locale":"zh_CN","og_type":"article","og_title":"Python\u5168\u6808\u5165\u95e8\u5230\u5b9e\u6218\u3010JavaScript\u7bc7 16\u3011\u7efc\u5408\u5b9e\u6218\uff1a\u4ea4\u4e92\u5f0f\u6570\u636e\u770b\u677f\uff0cJavaScript\u5168\u6808\u6280\u80fd\u6574\u5408 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","og_description":"\u524d\u8a00 \u4e0a\u4e00\u7bc7\u300aJavaScript\u7bc7 15\u300b\u4e2d，\u6211\u4eec\u5b66\u4f1a\u4e86\u7528async\/await\u548cFetch API\u4ece\u540e\u7aef\u83b7\u53d6\u6570\u636e\u3002\u8fd9\u6807\u5fd7\u7740\u524d\u7aef\"\u4e09\u677f\u65a7\"\u2014\u2014HTML（\u7ed3\u6784）\u3001CSS（\u6837\u5f0f）\u3001JavaScript（\u4ea4\u4e92\u6570\u636e）\u2014\u2014\u4f60\u5df2\u7ecf\u5b8c\u6574\u638c\u63e1\u3002\u73b0\u5728，\u4f60\u6709\u80fd\u529b\u6784\u5efa\u4e00\u4e2a\u771f\u6b63\u7684\"\u52a8\u6001\u6570\u636e\u9a71\u52a8\"\u7684\u9875\u9762\u4e86：\u4eceAPI\u83b7\u53d6\u6570\u636e\u3001\u7528JS\u5904\u7406\u6570\u636e\u3001\u518d\u7528DOM\u52a8\u6001\u6e32\u67d3\u5230\u9875\u9762\u4e0a\u3002 \u672c","og_url":"https:\/\/www.wsisp.com\/helps\/106639.html","og_site_name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","article_published_time":"2026-09-17T12:40:49+00:00","og_image":[{"url":"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/09\/20260917124046-6aabdfce17685.gif"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"admin","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"11 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.wsisp.com\/helps\/106639.html","url":"https:\/\/www.wsisp.com\/helps\/106639.html","name":"Python\u5168\u6808\u5165\u95e8\u5230\u5b9e\u6218\u3010JavaScript\u7bc7 16\u3011\u7efc\u5408\u5b9e\u6218\uff1a\u4ea4\u4e92\u5f0f\u6570\u636e\u770b\u677f\uff0cJavaScript\u5168\u6808\u6280\u80fd\u6574\u5408 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","isPartOf":{"@id":"https:\/\/www.wsisp.com\/helps\/#website"},"datePublished":"2026-09-17T12:40:49+00:00","dateModified":"2026-09-17T12:40:49+00:00","author":{"@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41"},"breadcrumb":{"@id":"https:\/\/www.wsisp.com\/helps\/106639.html#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wsisp.com\/helps\/106639.html"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.wsisp.com\/helps\/106639.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.wsisp.com\/helps"},{"@type":"ListItem","position":2,"name":"Python\u5168\u6808\u5165\u95e8\u5230\u5b9e\u6218\u3010JavaScript\u7bc7 16\u3011\u7efc\u5408\u5b9e\u6218\uff1a\u4ea4\u4e92\u5f0f\u6570\u636e\u770b\u677f\uff0cJavaScript\u5168\u6808\u6280\u80fd\u6574\u5408"}]},{"@type":"WebSite","@id":"https:\/\/www.wsisp.com\/helps\/#website","url":"https:\/\/www.wsisp.com\/helps\/","name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","description":"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41","name":"admin","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/","url":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","contentUrl":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","caption":"admin"},"sameAs":["http:\/\/wp.wsisp.com"],"url":"https:\/\/www.wsisp.com\/helps\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/106639","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/comments?post=106639"}],"version-history":[{"count":0,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/106639\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media\/106637"}],"wp:attachment":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media?parent=106639"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/categories?post=106639"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/tags?post=106639"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/topic?post=106639"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}