создание простого секундомера HTML - PullRequest
Новая
       10

создание простого секундомера HTML

1 голос
/ 19 июня 2019

Я работаю над этим секундомером уже 5-6 часов.Он предназначен для простого секундомера HTML.Я просто не понимаю проблемы / концепции.Я надеялся на небольшую помощь, поскольку все страницы W3Schools, на которые я смотрел, наряду с другими проблемами переполнения стека, не помогли мне приблизиться туда, где я должен быть.Я пытаюсь создать 3 кнопки onclick в html для запуска, остановки и сброса (даже не попал в раздел сброса).«Часы» должны начинаться с 0, а когда они остановлены, их следует приостанавливать на номере и запускать снова только с начала onclick.Кнопка сброса сбрасывается до 0.

Я пытался работать с getElementById и innerHTML.Я получил кнопку для работы, но она добавляла «результат» к себе 1,2,4,8 и т. Д. Я уверен, что это довольно простое исправление, но я пробовал разные варианты часами. 

<!DOCTYPE html>
<html lang = "en">
    <head>
        <title>Stopwatch</title>
    </head>
    <body>
        <div>Seconds: <span id="time"></span></div>
        <input type="button" id="startTimer" value="Start Timer" onclick="start();"><br/>
        <input type="button" id="stopTimer" value="Stop Timer"  onclick="stop();"><br/>
        <input type="button" id="resetTimer" value="Reset Timer"  onclick="reset();"><br/>
        <script src= "timer.js"></script>
    </body>
</html>
var timeElapsed = 0;
var myTimer = 0;

function start() {
    myTimer = setInterval(function(){
        timeElapsed += 1;
         document.getElementById("time").innerText = timeElapsed;
    }, 1000) ;

}
function stop() {
    clearInterval(myTimer);
}
function reset() {
   timeElapsed = 0;
   clearInterval(myTimer);
   document.getElementById("time").innerHTML = timeElapsed;
}

Ответы [ 2 ]

2 голосов
/ 19 июня 2019

Вы не должны увеличивать myTimer, потому что он хранит значение интервала, который вам необходимо остановить позже с помощью clearInterval(myTimer).Вместо этого у вас должна быть переменная типа timeElapsed, о которой @Programnik упоминает в своем комментарии.

Также имейте в виду, что любой javascript, отсутствующий в функции в вашем файле timer.js, будет запущен, как только он будет загружен.Это означает, что setInterval(start, 1000) будет работать сразу же.Вместо этого вы должны иметь setInterval в вызове, чтобы начать.Обратите внимание, что это будет делать новый setInterval каждый раз, когда вызывается start.Я бы порекомендовал создать метод с именем tick или что-то подобное, чтобы ваш код работал примерно так: 

var timeElapsed = 0;
var myTimer;

function tick(){
    timeElapsed++;
    document.getElementById("time").innerHTML = timeElapsed;
}
function start(){
    //call the first setInterval
    myTimer = setInterval(tick, 1000);
}
function stop(){
    clearInterval(myTimer);
}
function reset(){
    //some combination of tick and stop
}

Вы можете заметить, что можно спамить кнопку запуска и заставить таймер работать очень быстро.Это можно решить, если вы инициализируете myTimer чем-то вроде -1, а затем проверяете if(myTimer == -1) при попытке запуска.Вам также придется сбросить myTimer на -1 в вашем методе остановки, чтобы таймер можно было возобновить.Вы также можете сделать то же самое в методе stop.

Чтобы при запуске показывать таймер 0, вы можете просто сделать это: <span id="time">0</span>

Надеюсь, это полезно, этомой первый ответ о переполнении стека за долгое время

Редактировать: Вот код, который я написал, отвечая на ваш вопрос:

<!DOCTYPE html>
<html lang = "en">
    <head>
        <title>Stopwatch</title>
    </head>
    <body>
        <div>Seconds: <span id="time">0</span></div>
        <input type="button" id="startTimer" value="Start Timer" onclick="start();"><br/>
        <input type="button" id="stopTimer" value="Stop Timer"  onclick="stop();"><br/>
        <input type="button" id="resetTimer" value="Reset Timer"  onclick="reset();"><br/>
        <script>
            var timeElapsed = 0;
            var timerID = -1;
            function tick() {
                timeElapsed++
                document.getElementById("time").innerHTML = timeElapsed;
            }

            function start() {
                if(timerID == -1){
                    timerID = setInterval(tick, 1000);
                }
            }

            function stop() {
                if(timerID != -1){
                    clearInterval(timerID)
                    timerID = -1
                }
            }

            function reset() {
                stop();
                timeElapsed = -1;
                tick()
            }
        </script>
    </body>
</html>
1 голос
/ 19 июня 2019

Используйте другую переменную для регистрации прошедшего времени: 

var timeElapsed = 0;
var myTimer = 0;

function start() {
    myTimer = setInterval(function(){
        timeElapsed += 1;
         document.getElementById("time").innerText = timeElapsed;
    }, 1000) ;

}
function stop() {
    clearInterval(myTimer);
}
function reset() {
   timeElapsed = 0;
   clearInterval(myTimer);
   myTimer = setInterval(start, 1000);
}
...