Отображение / скрытие элемента только в мобильном представлении в определенные дни / часы

Question

Мы пытаемся показать / скрыть номер телефона на сайте в мобильном представлении только с учетом рабочего времени нашего клиента.

Пример. Они открыты с 9:00 до 17:00, с понедельника по четверг, и номер должен отображаться во всех размерах браузера, однако, если они закрыты в течение оставшегося времени, номер не должен отображаться в мобильном представлении, а оставаться в окнах просмотра планшета и рабочего стола. .

Вот используемый нами 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:00 в Австралии - это не то же самое, что 9:00 в Америке. Вместо этого вы можете использовать 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>