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

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') {

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

    'block';

    } else {

if ( window.innerWidth <  640 ) {

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

    'none';

    }

}

在你的情况下最简单的方法。

Answer 2

我们已经解决了我们的编码问题。结果如下：

var d = new Date();

var central_d = d.toLocaleString("en-US", {timeZone: "America/Chicago"});

if (central_d.includes("PM")){

 var add_time = 12;

} else {

 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  || dayOfWeek == 5 && hour >= 8 && hour <= 17 || dayOfWeek == 6 && hour >= 9 && hour <= 13){

    status='open';

} else {

    status='closed';

}

if (status==='open') {

    vwo_$("#mobile-number-hide").vwoCss({"visibility":"show"});

} else {

    vwo_$("#mobile-number-hide").vwoCss({"display":"none !important"});

}

最后一个 if else 语句是 VWO 特定的 javascript

Answer 3

使用 Javascript 的问题是时间基于访问者的浏览器/时区。因此，澳大利亚的晚上 9 点与美洲的晚上 9 点不同。您可以改用 PHP，这会占用您服务器的时间。确保您的服务器时区是根据营业地点设置的。

PHP：

<?php

function hideOnTime(){

    $hideOnTime = '';

        if (strtotime(date('H:i')) >= strtotime('06:00') && strtotime(date('H:i')) <=                strtotime('20:00')){

    $hideOnTime = 'none';

    } else {

        $hideOnTime = 'block';

    }

    return $hideOnTime;

    }

?>

这可能是您的内联 CSS：

<style>

@media (max-width: 860px) {

.closed {

 display: <?php echo hideOnTime();?>;

}}

</style>