如何在计时器中添加保存按钮

Question

我不知道如何保存并显示在秒表旁边：

00:01:30 , 00:01:30 像这样。它不重要，但我可以让秒表在某个时间停止，比如 45 分钟

我创建了一个按钮 "save" 正在播放代码但我不知道如何保存输出并显示

我试图在互联网上找到但找不到感谢您的帮助。

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>

Answer 1

如果我理解正确 - 这是解决方案。您仍然需要对输入字段进行一些验证，检查当前计时器和 ithers，但如果用户自己考虑了所有这些细微差别，它就是有效的版本。

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>

stopwatch.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);
  }
});

如何在计时器中添加保存按钮

how to add a save button in timer

html

javascript

stopwatch

save

output