Проблема часового пояса таймера обратного отсчета Javascript

ProgramBox

Проблема часового пояса таймера обратного отсчета Javascript

Post author:admin
Запись опубликована:1 ноября, 2022
Post category:Вопросы по программированию

#javascript #timer #timezone #countdown

#javascript #таймер #Часовой пояс #обратный отсчет

Вопрос:

возможно ли, чтобы таймер обратного отсчета был одинаковым для всех людей, независимо от их часового пояса, когда я ставлю дату, таймер будет отображаться по-разному в зависимости от часового пояса, и я хочу, чтобы они синхронизировались, чтобы все получали одно и то же время, потому что теперь «ГОТОВО» будет отображаться в разное время в зависимости отстрана.

вот код, спасибо за любую помощь!

 <head> 
<title>
    TITLE TEXT
</title>
    <meta charset="utf-8">
    <meta name="Description" CONTENT="Text">
<link rel="icon" type="image/png" href="" />
    <style> 
.dropdown {
          width: 600px;
          padding: 0px;
          padding-top:100px;
          padding-bottom:150px;
        }

        table {
            border-width: 70px;
            border-color: black;
            background-color: #DCF5F1;
          }

          .dropdown {
            margin: auto;
          }

          th {
            border: 2px solid black;
          }
          td {
            border: 2px groove black;

          }

          a {
            text-decoration: none;
            color:black;

          }

          a:hover {
            color: grey;
            text-decoration: underline;
          }


          table {
            width: 600px;
            table-layout: fixed;
            font-size: 20px;
          }

          table td {
            padding: 20px;
            font-weight: bold;
            font-family: arial;
          }

 



          #timer .endsoon {
            color: red;
          }
          




    </style> 
</head> 

<body> 
<div class="dropdown">
        <table id="timer">
            <tbody>
            <tr>
                <td class="headtext">TITLE</td>
                <td class="headtext">TIMER</td>

            </tr>
            </tbody>
        </table>
    </div>
</body> 

<script>
                    var arr = [
    // Date...................Link..............Title
    ['Dec 16, 2020 01:00:00', 'www.google.com', 'text'],
    ['Dec 16, 2020 01:00:00', 'www.google.com', 'text'],
    ['Dec 16, 2020 05:00:00', 'www.google.com', 'text'],
    ['Dec 16, 2020 05:00:00', 'www.google.com', 'text'],
    ['Dec 16, 2020 05:00:00', 'www.google.com', 'text'],
    ['Dec 16, 2020 05:00:00', 'www.google.com', 'text'],
    ['Dec 16, 2020 05:00:00', 'www.google.com', 'text'],
    ['Dec 16, 2020 05:00:00', 'www.google.com', 'text'],
    ['Dec 16, 2020 05:00:00', 'www.google.com', 'text'],
    ['Dec 16, 2020 05:00:00', 'www.google.com', 'text'],
    ['Dec 16, 2020 05:00:00', 'www.google.com', 'text'],
    ['Dec 16, 2020 05:00:00', 'www.google.com', 'text'],
    ['Dec 16, 2020 03:10:25', 'www.google.com', 'text'],
    ['Dec 16, 2020 03:10:25', 'www.google.com', 'text'],
    ['Dec 16, 2020 03:10:25', 'www.google.com', 'text'],
    ['Dec 16, 2020 03:10:25', 'www.google.com', 'text'],
    ['Dec 16, 2020 03:10:25', 'www.google.com', 'text'],

];

// Remove after 5min
var remAft = 10;

// Get element with ID "timer"
var wrap = document.querySelector('#timer tbody');
// For loop Array "arr"
for (var i = 0; i < arr.length; i  ) {
    if (checkDate(arr[i][0])) {
        // Adds the elements of the table with filled in information
        wrap.innerHTML  = '<tr><td><a href="'   arr[i][1]   '">'   arr[i][2]   '</a></td><td id="'   'demo'   (i   1)   '"></td></tr>'
        // Invokes the function by passing as arguments Date and ID
        new myTimers(arr[i][0], 'demo'   (i   1));
    }
}

