首页 > 解决方案 > 用时刻 js 编写条件

问题描述

很难找到有关如何执行此操作的答案。

date.text("Today's date is: " + moment().format("dddd MMM Do YY, h:mm a"));

是我用来在页面上显示当前时间的。我的目标是根据一天中的时间更改一些 CSS。我找不到一个很好的例子来说明如何做到这一点。理想情况下,如果在下午 1 点之后,CSS 会发生变化。

标签: javascripthtmlcssif-statementmomentjs

解决方案


const now = new Date();
const hours = now.getHours();
const span = document.querySelector("span");

let color;
if (hours > 6)
  color = "red";
else if (hours > 12)
  color = "yellow";
else if (hours > 16)
  color = "blue";
else color = "green";

span.innerHTML = now.toDateString(); // you can use moment here or anything
span.style.color = color;
<div>
  Today's date is: <span></span>
</div>

或者您可以使用具有样式的类并将这些类分配给元素。希望这对您来说很清楚。


推荐阅读