如何用按钮切换AM/PM和MilitaryTime

如果我的帖子格式不好，请原谅。我到处找了找，似乎找不到解决这个问题的办法。我正在构建一个时钟应用程序，我有两个按钮，一个切换12小时时间，另一个切换24小时时间。24小时切换很好，但我无法切换回12小时。

let isMilitaryTime = false;
let militaryTime = document.getElementById('button24');
militaryTime.addEventListener('click', function () {
isMilitaryTime = true;
});
let civilTime = document.getElementById('button12');
civilTime.addEventListener('click', function () {
ismilitaryTime = false;
});
function normalTime() {
let date = new Date();
let hour = date.getHours();
let min = date.getMinutes();
let sec = date.getSeconds();
let amPm = hour >= 12 ? 'PM' : 'AM';
if (isMilitaryTime === true) {
setInterval(normalTime, 1000);
document.getElementById('clock').innerHTML = hour + ':' + min + ':' + sec;
} else {
amPm = hour >= 12 ? 'PM' : 'AM';
hour = hour % 12 || 12;
setInterval(normalTime, 1000);
document.getElementById('clock').innerHTML = hour + ':' + min + ':' + sec + ' ' + amPm;
}
min = min < 10 ? '0' + min : min;
sec = sec < 10 ? '0' + sec : sec;
}

civilTime eventLister中的isMilitaryTime变量拼写错误。最好使用一次interval，否则它调用的是setinterval的指数量。请试试这个。

'''
var isMilitaryTime = false;

let militaryTime = document.getElementById('button24');
militaryTime.addEventListener('click', function() { isMilitaryTime = true });

let civilTime = document.getElementById('button12');
civilTime.addEventListener('click', function() { isMilitaryTime = false });

function normalTime() {
let date = new Date();
let hour = date.getHours();
let min = date.getMinutes();
let sec = date.getSeconds();
let amPm = hour >=12 ? 'PM' : 'AM';
min = min < 10 ? '0' + min : min;
sec = sec < 10 ? '0' + sec : sec;

if(isMilitaryTime === true) {
document.getElementById("clock").innerHTML = hour + ':' + min + ':' + sec;
} else  {         
amPm = hour >= 12 ? 'PM' : 'AM'
hour = hour % 12 || 12;

document.getElementById("clock").innerHTML = hour + ':' + min + ':' + sec + ' ' + amPm; 
}
}
setInterval(normalTime, 1000);

与其使用setInterval，不如像一样从eventLister本身调用nomalTime函数

let militaryTime = document.getElementById('button24');
militaryTime.addEventListener('click', function() { isMilitaryTime = true; 
normalTime(); });

每次单击按钮时都必须调用normalTime方法：

let isMilitaryTime = false;
let militaryTime = document.getElementById('button24');
militaryTime.addEventListener('click', function () {
isMilitaryTime = true;
normalTime();
});
let civilTime = document.getElementById('button12');
civilTime.addEventListener('click', function () {
ismilitaryTime = false;
normalTime();
});

相关内容

最新更新

热门标签：