Javascript倒计时计时器时区问题_Javascript_Timer_Timezone_Countdown

Javascript倒计时计时器时区问题

javascript timer

Javascript倒计时计时器时区问题,javascript,timer,timezone,countdown,Javascript,Timer,Timezone,Countdown,有没有可能让所有人的倒计时计时器都相同，而不管他们的时区如何，当我现在输入日期时，计时器将根据时区显示不同，我希望他们同步，以便每个人都能获得相同的时间，因为现在“完成”将根据国家在不同的时间显示这是代码，谢谢你的帮助！：）标题文本 .下拉列表{ 宽度：600px；填充：0px；填充顶部：100px；填充底部：150px； } 桌子{ 边框宽度：70像素；边框颜色：黑色；背景色：#DCF5F1； } .下拉列表{ 保证金：自动； } th{ 边框：2件纯黑； } 运输署{ 边框：

有没有可能让所有人的倒计时计时器都相同，而不管他们的时区如何，当我现在输入日期时，计时器将根据时区显示不同，我希望他们同步，以便每个人都能获得相同的时间，因为现在“完成”将根据国家在不同的时间显示

这是代码，谢谢你的帮助！：）


标题文本
.下拉列表{
宽度：600px；
填充：0px；
填充顶部：100px；
填充底部：150px；
}
桌子{
边框宽度：70像素；
边框颜色：黑色；
背景色：#DCF5F1；
}
.下拉列表{
保证金：自动；
}
th{
边框：2件纯黑；
}
运输署{
边框：2个黑色凹槽；
}
a{
文字装饰：无；
颜色：黑色；
}
a:悬停{
颜色：灰色；
文字装饰：下划线；
}
桌子{
宽度：600px；
表布局：固定；
字体大小：20px；
}
表td{
填充：20px；
字体大小：粗体；
字体系列：arial；
}
#计时器，很快结束{
颜色：红色；
}
标题
计时器
var arr=[
//日期链接标题
['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']，
['Dec16202003:10:25'，'www.google.com'，'text']，
['Dec16202003:10:25'，'www.google.com'，'text']，
['Dec16202003:10:25'，'www.google.com'，'text']，
['Dec16202003:10:25'，'www.google.com'，'text']，
['Dec16202003:10:25'，'www.google.com'，'text']，
];
//5分钟后取出
风险价值剩余=10；
//获取ID为“timer”的元素
var wrap=document.querySelector（“#timer tbody”）；
//用于循环数组“arr”
对于（变量i=0；i-60*1000*remAft）{return true；}否则{return false；}
}
功能myTimers（tim、ele）{
//确定我们倒计时的日期
var countDownDate=新日期（tim）.getTime（）；
//每1秒更新一次倒计时
var x=设置间隔（函数（）{
//获取今天的日期和时间
var now=new Date（）.getTime（）；
//找出现在和倒计时日期之间的距离
var距离=倒计时日期-现在；
//天、小时、分钟和秒的时间计算
变量天数=数学楼层（距离/（1000*60*60*24））；
可变小时数=数学楼层（（距离%（1000*60*60*24））/（1000*60*60））；
var分钟=数学楼层（（距离%（1000*60*60））/（1000*60））；
var秒=数学楼层（（距离%（1000*60））/1000）；
//使用id=“demo”在元素中显示结果
document.getElementById（ele.innerHTML=days+“d”+hours+“h”
+分钟+米+秒+秒；
//如果倒计时结束，写一些文字
如果（距离<0）{
如果（距离>-60*1000*remAft）{
document.getElementById（ele.innerHTML=“完成”；
document.getElementById（ele.classList.add（'dropped'）；
document.getElementById（ele.style.color='tomato'；
document.getElementById（ele.style.text装饰=“行通过”；
}否则{
净间隔（x）；
var chekEl=document.getElementById（ele）；
如果（切克尔）{
chekEl.parentElement.remove（）；
}
}
}
//如果天数为0，则添加类“endsoon”
如果（天数==0）{
document.getElementById（ele.classList.add（'endsoon'）；
}
}, 1000);
}
```

您可以使用getTimezoneOffset进一步调整时间，以便每个人都可以使用UTC时间。（时区偏移是UTC和本地时间之间的差值，以分钟为单位。）

基本上，您将目标时间构建为：

新日期（“2020年12月16日03:10:25”）

这是一种非标准格式，大多数浏览器都会根据本地时间进行解释

相反，选择一个基于UTC的时间点，并以ISO 8601/RFC 3339格式传递它

例如，如果您指的是UTC+1偏移的时区中的3:10:25，则减去1小时得到2:10:25 UTC，如下所示：

新日期（“2020-12-16T02:10:25Z”）

在源数组中使用该格式的值，每个人都将有相同的倒计时目标。请记住，结尾处的

表示UTC，因此不要忘了包括这一点。：）

或者，您可以使用本地时间和EFF中的本地偏移量

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

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