Как написать ежемесячное оповещение HTML, которое показывает относительно часового пояса пользователя - PullRequest
Новая
       15

Как написать ежемесячное оповещение HTML, которое показывает относительно часового пояса пользователя

0 голосов
/ 19 апреля 2019

Показать предупреждение в браузере за весь 24-часовой период установленного периода времени и показать его за тот же 24-часовой период установленного часового пояса, независимо от того, какой часовой пояс пользователя.

Затем показатьпериод относительно часового пояса пользователя

1 Ответ

0 голосов
/ 19 апреля 2019

Я потратил немало времени, чтобы выяснить это, и хотел опубликовать свои результаты, чтобы помочь кому-то.

http://jsfiddle.net/y7uLtwno

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.14/moment-timezone-with-data-2012-2022.min.js"></script>

<script>

// Goal: Show a maintenance alert on a webpage that lasts for the 24 hour period relative to a set time zone and then show the alert with the maintenance period relative to the browser's timezone
// Variables: You must set the static timezone relative to where the maintenance is happening
// Scnario: Your server is in one timezone and scheduled maintenance happens every month, and you want to alert users worldwide in their timezone for the whole day
// Author: Joshua Wyss

//MUST use .ready to account for the way that Confluence loads the side-bar. Without it the sidebar loads after the alert and makes the sidebar overlap the header until the user scrolls.

function showHide() {
        // Grab the alert div "s" and the text inside the div "h"
    var s = document.getElementById(4);
    var h = document.getElementById(5);


// *** SET THESE VARIABLES *** //
    // Set location to ISO timezone
    var location = 'America/Chicago';
    // 24 hr format for start and end of maintnenace relative to above timezone. To use 12 hr format change variables t1 and t2 format to 'hh:mm a' the use the "hh:mm am/pm" see: http://momentjs.com/docs
    var maintStart = '18:00';
    var maintEnd = '20:00';
    //For weekOfMonth # should be the number week of the month (starting at 1)
    var weekOfMonth = 4;
    //For dayOfWeek # is >> 0=Sun, 1=Mon, 2=Tue, 3=Wed, 4=Thu, 5=Fri, 6=Sat
    var dayOfWeek = 1;
 // *** SET THESE VARIABLES *** //

    //set d to current time in United States Central Time
    var d = moment(moment().utc().format()).tz(location);
    // Get "location" day of month number (example: 22 or 01)
    var centDateNum = d.format('DD').toString();
    // Get "location" day of week number
    var centDayOfWeek = d.format('e').toString();

    // Check if "location" today matches weekOfMonth and dayOfWeek specified
    if (Math.ceil(centDateNum / 7) == weekOfMonth && centDayOfWeek == dayOfWeek) {
        // Show the HTML alert
      s.style.display = (s.style.display == 'block') ? 'none' : 'block';
      // Convert start time to local
        var t1 = moment.tz(maintStart, 'HH:mm', location).local().toDate();
      // Convert end time to local
        var t2 = moment.tz(maintEnd, 'HH:mm', location).local().toDate();
      // Add start and end time to the HTML alert. TO modify formatting see: http://momentjs.com/docs/#/displaying/format/
        h.innerHTML += " " + moment(t1).format('dddd') + " " + moment(t1).format('HH:mm') + "-" + moment(t2).format('HH:mm');
    }
  }

</script>

<div id="4" style="display:none; background-color: linen; border: 3px solid darkred; margin: 2px; padding: 2px; font-weight: bold; text-align: center;">
  <h3 id="5">Monthly maintenance scheduled this </h3>
</div>
<body onload="showHide()">
...