在特定日期/小时内仅在移动视图中显示/隐藏元素

Question

我们正在尝试仅在客户的营业时间在移动视图中显示/隐藏网站上的电话号码。

前任。它们的开放时间为周一至周四上午 9 点至下午 5 点，数字应显示在所有浏览器尺寸上，但是当它们在剩余时间内关闭时，数字不应显示在移动视图中，而应继续显示在平板电脑和桌面视口中.

这是我们正在使用的 javascript - 还没有格式化几天和时间。

我们应该如何进行这项工作？

    var d = new Date();

    var dayOfWeek = d.getDay();

    var hour = d.getHours();

    var status = 'open';

    if (dayOfWeek > 2 && dayOfWeek < 6 && hour > 9 && hour < 20) {

    status='open';

    } else {

    status='closed';

    }

    if (status==='open') {

    document.getElementById("mobile-number-hide").style.display = 

    'block';

    } else {

    document.getElementById("mobile-number-hide").style.display = 

    'none';

    }

Answer 1

当它们在剩余时间内关闭时，该数字不应显示在移动设备视图中，但仍会显示在平板电脑和桌面设备视口中。if (status==='open') {&nbsp; &nbsp; document.getElementById("mobile-number-hide").style.display =&nbsp;&nbsp; &nbsp; 'block';&nbsp; &nbsp; } else {if ( window.innerWidth <&nbsp; 640 ) {&nbsp; &nbsp; document.getElementById("mobile-number-hide").style.display =&nbsp;&nbsp; &nbsp; 'none';&nbsp; &nbsp; }}在你的情况下最简单的方法。

Answer 2

我们已经解决了我们的编码问题。结果如下：var d = new Date();var central_d = d.toLocaleString("en-US", {timeZone: "America/Chicago"});if (central_d.includes("PM")){&nbsp;var add_time = 12;} else {&nbsp;var add_time = 0;}var dayOfWeek = d.getDay();var hour = parseFloat(central_d.split(', ')[1].split(':')[0]);var hour = hour + add_time;var status = 'open';if (dayOfWeek > 0 && dayOfWeek < 5 && hour >= 8 && hour <= 20&nbsp; || dayOfWeek == 5 && hour >= 8 && hour <= 17 || dayOfWeek == 6 && hour >= 9 && hour <= 13){&nbsp; &nbsp; status='open';} else {&nbsp; &nbsp; status='closed';}if (status==='open') {&nbsp; &nbsp; vwo_$("#mobile-number-hide").vwoCss({"visibility":"show"});} else {&nbsp; &nbsp; vwo_$("#mobile-number-hide").vwoCss({"display":"none !important"});}最后一个 if else 语句是 VWO 特定的 javascript

Answer 3

使用 Javascript 的问题是时间基于访问者的浏览器/时区。因此，澳大利亚的晚上 9 点与美洲的晚上 9 点不同。您可以改用 PHP，这会占用您服务器的时间。确保您的服务器时区是根据营业地点设置的。PHP：<?phpfunction hideOnTime(){&nbsp; &nbsp; $hideOnTime = '';&nbsp; &nbsp; &nbsp; &nbsp; if (strtotime(date('H:i')) >= strtotime('06:00') && strtotime(date('H:i')) <=&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; strtotime('20:00')){&nbsp; &nbsp; $hideOnTime = 'none';&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; $hideOnTime = 'block';&nbsp; &nbsp; }&nbsp; &nbsp; return $hideOnTime;&nbsp; &nbsp; }?>这可能是您的内联 CSS：<style>@media (max-width: 860px) {.closed {&nbsp;display: <?php echo hideOnTime();?>;}}</style>