Question

我想使用当前时间添加更改css。这是我想要的代码。

var today = new Date();
var hourNow = today.getHours();
var style; //add css//

    if (hourNow > 0) { //hour 00:00 - 12:00 the css//
      document.getElementsByTagName('BODY')[0].style.backgroundColor = "#fff";
      document.getElementsByTagName('BODY')[0].style.color= "#505050"; }

    else if (hourNow > 12) { //hour 120:00 - 18:00 the css//
      document.getElementsByTagName('BODY')[0].style.backgroundColor = "gainsboro";
      document.getElementsByTagName('BODY')[0].style.color= "black"; }

    else if (hourNow > 18) { //hour 18:00 - 00:00 the css//
      document.getElementsByTagName('BODY')[0].style.backgroundColor = "#1b1b1b";
      document.getElementsByTagName('BODY')[0].style.color= "#fff"; }

    else {
      document.getElementsByTagName('BODY')[0].style.backgroundColor = "white";
      document.getElementsByTagName('BODY')[0].style.color= "black";}

可能吗？我是JavaScript的新手..

Answer 1

我不会重复自己并使用else（以相反的顺序列出事物），但从根本上说应该没问题。如果我不得不做直接的风格操作，我会做这样的事情：

var today = new Date();
var hourNow = today.getHours();
var style;

if (hourNow > 18) {
  background = "#1b1b1b";
  color = "#fff";
} else if (hourNow > 12) {
  background = "gainsboro";
  color = "black";
} else if (hourNow > 0) {
  background = "#fff";
  color = "#505050";
}
document.body.style.backgroundColor = background;
document.body.style.color = color;

This is the document body.

...或者更好地使用，将样式信息放在CSS中并添加/删除类。

var today = new Date();
var hourNow = today.getHours();
var style;
var cls;

if (hourNow > 18) {
  cls = "evening";
} else if (hourNow > 12) {
  cls = "afternoon";
} else if (hourNow > 0) {
  cls = "morning";
}
document.body.classList.remove("morning", "afternoon", "evening");
document.body.classList.add(cls);

.morning {
  background-color: #fff;
  color: #505050;
}
.afternoon {
  background-color: gainsboro;
  color: black;
}
.evening {
  background-color: #1b1b1b;
  color: #fff;
}

This is the document body.

Answer 2

您的代码将始终成功完成第一个条件，除非它完全为0，在这种情况下它将采用'default'。我修好了，用它：

var today = new Date();
var hourNow = today.getHours();
var style; //add css//

if (hourNow >= 18) { //hour 18:00 - 00:00 the css//
  document.getElementsByTagName('BODY')[0].style.backgroundColor = "#1b1b1b";
  document.getElementsByTagName('BODY')[0].style.color= "#fff"; }

else if (hourNow >= 12) { //hour 120:00 - 18:00 the css//
  document.getElementsByTagName('BODY')[0].style.backgroundColor = "gainsboro";
  document.getElementsByTagName('BODY')[0].style.color= "black"; }

else if (hourNow >= 0) { //hour 00:00 - 12:00 the css//
  document.getElementsByTagName('BODY')[0].style.backgroundColor = "#fff";
  document.getElementsByTagName('BODY')[0].style.color= "#505050"; }

else {
  document.getElementsByTagName('BODY')[0].style.backgroundColor = "white";
  document.getElementsByTagName('BODY')[0].style.color= "black";}

Answer 3

在这种情况下，我会使用switch语句。此外，不是设置样式，更改类名称可能更有效。测试一下

＆＃13;

var today = new Date();
var hourNow = today.getHours();

switch(true) {
    case (hourNow > 0 && hourNow <= 12):
        document.body.className = "morning";
        break;
    case (hourNow > 12 && hourNow <= 18):
        document.body.className = "afternoon";
        break;
    default:
        document.body.className = "evening";
        break;
}

＆＃13;

.morning {
  background-color: #fff;
  color: #505050;
}

.afternoon {
  background-color: gainsboro;
  color: black;
}

.evening {
  background-color: #1b1b1b;
  color: #fff;
}

＆＃13;

使用用户当前时间JavaScript更改CSS

3 个答案: