【问题标题】:How to display day of week / Time of day / open hours status?如何显示星期几/时间/营业时间状态?
【发布时间】:2020-11-02 17:54:05
【问题描述】:

尝试使用 HTML / JS 显示如下内容:现在是星期一上午 11:03 — 我们目前正在营业

我尝试了一些不同的方法,但只能部分发挥作用。我想显示工作日/一天中的时间/以及商店是开门还是关门。

这些是时间:

Monday 10 a.m. - 5 p.m.
Tuesday 12 - 7 p.m.
Wednesday 10 a.m. - 5 p.m.
Thursday 10 a.m. - 5 p.m.
Friday 10 a.m. - 5 p.m.
Saturday 10 a.m. - 2 p.m.
Sunday Closed
function getDayOfWeek(date) {
  const dayOfWeek = new Date(date).getDay();  
  var dateWithouthSecond = new Date();
dateWithouthSecond.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
  return isNaN(dayOfWeek) ? null : 
    ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][dayOfWeek];
}

document.getElementById("demo").innerHTML = ( "It's  " + getDayOfWeek(Date.now()) );

【问题讨论】:

  • 为什么不直接使用toLocaleString 并传入weekday 选项?
  • 似乎这些答案之一会让您非常接近解决方案:stackoverflow.com/questions/9081220/…
  • 希望你记得不是每个人都在同一个时区
  • 是的,我知道,但对于这种特殊情况,我并不担心时区

标签: javascript html


【解决方案1】:

正如其他人所建议的,您可以使用Date.prototype.toLocaleString() 并传递weekday 参数来检索星期几。

const OperatingHours = {
  'Monday'    : { 'open': 10, 'close': 17 },
  'Tuesday'   : { 'open': 12, 'close': 19 },
  'Wednesday' : { 'open': 10, 'close': 17 },
  'Thursday'  : { 'open': 10, 'close': 17 },
  'Friday'    : { 'open': 10, 'close': 17 },
  'Saturday'  : { 'open': 10, 'close': 14 },
  'Sunday'    : { 'open':  1, 'close': -1 }
};

const greeting = (date) => {
  const now = new Date(),
    weekday = now.toLocaleString('en-us', { weekday: 'long' }),
    formattedTime = now.toLocaleTimeString('en-US',
      { hour: '2-digit', minute: '2-digit' }),
    currHour = now.getHours(),
    { open, close } = OperatingHours[weekday],
    isOpen = currHour >= open && currHour <= close;
  return isOpen
    ? `It's ${weekday} ${formattedTime} — we are currently open.`
    : `Sorry, it's ${weekday} ${formattedTime} — we are currently closed.`;
};

console.log(greeting(new Date()));

【讨论】:

    【解决方案2】:

    根据您的营业时间设置一个对象,然后进行如下比较。请注意,已设置星期日,因此两者之间没有任何值。

    const HOURS_OPEN = {
      "Monday": {"open": 10,"close": 16},
      "Tuesday": {"open": 12,"close": 18},
      "Wednesday": {"open": 10,"close": 16},
      "Thursday": {"open": 10,"close": 16},
      "Friday": {"open": 10,"close": 16},
      "Saturday": {"open": 10,"close": 13},
      "Sunday": {"open": 1,"close": -1}
    }
    
    let today = new Date();
    let weekday = today.toLocaleString('en-us', {
      weekday: 'long'
    });
    let currentHour = today.getHours();
    let open = HOURS_OPEN[weekday].open;
    let close = HOURS_OPEN[weekday].close;
    
    let statusString = "";
    if (currentHour >= open && currentHour <= close) {
      statusString = `It's ${formatNow()}. We're open!`;
      console.log(statusString);
    } else {
      statusString = `It's ${formatNow()}. Sorry, we're closed :(`;
      console.log(statusString);
    }
    document.getElementById("demo").innerText = statusString;
    
    function formatNow() {
      let d = new Date();
      let min = d.getMinutes();
      let hr = d.getHours();
      let ampm = "AM"
      if (min < 10) {
        min = "0" + min;
      }
      if (hr > 12) {
        hr -= 12;
        ampm = "PM";
      }
      return (`${hr}:${min} ${ampm}`);
    }
    &lt;div id="demo"&gt;&lt;/div&gt;

    【讨论】:

    • 这很有帮助,但我希望它以这种方式显示:“现在是星期一下午 12:58 — 我们目前营业”
    • 是的!几乎正是我想要做的,除了我希望它也显示工作日。 (ex->Monday, Tuesday ..etc) 如果我在返回的小时和分钟之前添加 ${d},它会返回一个非常长的日期。我只想要星期几。
    猜你喜欢
    • 2018-02-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-06-02
    • 1970-01-01
    • 2020-07-10
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多