function checkDate(tim) {
    var countDownDate = new Date(tim).getTime();
    var now = new Date().getTime();
    var distance = countDownDate - now;
    if (distance > -60 * 1000 * remAft) { return true; } else { return false; }
}

function myTimers(tim, ele) {
    // Set the date we're counting down to
    var countDownDate = new Date(tim).getTime();

    // Update the count down every 1 second
    var x = setInterval(function () {

        // Get today's date and time
        var now = new Date().getTime();

        // Find the distance between now and the count down date
        var distance = countDownDate - now;

        // Time calculations for days, hours, minutes and seconds
        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((distance % (1000 * 60)) / 1000);

        // Display the result in the element with id="demo"
        document.getElementById(ele).innerHTML = days   "d "   hours   "h "
              minutes   "m "   seconds   "s ";

        // If the count down is finished, write some text
        if (distance < 0) {
            if (distance > -60 * 1000 * remAft) {
                document.getElementById(ele).innerHTML = "DONE";
                document.getElementById(ele).classList.add('dropped');
                document.getElementById(ele).style.color = 'tomato';
                document.getElementById(ele).style.textDecoration = "line-through";
            } else {
                clearInterval(x);
                var chekEl = document.getElementById(ele);
                if (chekEl) {
                    chekEl.parentElement.remove();
                }
            }
        }

        // If days is 0 add class 'endsoon'
        if (days === 0) {
            document.getElementById(ele).classList.add('endsoon');
        }

    }, 1000);

}
</script>
</html>```

Ответ №1:

По сути, вы создаете свое целевое время как:

 new Date("Dec 16, 2020 03:10:25")

Это нестандартный формат, и большинство браузеров будут интерпретировать его в терминах местного времени.

Вместо этого выберите момент времени, основанный на UTC, и передайте его в формате ISO 8601 / RFC 3339.

Например, если вы имели в виду 3:10:25 в часовом поясе со смещением UTC 1, вычтите 1 час, чтобы получить 2:10:25 UTC, представленный следующим образом:

 new Date("2020-12-16T02:10:25Z")

Используйте значения в этом формате в вашем исходном массиве, и у всех будет одна и та же цель для обратного отсчета. Имейте в виду, что Z в конце означает UTC, поэтому не забудьте включить это.

В качестве альтернативы вы можете использовать местное время и локальное смещение, действующее для этого времени, вместо вычитания. Это выглядит так:

 new Date("2020-12-16T03:10:25 01:00")

Вы можете использовать любую форму, в зависимости от того, какая из них вам удобнее.

1. я не знаю, как реализовать это в моем исходном коде. Мой часовой пояс — GMT 1, и мне нужны таймеры обратного отсчета, чтобы отсчитывать время до одного и того же времени независимо от часового пояса, можете ли вы помочь мне добавить это в мой код?

2. Ваши значения даты в вашем исходном коде, которые вы показали, находятся в первом элементе arr массива. Если у вас GMT 1, то просто вычтите час и переформатируйте эти строки в YYYY-MM-DDTHH:MM:SSZ формат. Однако будьте осторожны в отношении изменений смещения из-за летнего времени. Возможно, сейчас GMT 1, но это не имеет значения. Имеет значение только смещение для заданной метки времени. Если вы находитесь по Гринвичу 2 или по Гринвичу 0 в какое-то другое время года, временные метки должны отражать это соответствующим образом.

3. В качестве альтернативы вы можете использовать местное время и действующее смещение по местному времени. Я обновляю свой ответ, чтобы показать и то, и другое.

4. значит, мне придется вручную проверять летнее время и соответствующим образом изменять смещения?

5. 01:00 это смещение от UTC. 03:10:25 01:00 означает 3:10:25 по местному времени, где смещение равно UTC 1. Это не означает 4:10:25. Да, вам нужно будет указать правильное смещение.

Ответ №2:

Вы можете использовать getTimezoneOffset для дальнейшей настройки времени, чтобы каждый мог использовать, скажем, время UTC. (Смещение часового пояса — это разница в минутах между UTC и местным временем. )

 var offset = new Date().getTimezoneOffset();
console.log(offset);