有谁知道，为什么这个 JavaScript 程序 (DIGITAL TIMER) 在我点击它启动计时器时不起作用？

Question

有谁知道，为什么这个 JavaScript 程序（数字定时器）在我点击它启动定时器时不工作？

这是 HTML 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="timer-container">
        <h1 id="timer-display">00:00:00</h1>
    </div> 
    <script src="script.js"></script>
</body>
</html>

这是 CSS 代码：

body{
    font-family: "Software Tester 7";
    background-color: black;
}

.timer-container{
    background-color: yellow-green;
    border: 5px solid gray;
    border-radius: 2px;
    margin-top: 19%;
}

h1{
    color: white;
    text-align: center;
    font-size: 120px;
    margin: 0;
}

这是 JavaScript 代码：

var timeBegan = null; // did the clock start?
var timeStopped = null; // at what time was the timer stopped?
var stoppedDuration = 0; // how long was the timer stopped?
var startInterval = null; // this is needed to stop the startInterval() method
var flag = false; // to control the start/stop of the timer

const timerContainer = document.getElementsByClassName("timer-container")[0];

timerContainer.addEventListener("click", function()
{
    if(!flag)
    {
        startTimer();
        flag = true;
    }
    else
    {
        stopTimer();
        flag = false;
    }
})
function startTimer()
{
    if(timeBegan === null)
        timeBegan = new Date();

    if(timeStopped !== null)
        stoppedDuration += (new Date() - timeStopped);

    startInterval = setInterval(clockRunning, 10);
}

function stopTimer()
{
    timeStopped = new Date();
    clearInterval(startInterval);
}
function clockRunning()
{   
var currentTime = new Date
var timeElapsed = new Date(currentTime - timeBegan - stoppedDuration);

var minutes = timeElapsed.getUTCMinutes();
var seconds = timeElapsed.getUTCSeconds();
var milliseconds = timeElapsed.getUTCMilliseconds();

milliseconds = Math.floor(milliseconds/10);

document.getElementById("timer.display").innerHTML = 
(minutes = minutes < 10 ? '0' + minutes:minutes) + ":" +
(seconds = seconds < 10 ? '0' + seconds:seconds) + ":" +
(milliseconds = milliseconds < 10 ? '0' + milliseconds:milliseconds);
}

我希望有人能真正帮助我解决我的问题。

来自这个 YouTube 教程：“https://www.youtube.com/watch?v=_bvutuhUxHY&ab_channel=codefoxx”。

非常感谢您的及时答复:)

Answer 1

这是一个很小的错误

您的时钟 ID 是 timer-display 但在 clockRunning 函数中您将其用作 timer.display

其他一切都很好点击定时器开始运行，再次点击停止定时器，

注意：如果你想默认启动定时器，那么在body onload时调用startTimer函数

var timeBegan = null; // did the clock start?
var timeStopped = null; // at what time was the timer stopped?
var stoppedDuration = 0; // how long was the timer stopped?
var startInterval = null; // this is needed to stop the startInterval() method
var flag = false; // to control the start/stop of the timer

const timerContainer = document.getElementsByClassName("timer-container")[0];

timerContainer.addEventListener("click", function()
{
    if(!flag)
    {
        startTimer();
        flag = true;
    }
    else
    {
        stopTimer();
        flag = false;
    }
})
function startTimer()
{
    if(timeBegan === null)
        timeBegan = new Date();

    if(timeStopped !== null)
        stoppedDuration += (new Date() - timeStopped);

    startInterval = setInterval(clockRunning, 10);
}

function stopTimer()
{
    timeStopped = new Date();
    clearInterval(startInterval);
}
function clockRunning()
{   
var currentTime = new Date
var timeElapsed = new Date(currentTime - timeBegan - stoppedDuration);

var minutes = timeElapsed.getUTCMinutes();
var seconds = timeElapsed.getUTCSeconds();
var milliseconds = timeElapsed.getUTCMilliseconds();

milliseconds = Math.floor(milliseconds/10);

document.getElementById("timer-display").innerHTML = 
(minutes = minutes < 10 ? '0' + minutes:minutes) + ":" +
(seconds = seconds < 10 ? '0' + seconds:seconds) + ":" +
(milliseconds = milliseconds < 10 ? '0' + milliseconds:milliseconds);
}

body{
    font-family: "Software Tester 7";
    background-color: black;
}

.timer-container{
    background-color: yellow-green;
    border: 5px solid gray;
    border-radius: 2px;
    margin-top: 19%;
}

h1{
    color: white;
    text-align: center;
    font-size: 120px;
    margin: 0;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="timer-container">
        <h1 id="timer-display">00:00:00</h1>
    </div> 
    
</body>
</html>

有谁知道，为什么这个 JavaScript 程序 (DIGITAL TIMER) 在我点击它启动计时器时不起作用？

Do anybody know, why this JavaScript program (DIGITAL TIMER) is not working, when I click it to start the timer?

javascript

html

css

timer

clock