Блог

Я пытался работать с этими кодами, но мне кажется, что я все понял неправильно. Я новичок в JS и попробовал проект секундомера, но, должно быть, я ошибся с логикой или что-то в этом роде.

Пожалуйста, найдите код ниже;

 let time;
const timer = document.getElementById('#timer');
let timeCount = 0;
let timeInterval;
const buttons = document.querySelectorAll('.button');

// function print(txt) {
//     document.getElementById("timer").innerHTML = txt;
//   }

//creating minutes and seconds format
function timeToString(counter){
    let hours = counter/3600000;
    let hr = Math.floor(hours);
    let minutes = (hours - hr) * 60;
    let min = Math.floor(minutes); 

    let seconds = (minutes - min) * 60;
    let sec = Math.floor(seconds); 
}

buttons.forEach(function(button){
 console.log(button);
    button.addEventListener('click', function(event){
        const target = event.currentTarget.classList;
        if(target.contains('start')){
            // function start(){
                time = Date.now() - timeCount;
                timeInterval = setInterval(function returnTime(){
                    timeCount = Date.now() - time;
                    console.log(timeToString(timeCount));
                },1000);          
            // }
    
        }else if(target.contains('stop')){
            clearInterval(timeInterval);
    
        }else {
            clearInterval(timeInterval);
            return ('00:00');
            timeCount = 0;
            }
        
    });
    

});
 

Поскольку точный вопрос здесь был неясен, я решил просто исправить все это. Я включу код, но сначала я хочу объяснить, что я сделал, а не просто кормить ложкой.

• Во-первых, селектор для ваших кнопок был неправильным, он выбирал классы вместо фактического тега, поэтому я просто удалил ‘.’.
• Ваша функция timeToString (time) ничего не вернула, я добавил return hr "h " min "m " sec "s";
• Я изменил time timeStarted , чтобы устранить путаницу. Теперь, когда нажата кнопка «Пуск», она устанавливает текущее время в эту переменную, а затем просто вычитает его из текущего времени при каждом обновлении.
• Наконец, я добавил немного кода, чтобы фактически обновить время на экране: document.getElementById("timer").innerHTML = timeToString(Date.now() - timeStarted);

 let timeStarted;
let timeInterval;
const timer = document.getElementById('#timer');
const buttons = document.querySelectorAll('button');

function timeToString(counter){
    let hours = counter/3600000;
    let hr = Math.floor(hours);
    let minutes = (hours - hr) * 60;
    let min = Math.floor(minutes); 

    let seconds = (minutes - min) * 60;
    let sec = Math.floor(seconds); 
    
    return hr   "h "   min   "m "   sec   "s";
}

buttons.forEach(function(button){
    button.addEventListener('click', function(event){
        const target = event.currentTarget.classList;
        if(target.contains('start')){
            timeStarted = Date.now();
            timeInterval = setInterval(function(){
                document.getElementById("timer").innerHTML = timeToString(Date.now() - timeStarted);
            }, 1000);
        } else if(target.contains('stop')){
            clearInterval(timeInterval);
        }
    });
    

}); 

 <div id="timer"></div>

<button class="start">start</button>
<button class="stop">stop</button> 

`