首頁猿問如何使用“setInt...

如何使用“setInterval()”每秒更新一次時間而不會每秒閃爍一次？

JavaScript

UYOU 2021-06-04 18:33:44

我正在使用一個下拉列表，該列表使用moment-timezone 顯示不同的時區onclick。例如，當您單擊標有“est”的下拉菜單時，它將顯示東部時間，當您單擊“cst”時，將顯示 cst 時間，依此類推。無論如何，我遇到的問題是這個......我setInterval(updateTime, 1000);過去常常顯示秒數每秒增加一次，現在通過當用戶點擊“est”然后下拉列表中的另一個時區（如“cst”）時執行此操作那些時間會每秒出現和消失在彼此之上。我想要它，所以當您單擊一個li元素時，屏幕上的前一個元素將具有 display=none 的屬性。因此，當您單擊 est 時，例如將顯示 est 時間，然后當您單擊display=nonecst 時，將顯示est并且將顯示 cst 時間。滿嘴的男人。有沒有辦法做到這一點并仍然使用setInterval1 秒？這是我的代碼...<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();});

查看完整描述

2 回答

GCT1015

TA貢獻1827條經驗獲得超4個贊

也許這會有所幫助。我相信你已經把這件事復雜化了一點。我在代碼中提供了注釋供您查看。

注意：我沒有使用，moment.js因為它對你的任務來說是不必要的。

你需要：

來自 Date 對象的時間
單擊時將更改的時區參考
將發布時間的間隔（隨著 TZ 的變化）
放置輸出的地方

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

反對回復 2021-06-11

慕雪6442864

TA貢獻1812條經驗獲得超5個贊

將您的 setInterval 分配給一個變量并在用戶選擇新值表單下拉列表時清除它并使用新值重新開始間隔

var interval = setInterval(updateTime, 1000);

if(oldValue !== newValue){

clearInterval(interval)

}

反對回復 2021-06-11

2 回答
0 關注
447 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何使用“setInterval()”每秒更新一次時間而不會每秒閃爍一次？

如何使用“setInterval()”每秒更新一次時間而不會每秒閃爍一次？

2 回答

添加回答

如何使用“setInterval()”每秒更新一次時間而不會每秒閃爍一次？