，为啥这个 JavaScript 程序（DIGITAL TIMER）不工作，当我点击它来启动计时器时？

Posted 2023-03-17

技术标签:

【中文标题】，为啥这个 JavaScript 程序（DIGITAL TIMER）不工作，当我点击它来启动计时器时？【英文标题】：Do anybody know, why this JavaScript program (DIGITAL TIMER) is not working, when I click it to start the timer?有谁知道，为什么这个 JavaScript 程序（DIGITAL TIMER）不工作，当我点击它来启动计时器时？ 【发布时间】：2021-12-12 02:15:46 【问题描述】：

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

这是 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”。

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

【问题讨论】：

将const timerContainer 移动到函数体中。您检查您的开发者控制台是否有错误？ 【参考方案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;