JS如何根据时间段更改站点在线离线状态文字的显示颜色

两种实现方式都不需要修改你现有的<p id="message"></p> HTML结构，可根据你的场景选择：

方式一：直接通过JS设置内联样式（无需额外写CSS） #

直接修改你的JS代码即可，改动最小：

var today = new Date();
var time = today.getHours();
var greet;

if (time > 0 && time <= 12) {
  greet = 'Online';
} else if (time > 12 && time <= 23) {
  greet = 'Offline';
}

var show = document.getElementById('message');
show.textContent = greet;
// 新增颜色配置逻辑
if (greet === 'Online') {
  show.style.color = 'green';
} else {
  show.style.color = 'red';
}

方式二：通过CSS类控制样式（更易后续扩展维护） #

如果后续有可能调整状态的样式（比如加背景、改字体大小等），推荐用这种方式，后续改样式不需要动逻辑代码：

1. 首先在页面的<style>标签或者你的CSS样式表中添加规则：

.status-online {
  color: green;
}
.status-offline {
  color: red;
}

2. 再修改JS代码，动态绑定对应样式类：

var today = new Date();
var time = today.getHours();
var greet;
var statusClass;

if (time > 0 && time <= 12) {
  greet = 'Online';
  statusClass = 'status-online';
} else if (time > 12 && time <= 23) {
  greet = 'Offline';
  statusClass = 'status-offline';
}

var show = document.getElementById('message');
show.textContent = greet;
show.classList.add(statusClass);

内容的提问来源于stack exchange，提问作者adriasos