如何使用“setInterval()"每秒更新一次时间；没有时间每秒闪烁进出? [英] How to update the time every second using "setInterval()" without the time flashing in and out every second?

问题描述

我正在使用一个下拉列表，该列表使用 moment-timezone 显示不同的时区 onclick.例如，当您单击标有est"的下拉菜单时，它将显示东部时间，当您单击cst"时，将显示 cst 时间等等.

无论如何，我遇到的问题是...我使用 setInterval(updateTime, 1000); 来显示秒数每秒增加一次，现在通过在用户点击时执行此操作est"，然后是下拉列表中的另一个时区，如cst"，这两个时间都会每秒出现和消失.我希望这样当您单击 li 元素时，屏幕上的前一个元素将具有 display=none 属性.因此，当您单击 est 时，例如将显示 est 时间，然后当您单击 cst 时，est 将是 display=none 并且将显示 cst 时间.满嘴的男人.

有没有办法做到这一点并且仍然使用 1 秒的 setInterval?

这是我的代码...

<li><ul><li id="tmz1">est</li><li id="tmz2">中央</li><li>太平洋</li><div id="output1"></div><div id="output2"></div>
$(document).ready(function(){var output1 = document.getElementById('output1');var output2 = document.getElementById('output2');document.getElementById('tmz1').onclick = function updateTime(){output2.style.display = "无";output1.style.display = "block";var now = moment();var humanReadable = now.tz("America/Los_Angeles").format('hh:mm:ssA');output1.textContent = humanReadable;设置间隔(更新时间，1000)；}更新时间();});$(document).ready(function(){var output2 = document.getElementById('output2');var output1 = document.getElementById('output1');document.getElementById('tmz2').onclick = function updateTimeX(){output1.style.display = "无";output2.style.display = "block";var now = moment();var humanReadable =now.tz("America/New_York").format('hh:mm:ssA');output2.textContent = humanReadable;setInterval(updateTimeX, 1000);}更新时间X();});

解决方案

也许这会有所帮助.我相信你已经把这件事复杂化了一点.我在代码中提供了注释供您查看.

注意:我没有使用 moment.js 因为它对你的任务来说是不必要的.

您需要:

1. 来自 Date 对象的时间
2. 一个时区参考，将点击后更改
3. 将发布时间的间隔(带有不断变化的TZ)
4. 放置输出的地方

//放置输出的地方const output = document.getElementById('output');//开始时区var tz = '美国/纽约';//捕获 UL 上的点击事件(不是 li)document.getElementsByTagName('UL')[0].addEventListener('click', changeTZ);函数 changeTZ(e) {//e.target 是被点击的 LItz = e.target.innerText;//切换高亮选择this.querySelectorAll('li').forEach(el=>el.classList.remove('selected'));e.target.classList.add('selected');}//将输出设置为基于变化的 TZ 的时间//由于这是一个完整的日期时间，使用 split()[1] 删除日期并修剪它setInterval(() => {output.textContent = new Date(Date.now()).toLocaleString('en-US', {timeZone: `${tz}`}).split(',')[1].trim();}, 1000);

.selected {背景颜色:浅蓝色；}

<ul><li class="selected">America/New_York</li><li>美国/芝加哥</li><li>美国/洛杉矶</li><div id="输出"></div>

I'm using a dropdown list that displays different timezones onclick using moment-timezone. For example when you click the dropdown labeled "est" it will display the time in eastern time, when you click "cst" the cst time will display and so on.

Anyways the problem I'm running into is this... I use setInterval(updateTime, 1000); to show the seconds tick up every second, now by doing this when a user clicks on "est" and then another time zone in the dropdown list like "cst" both of those times will appear and disappear every second on top of each other. I want it so when you click on an li element the previous one that was on screen will have the property of display=none. So when u click est for example est time will display and then when u click on cst the est will be display=none and the cst time will display. Man that was a mouthful.

Is there a way to accomplish this and still use the setInterval of 1second?

Here is my code...

<div>
    <li>
        <ul>
        <li id="tmz1">est</li>
        <li id="tmz2">central</li>
        <li>pacific</li>
        </ul>
   </li>

   <div id="output1"></div>
   <div id="output2"></div>
</div>    


$(document).ready(function(){

    var output1 = document.getElementById('output1');
    var output2 = document.getElementById('output2');

    document.getElementById('tmz1').onclick = function updateTime(){

        output2.style.display = "none";
        output1.style.display = "block";

        var now = moment();
        var humanReadable = now.tz("America/Los_Angeles").format('hh:mm:ssA');

        output1.textContent = humanReadable;
        setInterval(updateTime, 1000);

    }

    updateTime();

});


$(document).ready(function(){

    var output2 = document.getElementById('output2');
    var output1 = document.getElementById('output1');

    document.getElementById('tmz2').onclick = function updateTimeX(){

        output1.style.display = "none";
        output2.style.display = "block";

        var now = moment();
        var humanReadable = 
        now.tz("America/New_York").format('hh:mm:ssA');

        output2.textContent = humanReadable;
        setInterval(updateTimeX, 1000);

    }

    updateTimeX();

});

解决方案

Perhaps this will help. I believe you've overcomplicated this just a bit. I've provided comments in the code for you to review.

Note: I did not use moment.js as it is unecessary for your task.

You need:

1. a time from a Date object
2. a timezone reference that will change upon click
3. an interval that will publish the time (with the changing TZ)
4. Someplace to put the output

// place to put the output
const output = document.getElementById('output');
// starting timezone
var tz = 'America/New_York';
// Capture click event on the UL (not the li)
document.getElementsByTagName('UL')[0].addEventListener('click', changeTZ);

function changeTZ(e) {
  // e.target is the LI that was clicked upon
  tz = e.target.innerText;
  // toggle highlighted selection 
  this.querySelectorAll('li').forEach(el=>el.classList.remove('selected'));
  e.target.classList.add('selected');
}

// set the output to the time based upon the changing TZ
// Since this is an entire datetime, remove the date with split()[1] and trim it
setInterval(() => {
  output.textContent = new Date(Date.now()).toLocaleString('en-US', {timeZone: `${tz}`}).split(',')[1].trim();
}, 1000);

.selected {
  background-color: lightblue;
}

<div>
  <ul>
    <li class="selected">America/New_York</li>
    <li>America/Chicago</li>
    <li>America/Los_Angeles</li>
  </ul>

  <div id="output"></div>
</div>

这篇关于如何使用“setInterval()"每秒更新一次时间；没有时间每秒闪烁进出?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！