Question

我基本上只想在用户当前日期和时间与JSON数据中定义的“开放时间”对齐时显示一个div。如果用户当前日期/时间不在JSON数据的开放时间之外；只需隐藏相同的div。

以下是我拥有的当前JS ： （注意，我需要在香草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)

仅当当前日期/时间与我的JSON数据“开放时间”对齐时，我只想显示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；我不确定如何使用/继续使用.....

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

 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数据的“开放时间”日期/时间保持一致

2 个答案: