如果日期时间与API响应匹配，则显示/隐藏消息

Question

我正在使用react，并且正在尝试做一些棘手的事情，而且我不知道如何开始。如果实际时间与API响应显示的时间相对应，则需要应用某种样式。响应是这样的：

data: {
  actual: {progorig: "15:00 program One ", end: "18:00"}
}

如果实际时间在15:00和18:00之间，则必须对<td>上的某些HTML应用样式。

我可以获得执行此操作的实际时间：

function refreshTime()
{
    var dateString = new Date().toLocaleString(
        "en-US",
        {timeZone: "America/Sao_Paulo"}
    );
    var formattedString = dateString.replace(", ", " - ");
    console.log(formattedString);
}

setInterval(refreshTime, 1000);

但是我不知道如何比较来自API的数据对象的当前时间。注意，我不想使用moment.js或其他库。有什么帮助吗？谢谢！

Answer 1

请仔细阅读下面的示例代码，它可以解决您的问题。

var APIData = {
        actual: { start: "15:00", end: "18:00" }
    }

    function refreshTime() {
        var dateString = new Date();
        var strts = APIData.actual.start.split(":");
        var ends = APIData.actual.end.split(":");
        var customData = {
            actual: {
                start: new Date(dateString.setHours(strts[0], strts[1], 00)),
                end: new Date(dateString.setHours(ends[0], ends[1], 00)),
            }
        }
        var isConditionsFalls = dateString > customData.actual.start && dateString < customData.actual.end;
        console.log(isConditionsFalls);
        if (isConditionsFalls) {
            //update the UI
        }
    }
    setInterval(refreshTime, 1000);

Answer 2

要获取api响应的开始/结束时间和分钟，可以使用String.match()：

let data = {
  actual: {progorig: "15:00 program One ", end: "18:00"} 
};

let start = data.actual.progorig.match(/\d{2}:\d{2}/);
let end = data.actual.end.match(/\d{2}:\d{2}/);

console.log(start[0] + " - " + end[0]);

.as-console {background-color:black !important; color:lime;}
.as-console-wrapper {max-height:100% !important; top:0;}

现在，要检查当前小时和分钟是否在api响应获得的范围内，您可以像这样继续进行：

let data = {
  actual: {progorig: "15:00 program One ", end: "18:00"} 
};

let start = data.actual.progorig.match(/\d{2}:\d{2}/)[0];
let end = data.actual.end.match(/\d{2}:\d{2}/)[0];

function refreshTime()
{
    let currH = new Date().getHours();
    let currM = new Date().getMinutes();
    currH = currH < 10 ? "0" + currH : currH.toString();
    currM = currM < 10 ? "0" + currM : currM.toString();
    let currTime = currH + ":" + currM;
    let bCheck = currTime > start && currTime < end;

    console.log(`Is current time of ${currTime} between ${start} and ${end}? ${bCheck}`);
}

setInterval(refreshTime, 2000);

.as-console {background-color:black !important; color:lime;}
.as-console-wrapper {max-height:100% !important; top:0;}

根据评论进行更新：

  

API响应为：{progorig: "15:00 program One ", end: "1800"}

let data = {
  actual: {progorig: "15:00 program One ", end: "1800"} 
};

let start = data.actual.progorig.match(/\d{2}:?\d{2}/);
start = start[0].replace(":", "");
let end = data.actual.end.match(/\d{2}:?\d{2}/);
end = end[0].replace(":", "");

function refreshTime()
{
    let currH = new Date().getHours();
    let currM = new Date().getMinutes();
    currH = currH < 10 ? "0" + currH : currH.toString();
    currM = currM < 10 ? "0" + currM : currM.toString();
    let currTime = currH + currM;
    let bCheck = currTime > start && currTime < end;

    console.log(`Is current time of ${currTime} between ${start} and ${end}? ${bCheck}`);
}

setInterval(refreshTime, 2000);

.as-console {background-color:black !important; color:lime;}
.as-console-wrapper {max-height:100% !important; top:0;}