我正在使用一个下拉列表,该列表使用时刻时区显示不同的时区。例如,当您单击标有“est”的下拉列表时,它将显示东部时间的时间,当您单击“cst”时,将显示 cst 时间,依此类推。
无论如何,我遇到的问题是......我使用setInterval(updateTime, 1000);
要显示每秒的秒数,现在通过执行此操作,当用户单击“est”,然后单击下拉列表中的另一个时区(如“cst”)时,这两个时间将每秒出现并消失。我想要它,所以当你点击li
屏幕上的前一个元素将具有 display=none 属性。例如,当您单击 est 时,将显示 est 时间,然后当您单击 cst 时,将显示 estdisplay=none
并且将显示 cst 时间。男人真是拗口。
有没有办法实现这一点并仍然使用setInterval
1秒?
这是我的代码...
<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();
});
也许这会有所帮助。我相信你把这个问题想得太复杂了一点。我在代码中提供了注释供您查看。
注:我没用过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 id="output"></div>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)