实现一个基本网页显示包含颜色名称的1级标题并以该颜色显示。。创建处理路径的HTTP请求的快速路由。GETcolorhtml。通过此路由处理的请求应以包含红色、黄色、绿色或蓝色的1级标题的有效网页作为响应。标题文本的颜色应与文本相匹配。。第一次查看该页面时它应该显示为红色。。在第二次访问时它应该显示为黄色。。在第三次访问时它应该显示为green。。在第四次访问时它应该显示为蓝色。在第五次访问时它应该
<p>实现基本网页：</p>
<!DOCTYPE html>
<html>
<head>
<title>Color Page</title>
</head>
<body>
<h1 id="colorTitle">Red</h1>
<script>
// 获取上一次访问时的颜色
var lastColor = localStorage.getItem('color');
// 设置标题颜色
var colorTitle = document.getElementById('colorTitle');
if (lastColor) {
colorTitle.style.color = lastColor;
// 根据上一次颜色设置下一次颜色
switch (lastColor) {
case 'red':
localStorage.setItem('color', 'yellow');
break;
case 'yellow':
localStorage.setItem('color', 'green');
break;
case 'green':
localStorage.setItem('color', 'blue');
break;
case 'blue':
localStorage.setItem('color', 'red');
break;
}
} else {
localStorage.setItem('color', 'red');
}
</script>
</body>
</html>
<p>创建处理路径的HTTP请求的快速路由：</p>
<p>const http = require('http');</p>
<p>const server = http.createServer((req, res) => {
if (req.url === '/color.html') {
// 设置响应头
res.writeHead(200, {'Content-Type': 'text/html'});
// 发送响应
res.end(`<!DOCTYPE html></p>
<html>
<head>
<title>Color Page</title>
</head>
<body>
<h1 id="colorTitle">Red</h1>
<script>
// 获取上一次访问时的颜色
var lastColor = localStorage.getItem('color');
// 设置标题颜色
var colorTitle = document.getElementById('colorTitle');
if (lastColor) {
colorTitle.style.color = lastColor;
// 根据上一次颜色设置下一次颜色
switch (lastColor) {
case 'red':
localStorage.setItem('color', 'yellow');
break;
case 'yellow':
localStorage.setItem('color', 'green');
break;
case 'green':
localStorage.setItem('color', 'blue');
break;
case 'blue':
localStorage.setItem('color', 'red');
break;
}
} else {
localStorage.setItem('color', 'red');
}
</script>
</body>
</html>`);
} else {
res.writeHead(404, {'Content-Type': 'text/plain'});
res.end('Not Found');
}
});
<p>server.listen(3000, () => {
console.log('Server running at http://localhost:3000/');
});</p>
原文地址: https://www.cveoy.top/t/topic/4vq 著作权归作者所有。请勿转载和采集!