第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

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

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

UYOU 2021-06-04 18:33:44
我正在使用一個下拉列表，該列表使用moment-timezone 顯示不同的時區(qū)onclick。例如，當您單擊標有“est”的下拉菜單時，它將顯示東部時間，當您單擊“cst”時，將顯示 cst 時間，依此類推。無論如何，我遇到的問題是這個......我setInterval(updateTime, 1000);過去常常顯示秒數(shù)每秒增加一次，現(xiàn)在通過當用戶點擊“est”然后下拉列表中的另一個時區(qū)（如“cst”）時執(zhí)行此操作那些時間會每秒出現(xiàn)和消失在彼此之上。我想要它，所以當您單擊一個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條經(jīng)驗 獲得超4個贊

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

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

你需要：

  1. 來自 Date 對象的時間

  2. 單擊時將更改的時區(qū)參考

  3. 將發(fā)布時間的間隔（隨著 TZ 的變化）

  4. 放置輸出的地方

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


查看完整回答
反對 回復 2021-06-11
?
慕雪6442864

TA貢獻1812條經(jīng)驗 獲得超5個贊

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


var interval = setInterval(updateTime, 1000);

if(oldValue !== newValue){

  clearInterval(interval)

}


查看完整回答
反對 回復 2021-06-11
  • 2 回答
  • 0 關注
  • 448 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號