显示 div 与 JSON 数据的 'Open Hours' date/time 对齐

Question

我基本上只想在用户当前日期和时间与我的 JSON 数据中定义的 'Open Hours' 一致时显示 div。如果用户当前 date/time 不在 JSON 数据的开放时间；只需隐藏相同的 div.

下面是我现在的JS： （注意，我需要在 vanilla JS 中执行此操作；ES6，理想情况下。绝对没有 jQuery）

document.addEventListener('DOMContentLoaded', () => { 
  loadSVGs();
  fetch('https://www.website.com/wp-obfuscate/date/v9/stuff/options')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {

    const hoursoperation = document.getElementById('hours-operation'); 
      console.log(myJson.date['office_hours']);

      var d = new Date(); 
      var dayOfWeek = d.getDay();
      var hour = d.getHours();
      console.log(d);
      console.log(dayOfWeek);
      console.log(hour);

      function matchingDay(hoursoperations) {
        return hoursoperations === dayOfWeek;
      }
      console.log(Object.values(myJson.date).findIndex(matchingDay));

      // Show  element
      var show = function (hoursoperation) {
        hoursoperation.style.display = 'block';
      };
      // Hide an element
      var hide = function (hoursoperation) {
        hoursoperation.style.display = 'none';
      };
      //...

下面是 JSON 响应示例。

0: {day: "7", starting_time: "0800", closing_time: "1600"}
1: {day: "1", starting_time: "0600", closing_time: "1600"}
2: {day: "2", starting_time: "0600", closing_time: "1600"}
3: {day: "3", starting_time: "0600", closing_time: "1600"}
4: {day: "4", starting_time: "0600", closing_time: "1600"}
5: {day: "5", starting_time: "0600", closing_time: "1600"}
6: {day: "6", starting_time: "0700", closing_time: "1700"}
length: 7
__proto__: Array(0)

我只想在当前 date/time 与我的 JSON 数据 'open hours' 对齐时显示我的 div #hours-operation .

我也开始想出下面的内容；但我又迷路了。

  // const isActive = starting_time <= closing_time   // test the shift type (normal or inverted)
  // ? (starting_time <= now && closing_time > now)   // normal comparison
  // : (starting_time <= now || closing_time > now);  // inverted comparison
  // console.log(isActive)

例如；目前是这样的：console.log(Object.values(myJson.date).findIndex(matchingDay));

在控制台打印-1；我不确定如何 use/continue with.....

这是我正在尝试的另一种技术：

 function findMatching(data, date) {
      const dayOfWeek = (date.getDay()||7).toString();
      const time =
        date.getHours().toString().padStart(2,'0') +
        date.getMinutes().toString().padStart(2,'0');
      return data.find( item =>
        item.day === dayOfWeek && (
          item.starting_time <= time &&
          time < item.closing_time 
        )
      );
    }

    console.log(findMatching("test" + data, new Date));

但我收到以下 控制台错误:

Uncaught (in promise) TypeError: data.find is not a function
    at findMatching (index.js:43)
    at eval (index.js:48)

Answer 1

这是一个解决方案..

var openChema = [
{day: "7", starting_time: "0800", closing_time: "1600"},
{day: "1", starting_time: "0600", closing_time: "1600"},
{day: "2", starting_time: "0600", closing_time: "1600"},
{day: "3", starting_time: "0600", closing_time: "1600"},
{day: "4", starting_time: "0600", closing_time: "1600"},
{day: "5", starting_time: "0600", closing_time: "1600"},
{day: "6", starting_time: "0700", closing_time: "1700"}]



var d = new Date();
var day = d.getDay()

var weekDay = openChema.filter(x =>  x.day == day )


var n = d.getHours() < 10 ? "0" +d.getHours()  : d.getHours();
var m = d.getMinutes() < 10 ? "0" +d.getMinutes() : d.getMinutes();

var starting_time = (parseInt(weekDay[0].starting_time) / 100) * 3600;
var closing_time  = (parseInt(weekDay[0].closing_time) / 100) * 3600; 
var now           = (parseInt(n+""+m) /100) * 3600
            
      const hoursoperation = document.getElementById('hours-operation')
       
      if(now>starting_time && now<closing_time){
        
       hoursoperation.style.display = 'block';
        
        
      }else{
         hoursoperation.style.display = 'none';
      }

 <div id="hours-operation" >Hello welcome</div>

Answer 2

您的 findMatching() 函数工作正常。你得到一个错误，因为函数期望第一个参数是一个数组，但你传递了一个字符串 "test" + data.

此外，您应该将时间作为数字而不是字符串进行比较。

const data = [
{day: "7", starting_time: "0800", closing_time: "1600"},
{day: "1", starting_time: "0600", closing_time: "1600"},
{day: "2", starting_time: "0600", closing_time: "1600"},
{day: "3", starting_time: "0600", closing_time: "1600"},
{day: "4", starting_time: "0600", closing_time: "1600"},
{day: "5", starting_time: "0600", closing_time: "1600"},
{day: "6", starting_time: "0700", closing_time: "1700"}];

function findMatching(data, date) {
  const dayOfWeek = (date.getDay()||7).toString();
  const time = date.getHours() * 100 + date.getMinutes();
  return data.find( item =>
    item.day === dayOfWeek && (
      +item.starting_time <= time &&
      time < +item.closing_time 
    )
  );
}

console.log(findMatching(data, new Date("October 13, 2019 11:13:00"))); // valid
console.log(findMatching(data, new Date("October 13, 2019 16:01:00"))); // not valid

显示 div 与 JSON 数据的 'Open Hours' date/time 对齐

show div aligning with JSON data's 'Open Hours' date/time

javascript

arrays

json

ecmascript-5

ecmascript-6