时间戳

首页 > 解决方案 > 如何在 JS 中将秒表转换为倒数计时器

javascript - 如何在 JS 中将秒表转换为倒数计时器

问题描述

是否可以修改秒表的代码，使其用作从 00:13:00 开始并在 00:00:00 停止的倒计时计时器。启动和重置按钮应该像以前一样工作。

//Define vars to hold time values
let seconds = 0;
let minutes = 0;
let hours = 0;

//Define vars to hold "display" value
let displaySeconds = 0;
let displayMinutes = 0;
let displayHours = 0;

//Define var to hold setInterval() function
let interval = null;

//Define var to hold stopwatch status
let status = "stopped";

//Stopwatch function (logic to determine when to increment next value, etc.)
function stopWatch(){

    seconds++;

    //Logic to determine when to increment next value
    if(seconds / 60 === 1){
        seconds = 0;
        minutes++;

        if(minutes / 60 === 1){
            minutes = 0;
            hours++;
        }

    }

    //If seconds/minutes/hours are only one digit, add a leading 0 to the value
    if(seconds < 10){
        displaySeconds = "0" + seconds.toString();
    }
    else{
        displaySeconds = seconds;
    }

    if(minutes < 10){
        displayMinutes = "0" + minutes.toString();
    }
    else{
        displayMinutes = minutes;
    }

    if(hours < 10){
        displayHours = "0" + hours.toString();
    }
    else{
        displayHours = hours;
    }

    //Display updated time values to user
    document.getElementById("display").innerHTML = displayHours + ":" + displayMinutes + ":" + displaySeconds;

}



function startStop(){

    if(status === "stopped"){

        //Start the stopwatch (by calling the setInterval() function)
        interval = window.setInterval(stopWatch, 1000);
        document.getElementById("startStop").innerHTML = "Stop";
        status = "started";

    }
    else{

        window.clearInterval(interval);
        document.getElementById("startStop").innerHTML = "Start";
        status = "stopped";

    }

}

//Function to reset the stopwatch
function reset(){

    window.clearInterval(interval);
    seconds = 0;
    minutes = 0;
    hours = 0;
    document.getElementById("display").innerHTML = "00:00:00";
    document.getElementById("startStop").innerHTML = "Start";

}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Stopwatch</title>
    <link href="https://fonts.googleapis.com/css2?family=Concert+One&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">


    <script type="text/javascript" src="scripts.js"></script>
    

</head>
<body>

    <div class="container">

        <div id="display">
            00:13:00
        </div>

        <div class="buttons">
            <button id="startStop" onclick="startStop()">Start</button> <button id="reset" onclick="reset()">Reset</button>
        </div>

    </div>
</body>
</html>

我尝试设置初始时间 00:13:00 并使用--运算符而不是++运算符。但它只是显示负时间。

（不包括 CSS，因为它会保持不变）

标签： javascripthtml

解决方案

以下if语句//Logic to determine when to increment next value需要更改为seconds < 0和minutes < 0

//Define vars to hold time values
let seconds = 0;
let minutes = 1;
let hours = 0;

//Define vars to hold "display" value
let displaySeconds = 0;
let displayMinutes = 0;
let displayHours = 0;

//Define var to hold setInterval() function
let interval = null;

//Define var to hold stopwatch status
let status = "stopped";

//Stopwatch function (logic to determine when to increment next value, etc.)
function stopWatch() {

  seconds--;

  //Logic to determine when to increment next value
  if (seconds < 0) {
    if (minutes === 0 && hours === 0) {
      clearInterval(interval);
      alert("done!");
      return;
    } else {
      seconds = 59;
      minutes--;

      if (minutes < 0) {
        minutes = 59;
        hours--;
      }
    }

  }

  //If seconds/minutes/hours are only one digit, add a leading 0 to the value
  if (seconds < 10) {
    displaySeconds = "0" + seconds.toString();
  } else {
    displaySeconds = seconds;
  }

  if (minutes < 10) {
    displayMinutes = "0" + minutes.toString();
  } else {
    displayMinutes = minutes;
  }

  if (hours < 10) {
    displayHours = "0" + hours.toString();
  } else {
    displayHours = hours;
  }

  //Display updated time values to user
  document.getElementById("display").innerHTML = displayHours + ":" + displayMinutes + ":" + displaySeconds;

}



function startStop() {

  if (status === "stopped") {

    //Start the stopwatch (by calling the setInterval() function)
    interval = window.setInterval(stopWatch, 1000);
    document.getElementById("startStop").innerHTML = "Stop";
    status = "started";

  } else {

    window.clearInterval(interval);
    document.getElementById("startStop").innerHTML = "Start";
    status = "stopped";

  }

}

//Function to reset the stopwatch
function reset() {

  window.clearInterval(interval);
  seconds = 0;
  minutes = 13;
  hours = 0;
  document.getElementById("display").innerHTML = "00:00:00";
  document.getElementById("startStop").innerHTML = "Start";

}
<div class="container">

  <div id="display">
    00:01:00
  </div>

  <div class="buttons">
    <button id="startStop" onclick="startStop()">Start</button> <button id="reset" onclick="reset()">Reset</button>
  </div>

</div>

推荐阅读