Javascript 倒数计时器时区问题

Question

是否可以为所有人设置相同的倒数计时器，而不管他们所在的时区，当我现在输入日期时，计时器会根据时区显示不同，我希望他们同步，这样每个人都一样时间，因为现在“完成”将根据国家/地区的不同时间显示。

这是代码感谢您的帮助！ :)

<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>```

Answer 1

你可以使用getTimezoneOffset进一步调整时间，让大家可以使用说的UTC时间。（时区偏移量是 UTC 和本地时间之间的差异，以分钟为单位。）

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

Answer 2

您实际上是在将目标时间设置为：

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")

您可以使用任何一种形式，具体取决于哪种形式对您来说更容易。

Javascript 倒数计时器时区问题

Javascript countdown timer timezone problem

javascript

timer

timezone

countdown