案例-浏览时钟

需求：基于Web服务，开发提供的网页资源的功能

步骤：

基于http模块，创建Web服务
使用req.url获取请求资源路径，判断并读取index.html里字符内容返回给请求方
其他路径，暂时返回不存在的提示
运行Web服务，用浏览器发起请求

HTML代码：

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <title>时钟案例</title>  <style>    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)));    }  </style></head><body>  <div class="box">    <div id="HH">00</div>    <div>:</div>    <div id="mm">00</div>    <div>:</div>    <div id="ss">00</div>  </div>  <script>    window.addEventListener('load', 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('#HH').innerHTML = padZero(HH);      document.querySelector('#mm').innerHTML = padZero(mm);      document.querySelector('#ss').innerHTML = padZero(ss);    };    function padZero(n) {      console.log(n);      return n > 9 ? n : '0' + n;    }  </script></body></html>

JS代码：

/**
 * 目标：基于 Web 服务，开发提供网页资源的功能
 * 步骤：
 *  1. 基于 http 模块，创建 Web 服务
 *  2. 使用 req.url 获取请求资源路径，并读取 index.html 里字符串内容返回给请求方
 *  3. 其他路径，暂时返回不存在提示
 *  4. 运行 Web 服务，用浏览器发起请求
 */
const fs = require('fs')
const path = require('path')
// 1. 基于 http 模块，创建 Web 服务
const http = require('http')
const server = http.createServer()
server.on('request', (req, res) => {
  // 2. 使用 req.url 获取请求资源路径，并读取 index.html 里字符串内容返回给请求方
  if (req.url === '/index.html') {
    fs.readFile(path.join(__dirname, 'dist/index.html'), (err, data) => {
      res.setHeader('Content-Type', 'text/html;charset=utf-8')
      res.end(data.toString())
    })
  } else {
    // 3. 其他路径，暂时返回不存在提示
    res.setHeader('Content-Type', 'text/html;charset=utf-8')
    res.end('你要访问的资源路径不存在')
  }
})
server.listen(3030, () => {
  console.log('Web 服务启动成功了')
})

下面是案例样式：
时钟案例

Eric小屋

JS案例-浏览时钟

案例-浏览时钟