{"id":322,"date":"2023-12-12T16:23:58","date_gmt":"2023-12-12T08:23:58","guid":{"rendered":"http:\/\/ericw.top\/?p=322"},"modified":"2023-12-12T16:42:41","modified_gmt":"2023-12-12T08:42:41","slug":"js%e6%a1%88%e4%be%8b-%e6%b5%8f%e8%a7%88%e6%97%b6%e9%92%9f","status":"publish","type":"post","link":"http:\/\/ericw.top\/?p=322","title":{"rendered":"JS\u6848\u4f8b-\u6d4f\u89c8\u65f6\u949f"},"content":{"rendered":"<h1 id=\"toc-0\">\u6848\u4f8b-\u6d4f\u89c8\u65f6\u949f<\/h1>\n<p><em>\u9700\u6c42\uff1a\u57fa\u4e8eWeb\u670d\u52a1\uff0c\u5f00\u53d1\u63d0\u4f9b\u7684\u7f51\u9875\u8d44\u6e90\u7684\u529f\u80fd<\/em><\/p>\n<p><img decoding=\"async\" src=\"http:\/\/ericw.top\/wp-content\/uploads\/2023\/12\/1702368479443-300x75.png\" alt=\"\" \/><br \/>\n<strong>\u6b65\u9aa4\uff1a<\/strong><\/p>\n<ol>\n<li>\u57fa\u4e8e<code class=\"prettyprint\" >http<\/code>\u6a21\u5757\uff0c\u521b\u5efaWeb\u670d\u52a1<\/li>\n<li>\u4f7f\u7528<code class=\"prettyprint\" >req.url<\/code>\u83b7\u53d6\u8bf7\u6c42<strong>\u8d44\u6e90\u8def\u5f84<\/strong>\uff0c\u5224\u65ad\u5e76\u8bfb\u53d6index.html\u91cc\u5b57\u7b26\u5185\u5bb9\u8fd4\u56de\u7ed9\u8bf7\u6c42\u65b9<\/li>\n<li>\u5176\u4ed6\u8def\u5f84\uff0c\u6682\u65f6\u8fd4\u56de\u4e0d\u5b58\u5728\u7684\u63d0\u793a<\/li>\n<li>\u8fd0\u884cWeb\u670d\u52a1\uff0c\u7528\u6d4f\u89c8\u5668\u53d1\u8d77\u8bf7\u6c42<br \/>\n<img decoding=\"async\" src=\"http:\/\/ericw.top\/wp-content\/uploads\/2023\/12\/1702368627302-300x119.png\" alt=\"\" \/><br \/>\nHTML\u4ee3\u7801\uff1a<\/li>\n<\/ol>\n<pre><code class=\"prettyprint\"  class=\"language-html\">&lt;!DOCTYPE html&gt;&lt;html lang=&quot;en&quot;&gt;&lt;head&gt;  &lt;meta charset=&quot;UTF-8&quot;&gt;  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;  &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;&gt;  &lt;title&gt;\u65f6\u949f\u6848\u4f8b&lt;\/title&gt;  &lt;style&gt;    html,    body {      margin: 0;      padding: 0;      height: 100%;      background-image: linear-gradient(to bottom right, red, gold);    }    .box {      width: 400px;      height: 250px;      background-color: rgba(255, 255, 255, 0.6);      border-radius: 6px;      position: absolute;      left: 50%;      top: 40%;      transform: translate(-50%, -50%);      box-shadow: 1px 1px 10px #fff;      text-shadow: 0px 1px 30px white;      display: flex;      justify-content: space-around;      align-items: center;      font-size: 70px;      user-select: none;      padding: 0 20px;      -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0%, transparent), to(rgba(250, 250, 250, .2)));    }  &lt;\/style&gt;&lt;\/head&gt;&lt;body&gt;  &lt;div class=&quot;box&quot;&gt;    &lt;div id=&quot;HH&quot;&gt;00&lt;\/div&gt;    &lt;div&gt;:&lt;\/div&gt;    &lt;div id=&quot;mm&quot;&gt;00&lt;\/div&gt;    &lt;div&gt;:&lt;\/div&gt;    &lt;div id=&quot;ss&quot;&gt;00&lt;\/div&gt;  &lt;\/div&gt;  &lt;script&gt;    window.addEventListener(&#039;load&#039;, function () {      clock();      setInterval(clock, 1000);    });    function clock() {      let dt = new Date();      let HH = dt.getHours();      let mm = dt.getMinutes();      let ss = dt.getSeconds();      console.log(dt, HH, mm, ss);      document.querySelector(&#039;#HH&#039;).innerHTML = padZero(HH);      document.querySelector(&#039;#mm&#039;).innerHTML = padZero(mm);      document.querySelector(&#039;#ss&#039;).innerHTML = padZero(ss);    };    function padZero(n) {      console.log(n);      return n &gt; 9 ? n : &#039;0&#039; + n;    }  &lt;\/script&gt;&lt;\/body&gt;&lt;\/html&gt;<\/code><\/pre>\n<p>JS\u4ee3\u7801\uff1a<\/p>\n<pre><code class=\"prettyprint\"  class=\"language-js\">\/**\n * \u76ee\u6807\uff1a\u57fa\u4e8e Web \u670d\u52a1\uff0c\u5f00\u53d1\u63d0\u4f9b\u7f51\u9875\u8d44\u6e90\u7684\u529f\u80fd\n * \u6b65\u9aa4\uff1a\n *  1. \u57fa\u4e8e http \u6a21\u5757\uff0c\u521b\u5efa Web \u670d\u52a1\n *  2. \u4f7f\u7528 req.url \u83b7\u53d6\u8bf7\u6c42\u8d44\u6e90\u8def\u5f84\uff0c\u5e76\u8bfb\u53d6 index.html \u91cc\u5b57\u7b26\u4e32\u5185\u5bb9\u8fd4\u56de\u7ed9\u8bf7\u6c42\u65b9\n *  3. \u5176\u4ed6\u8def\u5f84\uff0c\u6682\u65f6\u8fd4\u56de\u4e0d\u5b58\u5728\u63d0\u793a\n *  4. \u8fd0\u884c Web \u670d\u52a1\uff0c\u7528\u6d4f\u89c8\u5668\u53d1\u8d77\u8bf7\u6c42\n *\/\nconst fs = require(&#039;fs&#039;)\nconst path = require(&#039;path&#039;)\n\/\/ 1. \u57fa\u4e8e http \u6a21\u5757\uff0c\u521b\u5efa Web \u670d\u52a1\nconst http = require(&#039;http&#039;)\nconst server = http.createServer()\nserver.on(&#039;request&#039;, (req, res) =&gt; {\n  \/\/ 2. \u4f7f\u7528 req.url \u83b7\u53d6\u8bf7\u6c42\u8d44\u6e90\u8def\u5f84\uff0c\u5e76\u8bfb\u53d6 index.html \u91cc\u5b57\u7b26\u4e32\u5185\u5bb9\u8fd4\u56de\u7ed9\u8bf7\u6c42\u65b9\n  if (req.url === &#039;\/index.html&#039;) {\n    fs.readFile(path.join(__dirname, &#039;dist\/index.html&#039;), (err, data) =&gt; {\n      res.setHeader(&#039;Content-Type&#039;, &#039;text\/html;charset=utf-8&#039;)\n      res.end(data.toString())\n    })\n  } else {\n    \/\/ 3. \u5176\u4ed6\u8def\u5f84\uff0c\u6682\u65f6\u8fd4\u56de\u4e0d\u5b58\u5728\u63d0\u793a\n    res.setHeader(&#039;Content-Type&#039;, &#039;text\/html;charset=utf-8&#039;)\n    res.end(&#039;\u4f60\u8981\u8bbf\u95ee\u7684\u8d44\u6e90\u8def\u5f84\u4e0d\u5b58\u5728&#039;)\n  }\n})\nserver.listen(3030, () =&gt; {\n  console.log(&#039;Web \u670d\u52a1\u542f\u52a8\u6210\u529f\u4e86&#039;)\n})<\/code><\/pre>\n<p>\u4e0b\u9762\u662f\u6848\u4f8b\u6837\u5f0f\uff1a<br \/>\n<a href=\"http:\/\/ericw.top:3030\/index.html\" target=\"_blank\" rel=\"noopener\">\u65f6\u949f\u6848\u4f8b<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u6848\u4f8b-\u6d4f\u89c8\u65f6\u949f \u9700\u6c42\uff1a\u57fa\u4e8eWeb\u670d\u52a1\uff0c\u5f00\u53d1\u63d0\u4f9b\u7684\u7f51\u9875\u8d44\u6e90\u7684\u529f\u80fd \u6b65\u9aa4\uff1a \u57fa\u4e8ehttp\u6a21\u5757\uff0c\u521b\u5efaWeb\u670d\u52a1 \u4f7f\u7528 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":325,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,6],"tags":[],"_links":{"self":[{"href":"http:\/\/ericw.top\/index.php?rest_route=\/wp\/v2\/posts\/322"}],"collection":[{"href":"http:\/\/ericw.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/ericw.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/ericw.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/ericw.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=322"}],"version-history":[{"count":6,"href":"http:\/\/ericw.top\/index.php?rest_route=\/wp\/v2\/posts\/322\/revisions"}],"predecessor-version":[{"id":333,"href":"http:\/\/ericw.top\/index.php?rest_route=\/wp\/v2\/posts\/322\/revisions\/333"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/ericw.top\/index.php?rest_route=\/wp\/v2\/media\/325"}],"wp:attachment":[{"href":"http:\/\/ericw.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=322"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/ericw.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=322"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/ericw.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=322"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}