时间戳

首页 > 解决方案 > 使用 html 和 JavaScript 根据时间记录创建 Open/Closed 商店

javascript - 使用 html 和 JavaScript 根据时间记录创建 Open/Closed 商店

问题描述

我想使用 html 和 JavaScript 基于时间记录创建一个打开/关闭的商店。

因此，如果是星期五，id="friday"将显示具有 an 的 div，否则将显示 id="week" 的 div。

也是从早上 8 点到下午 6 点的时间，divid="open"将显示，否则 divid="closed"将显示

我创建了这段代码，但我不能正常工作我不知道有什么问题。

var currentDate = new Date();
var currentMonth = currentDate.getMonth();
var currentDay = currentDate.getDay();
var currentHour = currentDate.getHours();
var currentMinute = currentDate.getMinutes();

function openClose() {
  if (currentDay >= 1 && currentDay <= 6) {
    document.getElementById("friday").style.display = "none";
    if (currentHour >= 8 && currentHour <= 18) {
      document.getElementById("closed").style.display = "none";
    } else {
      document.getElementById("open").style.display = "none";
    }
  }
  if (currentDay === 7) {
    document.getElementById("week").style.display = "none";
    if (currentHour >= 10 && currentHour <= 17) {
      document.getElementById("closed").style.display = "none";
    } else {
      document.getElementById("open").style.display = "none";
    }
  }
  if (currentDay === 0) {
    document.getElementById("open").style.display = "none";
    document.getElementById("friday").style.display = "none";
  }
};

setInterval(openClose(), 5000);
<div ALIGN="center">
    <div style="color:red;font-size: 25px;" id="closed"> Closed</div>
    <div style="color:green;font-size: 25px;" id="open">Open.</div>
</div> 
<time> We are open every day of the week - 
    <div id="friday"> Friday - 8:00 AM to 5:30 PM</div> 
    <div id="week">8:00 AM to 5:00 PM</div> 
</time>

标签： javascripthtml

解决方案

以下略短的脚本应该可以解决问题：

该常量time以数字形式保持当前时间信息在给定时区中有效。这使得决定商店是“开放”还是“关闭”变得容易。类似的过程用于根据常量中的字符串值来决定我们是否有“正常工作日”、星期五（“Fri”）或星期日（“Sun”）day。

  
function openClose() {
  const [day,t] = new Date().toLocaleString('en-en', {weekday:"short",hour: '2-digit',minute:'2-digit', hour12: false, timeZone: 'Europe/London' }).replace(":","").split(" "),
         time = +t; // make time numeric
  document.querySelectorAll("div").forEach(d=>d.style.display=""); // make all divs visible at first
  document.getElementById(day!=="Fri"?"friday":"week").style.display = "none";
  // console.log(time);
  document.getElementById(time>=(day==="Sun"?1000:800) && time<=(day==="Fri"?1730:1700)?"closed":"open").style.display = "none";
}
      
setInterval(openClose, 5000);
openClose();
<div ALIGN="center">
    <div style="color:red;font-size: 25px;" id="closed"> Closed</div>
    <div style="color:green;font-size: 25px;" id="open">Open.</div>
</div> 
<time> We are open every day of the week - 
    <div id="friday"> Friday - 8:00 AM to 5:30 PM</div> 
    <div id="week">8:00 AM to 5:00 PM</div> 
</time>

我正在使用Date.toLocaleString()夏令时调整（如果适用）来获取指定时区（此处：“欧洲/伦敦”）中的当前日期和时间。

脚本会以 5 秒的间隔持续检查工作日和时间，并显示或隐藏适当<div>的 s，注意周五和周日不同的开放时间。这并不是真正的“有效”，因为更改很少发生，但它会以某种方式起作用，始终会显示最新的开放信息。

尽管day和time似乎随着时间的推移而变化，但它们在函数范围内只分配一次，因此openClose()在const那里是值。

推荐阅读