根据时间显示/隐藏div

Question

我目前正在使用 Webflow 构建一个网站。 我需要根据我的客户定义的时间段显示一个div“我们开放”或“我们关闭”，以便通知网站访问者他们是否可以打电话。然而，它并不是 100% 有效。 例如，下午 4:20，它已经显示“我们已关闭”，而它应该仍显示“我们正在营业”。

这里是该网站的临时链接：https://gaia-reunion.webflow.io/有问题的div位于页面底部：https://gaia-reunion.webflow.io /#说话.

到目前为止，我已经尝试过这个解决方案：

<script>
// Fonction pour afficher ou masquer les div en fonction de l'heure de l'île de la Réunion
function afficherDivSelonHeure() {
    var date = new Date();
    var options = {timeZone: 'Indian/Reunion'};
    var heureReunion = date.toLocaleTimeString('fr-FR', options); // Récupérer l'heure locale de l'île de la Réunion

    var heure = parseInt(heureReunion.split(':')[0]); // Récupérer seulement l'heure
    var minute = parseInt(heureReunion.split(':')[1]); // Récupérer seulement les minutes

    // Convertir l'heure de l'île de la Réunion en heure UTC pour faciliter la comparaison
    var heureUTC = (heure - 4) % 24; // UTC+4 pour l'île de la Réunion

    // Déterminer le jour de la semaine
    var jour = date.getDay();

    // Vérifier si c'est un jour ouvrable et si l'heure est dans les plages horaires spécifiées
    var plageHoraire1 = (heureUTC >= 8 && heureUTC < 12) || (heureUTC === 12 && minute === 0); // plage horaire du matin
    var plageHoraire2 = (heureUTC >= 13 && heureUTC < 17) || (heureUTC === 17 && minute === 0); // plage horaire de l'après-midi

    var jourOuvrable = false;

    // Déterminer si c'est un jour ouvrable en fonction du jour de la semaine et des plages horaires spécifiées
    switch (jour) {
        case 1: // Lundi
        case 2: // Mardi
        case 3: // Mercredi
        case 4: // Jeudi
            jourOuvrable = plageHoraire1 || plageHoraire2;
            break;
        case 5: // Vendredi
            jourOuvrable = (heureUTC >= 8 && heureUTC < 13) || (heureUTC === 13 && minute === 0); // plage horaire spéciale pour le vendredi
            break;
        default:
            jourOuvrable = false;
    }

    // Sélectionner les divs
    var divOpen = document.getElementById("div-open");
    var divClose = document.getElementById("div-close");

    // Afficher div-open si c'est un jour ouvrable et l'heure est dans les plages horaires spécifiées, sinon afficher div-close
    if (jourOuvrable) {
        divOpen.style.display = "block";
        divClose.style.display = "none";
    } else {
        divOpen.style.display = "none";
        divClose.style.display = "block";
    }
}

// Appeler la fonction une fois au chargement de la page pour afficher les divs correctement
afficherDivSelonHeure();

// Rafraîchir l'affichage toutes les minutes pour prendre en compte les changements d'heure
setInterval(afficherDivSelonHeure, 60000);

</script>

如前所述，它似乎部分起作用。例如，在下午 4:20，它已经显示“我们已关闭”，而它应该仍显示“我们正在营业”。

Answer 1

根据您的代码，您正在根据 UTC 检查开放时间。另外根据您的代码，您所在的时区为 UTC+4。因此，在您的时间 16:20，您将在 UTC 时间 12:20 进行检查。这将“关闭”，开放时间为 8:00-12:00 和 13:30-17:00。

您可能希望使用当地时间而不是 UTC 进行日期检查。由于 UTC 也不使用夏令时，而您的当地时间可能会使用夏令时。