JS - 改变结果的颜色

Question

我想根据给定的小时在网站上实现可用性状态。 我已经准备好了代码，但我不知道如何包含颜色规范。

我想以绿色显示“在线”，而以红色显示“离线”？ 怎么做？

 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;

 <p id="message"></p>

Answer 1

最简单 - 也将问候添加为一个类

 const show = document.getElementById('message'); 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'; } show.classList.add(greet) show.textContent = greet;

 .Offline { color: red; } .Online { color: green; }

 <p id="message"></p>

您甚至可以在类中添加文本

 const show = document.getElementById('message'); const time = new Date().getHours(); var greet; if (time > 0 && time <= 12) { greet = 'Online'; } else if (time > 12 && time <= 23) { greet = 'Offline'; } show.classList.add(greet)

 .Offline { color: red; } .Offline::after { content: "Offline" } .Online { color: green; } .Online::after { content: "Online" }

 <p id="message"></p>

Answer 2

 const show = document.getElementById('message'); 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'; } show.classList.add(greet) show.textContent = greet;

 .Offline { color: red; } .Online { color: green; }

 <p id="message"></p>

所以如果需要任何帮助。 伸手。 我会每天在线

Answer 3

您可以选择脚本第一行的<p>标签

 var today = new Date(); var time = today.getHours(); var greet; var show = document.getElementById('message'); if (time > 0 && time <= 12) { greet = 'Online'; show.style.color = "green" } else if (time > 12 && time <= 23) { greet = 'Offline'; show.style.color = "red"; } show.textContent = greet;

 <p id="message"></p>

Answer 4

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


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



var show = document.getElementById('message');
show.textContent = greet;
show.style.color = greetColor;

Answer 5

看看这里的第一个例子 :) JavaScript HTML DOM - 改变 CSS