Блог

Простите меня, если мой пост плохо отформатирован. Я искал вокруг и, похоже, не могу найти решение для этого. Я создаю приложение для часов, и у меня есть две кнопки, одна для переключения 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;
}
  

Переменная isMilitaryTime в списке событий civilTime была неправильно прописана. И лучше использовать интервал один раз, иначе он вызывал экспоненциальное количество 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 на самом деле лучше вызвать функцию nomalTime из самого eventLister, например

 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();
});