使用 Express.js 创建动态颜色网页

本示例展示了如何使用 Express.js 创建一个简单的动态网页，该网页显示包含颜色名称的 H1 标题，并以该颜色显示。每次访问页面时，标题的颜色都会循环遍历红色、黄色、绿色和蓝色。

实现步骤

定义一个包含颜色名称的数组。
创建处理 '/color.html' 路径的 GET 请求的路由。
在路由处理函数中：
- 获取当前颜色索引并从颜色数组中获取相应的颜色。
- 使用当前颜色构建 HTML 代码，将颜色应用于 H1 标题。
- 发送构建的 HTML 代码作为响应。
- 将当前颜色索引递增，并在达到数组末尾时循环回开头。

JavaScript 代码

const colors = ['red', 'yellow', 'green', 'blue'];
let currentColorIndex = 0;

router.get('/color.html', (req, res) => {
  const currentColor = colors[currentColorIndex];
  const html = `<html><head><title>${currentColor} color</title></head><body><h1 style='color:${currentColor}'>${currentColor} color</h1></body></html>`;
  res.send(html);
  currentColorIndex = (currentColorIndex + 1) % colors.length;
});

解释

`colors` 数组存储了循环显示的颜色。
`currentColorIndex` 记录了当前颜色在数组中的索引。
路由处理函数在每次请求时获取当前颜色，使用该颜色构建 HTML 代码，并将 HTML 代码作为响应发送给客户端。
最后，`currentColorIndex` 递增，并在达到数组末尾时循环回开头，确保颜色循环显示。

通过这种方式，每次访问 `/color.html` 路径时，H1 标题的颜色都会改变，并以循环的方式展示不同颜色。