如何根据一天中的时间更改元素的样式？

Question

我正在尝试制作一个页面，其中包含一天中从上午 9 点到下午 5 点显示一天中每个小时的日历。我希望每个小时都根据一天中的时间显示不同的颜色（如果过去的时间是灰色的，如果是未来的时间是绿色的，如果是当前的时间是红色的）。我正在尝试使用 moment.js 来帮助我解决这个问题。这是我认为是我最好的尝试：

var checkTime = function () {
    var hour = $(".hour").text().trim();

    var time = moment(hour, "LT");
    console.log(time)

    //remove any old classes from element
    $(".hour").removeClass(".present .past .future");

    // apply new class if task is near/over due date
    if (moment().isAfter(time)) {
        $(".hour").addClass(".past");
    } else if (moment().isBefore(time)) {
        $(".hour").addClass(".future");
    } else {
        $(".hour").addClass(".present");
    }
}

checkTime();

下面是一个相应的 HTML 元素的示例：

        <div class="time-block row nine">
          <p class="hour">9:00 AM </p>
          <textarea class="textarea"></textarea>
          <button class="saveBtn col-1"></button>
        </div>

Answer 1

考虑以下示例。

$(function() {
  function makeHour(dt) {
    return dt.getHours() + (dt.getMinutes() / 60);
  }

  function textToDate(str) {
    var h = parseInt(str.slice(0, str.indexOf(":")));
    var m = parseInt(str.slice(str.indexOf(":") + 1, -2));
    var mer = str.slice(-2);
    if (mer == "PM") {
      h = h + 12;
    }
    var dt = new Date();
    dt.setHours(h, m);
    return dt;
  }

  function compHours(a, b) {
    var r = 0;
    if (a < b) {
      r = -1;
    }
    if (a > b) {
      r = 1;
    }
    return r;
  }

  function checkTime() {
    var then = textToDate($(".hour").text().trim());
    var now = new Date();
    var thenH = makeHour(then);
    var nowH = makeHour(now);
    console.log(then, now);
    var test = compHours(thenH, nowH);
    console.log(thenH, nowH, test);
    if (test == 0) {
      $(".hour").addClass("present");
    } else if (test == -1) {
      $(".hour").addClass("past");
    } else {
      $(".hour").addClass("future");
    }
  }

  checkTime();
});

.past {
  background-color: gray;
}

.present {
  background-color: red;
}

.future {
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="time-block row nine">
  <p class="hour">9:15 AM </p>
  <textarea class="textarea"></textarea>
  <button class="saveBtn col-1">BTN</button>
</div>

最好将小时和分钟转换为整数。这样您就可以轻松比较小时数。我使用-1、0 和1 表示过去、现在和未来。

Answer 2

我不确定我的“时间逻辑”是否正确（检查 if 语句），但这应该是您正在寻找的。

var objDate = new Date();
    var hours = objDate.getHours();
    if(hours >= 9 && hours <= 17){
        $(".hour").addClass("present");
    }
    elseif(hours < 9){
        $(".hour").addClass("past");
    }
    else{
        $(".hour").addClass("future");
    }

请注意，这会使用客户端的时间，因此如果您在全球网页上使用它，那么您可能会在欧洲打开但同时在美国关闭。

Answer 3

这是我如何让它工作的（请记住，我必须在 HTML 中更改一些类/id，然后在 JS 中更改选择器）：

//Change textarea background color based on time
var checkTime = function () {

    //Get Current time
    var currentTime = moment().format('H');

    //get all elements with class "taskarea"
    var timeBlockElements = $(".textarea");

    //loop through taskarea classes
    for (var i = 0 ; i < timeBlockElements.length ; i++) {

        //Get element i's ID as a string
        var elementID = timeBlockElements[i].id;

        //get element by ID
        var manipID = document.getElementById(timeBlockElements[i].id)

        //remove any old classes from element
        $(timeBlockElements[i].id).removeClass(".present .past .future");

        // apply new class if task is present/past/future
        if (elementID < currentTime) {
            $(manipID).addClass("past");
        } else if (elementID > currentTime) {
            $(manipID).addClass("future");
        } else {
            $(manipID).addClass("present");
        }
    }
}

// checkTime every 5 minutes
setInterval(checkTime(), (1000 * 60) * 5);

还有 HTML：

        <div class="time-block row nine">
          <p class="hour col-1">9:00 AM </p>
          <textarea class="textarea col-10" id="09"></textarea>
          <button class="saveBtn col-1"><img src="https://img.icons8.com/metro/26/000000/save.png"/></button>
        </div>