时间戳

首页 > 解决方案 > Javascript中的时钟未显示正确的时间

javascript - Javascript中的时钟未显示正确的时间

问题描述

我正在尝试用 Javascript 制作一个时钟，用户可以从下拉菜单中选择一个时区，然后单击提交。然后会显示正确的时间。

我得到了通用的 UTC 时间：

var date = new Date();
var h = date.getUTCHours(); // 0 - 23
var m = date.getUTCMinutes(); // 0 - 59
var s = date.getUTCSeconds(); // 0 - 59

然后我从下拉菜单中声明时间和时区值：

function showTime(){

    var time;
    var timezone = document.getElementById('timezone').value;

然后根据时区，小时应该改变，新时间应该更新

    if (timezone.value == "Central"){
    time = (h-5) + ":" + m + ":" + s;
}else if(timezone.value == "Eastern"){
    time = (h-4) + ":" + m + ":" + s;
}else if(timezone.value == "Pacific"){
    time = (h-7) + ":" + m + ":" + s;
}else if(timezone.value == "Mountain"){
    time = (h-6) + ":" + m + ":" + s;
}

为了将时钟设为 12 小时格式，我不再计算时间来根据是 PM 还是 AM 来更新时间

if(h > 12){
   time = (h-12) + ":" + m + ":" + s;
    document.querySelector('#sign').textContent = "PM"; 
}else if (h = 12 ){
    time = (12) + ":" + m + ":" + s;    
    document.querySelector('#sign').textContent = "AM";
} else{
    document.querySelector('#sign').textContent = "AM";   
}

最后，我在正确的 div 中打印出时间：

 document.querySelector('#time').textContent = time;

 // When submit is clicked, correct time is displayed, depending on timezone
    var submit = document.getElementById('submit');
    submit.addEventListener('click', () => {
       setInterval(showTime, 1000);
       console.log('clicked');
   });

这是我的 HTML：

<body>
<h2>Clock</h2>
<form id="myForm">
    <label for="timezone">Choose a timezone:</label>
    <select id="timezone" name="timezone">
        <option value="Central">Central</option>
        <option value="Eastern">Eastern</option>
        <option value="Pacific">Pacific</option>
        <option value="Mountain">Mountain</option>
    </select>
    <input type="submit" id="submit">
  </form>
<div class="time">
    <h1 id="time"></h1>
    <h3 id="sign"></h3>
</div>
<script src="app.js"></script>

标签： javascripthtml

解决方案

我认为这是一个很好的练习来玩弄日期和时间。不过，有几件事我要指出。

使用与 UTC 的固定偏移量不适用于很多时区。例如，太平洋时间在 UTC - 8:00 和 UTC -7:00（夏令时期间）之间变化。此外，时区在标准时间和夏令时之间切换的日期每年都不同。例如，目前太平洋时区在 3 月的第二个星期日更改为 DST，并在 11 月的第一个星期日恢复为标准时间。

因此，通常最好使用标准化规则将日期转换为不同的时区。值得庆幸的是，JavaScript 可以为您完成其中的一些工作。您可以使用函数Date.toLocaleTimeString指定时区标识符。

这种方法还可以为您节省大量编码，您不必自己建立日期。

将新时区添加到下拉列表中也很容易，比如东京或悉尼。可能的时区列表在这里：https ://en.wikipedia.org/wiki/List_of_tz_database_time_zones/

setInterval(showTime, 1000);

function showTime() {
    var date = new Date();
    // Get the timezone the user has selected
    var timeZone = document.getElementById('timezone').value;
    // Format the time according to US rules and in the selected timezone
    var time = date.toLocaleTimeString('en-US', { timeZone  });
    document.querySelector('#time').textContent = time;   
}
<body>
    <h2>Clock</h2>
    <form id="myForm">
        <label for="timezone">Choose a timezone:</label>
        <select id="timezone" name="timezone">
            <option value="America/Chicago">Central</option>
            <option value="America/New_York">Eastern</option>
            <option value="America/Los_Angeles">Pacific</option>
            <option value="America/Denver">Mountain</option>
        </select>
    </form>
    <div class="time">
        <h1 id="time"></h1>
    </div>
<body>

推荐阅读