как добавить кнопку сохранения в таймере - PullRequest
Новая
       59

как добавить кнопку сохранения в таймере

0 голосов
/ 20 марта 2020

Я понятия не имею, как сохранить и показать рядом с секундомером:

00: 01: 30, 00:01:30 что-то вроде этого. это не важно, но могу ли я сделать секундомер для остановки на какое-то время, например, 45 минут

Я создал кнопку «Сохранить», которая воспроизводила код, но я понятия не имею, как заставить его сохранить вывод и показать

Я пытался найти в inte rnet, но не смог найти, я ценю любую помощь. 

var ss = document.getElementsByClassName('stopwatch');

[].forEach.call(ss, function(s) {
  var currentTimer = 0,
    interval = 0,
    lastUpdateTime = new Date().getTime(),
    start = s.querySelector('button.start'),
    stop = s.querySelector('button.stop'),
    reset = s.querySelector('button.reset'),
    mins = s.querySelector('span.minutes'),
    secs = s.querySelector('span.seconds'),
    cents = s.querySelector('span.centiseconds');

  start.addEventListener('click', startTimer);
  stop.addEventListener('click', stopTimer);
  reset.addEventListener('click', resetTimer);

  function pad(n) {
    return ('00' + n).substr(-2);
  }

  function update() {
    var now = new Date().getTime(),
      dt = now - lastUpdateTime;

    currentTimer += dt;

    var time = new Date(currentTimer);

    mins.innerHTML = pad(time.getMinutes());
    secs.innerHTML = pad(time.getSeconds());
    cents.innerHTML = pad(Math.floor(time.getMilliseconds() / 10));

    lastUpdateTime = now;
  }

  function startTimer() {
    if (!interval) {
      lastUpdateTime = new Date().getTime();
      interval = setInterval(update, 1);
    }
  }

  function stopTimer() {
    clearInterval(interval);
    interval = 0;
  }

  function resetTimer() {
    stopTimer();

    currentTimer = 0;

    mins.innerHTML = secs.innerHTML = cents.innerHTML = pad(0);
  }



});
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Stopwatch</title>
    </head>
    <body>
        <h1>Stopwatch</h1>
        <div class="stopwatch">
            <div class="controls">
                <button class="start">Start</button>
                <button class="stop">Stop</button>
                <button class="reset">Reset</button>
                <button class="save">save</button>
            </div>
            <div class="display">
                <span class="minutes">00</span>:<span class="seconds">00</span>:<span class="centiseconds">00</span>
            </div>
            </div>
        <script src="stopwatch.js"></script>
    </body>
</html>

1 Ответ

0 голосов

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

index. html

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Stopwatch</title>
</head>
<body>
<h1>Stopwatch</h1>
<div class="stopwatch">
    <div class="controls">
        <button class="start">Start</button>
        <button class="stop">Stop</button>
        <button class="reset">Reset</button>
        ||stop on:
        <input class="min" placeholder="min" type="text" style="width: 30px" />:
        <input class="sec" placeholder="sec" type="text" style="width: 30px" />:
        <input class="ms" placeholder="ms" type="text" style="width: 30px" />
        <button class="save">save</button>
        <div class="savedTimeBlock" style="display: none">
            saved time:
            <div style="display: inline-block" class="time"></div>
        </div>
    </div>
    <div class="display">
        <span class="minutes">00</span>:<span class="seconds">00</span>:<span
            class="centiseconds"
    >00</span
    >
    </div>
</div>
<script src="stopwatch.js"></script>
</body>
</html>

секундомер. js

var ss = document.getElementsByClassName("stopwatch");

[].forEach.call(ss, function(s) {
  var currentTimer = 0,
    interval = 0,
    lastUpdateTime = new Date().getTime(),
    timeToStop = {
      min:null,
      sec:null,
      ms:null
    },
    start = s.querySelector("button.start"),
    stop = s.querySelector("button.stop"),
    reset = s.querySelector("button.reset"),
    mins = s.querySelector("span.minutes"),
    secs = s.querySelector("span.seconds"),
    cents = s.querySelector("span.centiseconds"),
    minutes = s.querySelector(".min"),
    seconds = s.querySelector(".sec"),
    milliseconds = s.querySelector(".ms"),
    savedTimeBlock = s.querySelector(".savedTimeBlock"),
    time = s.querySelector(".time"),
    save = s.querySelector(".save");

    start.addEventListener("click", startTimer);
    stop.addEventListener("click", stopTimer);
    save.addEventListener("click", saveStopTime);
    reset.addEventListener("click", resetTimer);

  function pad(n) {
    return ("00" + n).substr(-2);
  }

  function saveStopTime() {
    let min = timeToStop.min = pad(+minutes.value),
      sec = timeToStop.sec = pad(+seconds.value),
      ms = timeToStop.ms = pad(+milliseconds.value);

    if (+min || +sec || +ms) {
      showSavedTimeBlock(min, sec, ms)
    } else {
      killSavedTimeBlock()
    }
  }

  const showSavedTimeBlock = (min, sec, ms) => {
    savedTimeBlock.style.display = 'inline-block';

    time.innerText = `${min}:${sec}:${ms}:`
  };

  const killSavedTimeBlock = () => {
    savedTimeBlock.style.display = 'none';
    timeToStop.min = null;
    timeToStop.sec = null;
    timeToStop.ms = null;

    time.innerText = ''
  };

  function update() {
    var now = new Date().getTime(),
      dt = now - lastUpdateTime;

    currentTimer += dt;

    var time = new Date(currentTimer);

    let min = pad(time.getMinutes());
    let sec = pad(time.getSeconds());
    let ms = pad(Math.floor(time.getMilliseconds() / 10));
    mins.innerHTML = min;
    secs.innerHTML = sec;
    cents.innerHTML = ms;

    let ts = timeToStop;
    if (ts.min === min && ts.sec === sec && ts.ms === ms) {
      stopTimer()
    } else {
      lastUpdateTime = now;
    }
  }

  function startTimer() {
    if (!interval) {
      lastUpdateTime = new Date().getTime();
      interval = setInterval(update, 1);
    }
  }

  function stopTimer() {
    clearInterval(interval);
    interval = 0;
  }

  function resetTimer() {
    stopTimer();
    killSavedTimeBlock()
    currentTimer = 0;

    mins.innerHTML = secs.innerHTML = cents.innerHTML = pad(0);
  }
});
...