[JavaScript] 计时器

最新推荐文章于 2023-04-17 09:54:01 发布

小公鸡卡哇伊呀~

最新推荐文章于 2023-04-17 09:54:01 发布

阅读量309

点赞数

分类专栏： Other

本文链接：https://blog.csdn.net/ftell/article/details/100865940

版权

Other 专栏收录该内容

59 篇文章 2 订阅

订阅专栏

这是MDN教程上的一道练习题，
我的code：

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <title>Simple setInterval clock</title>
    <style>
      p {
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
    <button class="start" id='start'>Start</button>
    <br><br><br>
    <button class="stop" id='stop'>Pause/Stop</button>
    <br><br><br>
    <button class="reset" id='reset'>Reset</button>
    <br><br><br>
    <p class="stopwatch"></p>

    <script>
      let watch;
      let bStartedOnce = false;
      let StartDate;
      let StopDate;
      let totalSeconds;
      let tempSeconds;

      function reset() {
        document.querySelector('.stopwatch').textContent = "00h : 00m : 00s";
        document.getElementById("start").disabled = false;
        bStartedOnce = false;
        document.getElementById("stop").disabled = true;
        document.getElementById("reset").disabled = true;
      }

      reset();

      let myStart = document.querySelector('.start');
      let myStop = document.querySelector('.stop');
      let myReset = document.querySelector('.reset');

      function showStopWatch(start) {
        let date = Date.now();
          totalSeconds = Math.floor((date-start)/1000);
        console.log(bStartedOnce);
        if (bStartedOnce)
          totalSeconds += tempSeconds;
        let hours = Math.floor(totalSeconds/3600);
        let minutes = Math.floor((totalSeconds-hours*3600)/60);
        let seconds = totalSeconds - minutes*60 - hours*3600;
        
        if (hours < 10)
          hours = "0" + hours;
        if (minutes < 10)
          minutes = "0" + minutes;
        if (seconds < 10)
          seconds = "0" + seconds;  

        document.querySelector('.stopwatch').textContent 
          = hours + "h : " + minutes + "m : " + seconds + "s";
      }

      function startStopWatch() {
        startDate = Date.now();
        watch = setInterval(showStopWatch, 1000, startDate);
        document.getElementById("start").disabled = true;
        document.getElementById("reset").disabled = true;
        document.getElementById("stop").disabled = false;
      }
 
      function stopStopWatch() {
        clearInterval(watch);
        document.getElementById("start").disabled = false;
        document.getElementById("reset").disabled = false;
        tempSeconds = totalSeconds;
        bStartedOnce = true;
        document.getElementById("stop").disabled = true;
      }

      myStart.addEventListener('click', startStopWatch);
      myStop.addEventListener('click', stopStopWatch);
      myReset.addEventListener('click', reset);

    </script>
  </body>
</html>

运行示意图：
在这里插入图片描述
下面是MDN答案：

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <title>setInterval stopwatch</title>
    <style>
      p {
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
    <p class="clock"></p>
    <p><button class="start">Start</button><button class="stop">Stop</button><button class="reset">Reset</button></p>
    <script>
      // Define a counter variable for the number of seconds and set it to zero.
      let secondCount = 0;
      // Define a global to store the interval when it is active.
      let stopWatch;
      // Store a reference to the display paragraph in a variable
      const displayPara = document.querySelector('.clock');

      // Function to calculate the current hours, minutes, and seconds, and display the count
      function displayCount() {
        // Calculate current hours, minutes, and seconds
        let hours = Math.floor(secondCount/3600);
        let minutes = Math.floor((secondCount % 3600)/60);
        let seconds = Math.floor(secondCount % 60)

        // Display a leading zero if the values are less than ten
        let displayHours = (hours < 10) ? '0' + hours : hours;
        let displayMinutes = (minutes < 10) ? '0' + minutes : minutes;
        let displaySeconds = (seconds < 10) ? '0' + seconds : seconds;

        // Write the current stopwatch display time into the display paragraph
        displayPara.textContent = displayHours + ':' + displayMinutes + ':' + displaySeconds;

        // Increment the second counter by one
        secondCount++;
      }

      // Store references to the buttons in constants
      const startBtn = document.querySelector('.start');
      const stopBtn = document.querySelector('.stop');
      const resetBtn = document.querySelector('.reset');

      // When the start button is pressed, start running displayCount() once per second using displayInterval()
      startBtn.addEventListener('click', () => {
        stopWatch = setInterval(displayCount, 1000);
        startBtn.disabled = true;
      });

      // When the stop button is pressed, clear the interval to stop the count.
      stopBtn.addEventListener('click', () => {
        clearInterval(stopWatch);
        startBtn.disabled = false;
      });

      // When the reset button is pressed, set the counter back to zero, then immediately update the display
      resetBtn.addEventListener('click', () => {
        clearInterval(stopWatch);
        startBtn.disabled = false;
        secondCount = 0;
        displayCount();
      });

      // Run displayCount() once as soon as the page loads so the clock is displayed
      displayCount();
    </script>
  </body>
</html>

对应的UI如下：

在这里插入图片描述

Cooperative asynchronous JavaScript: Timeouts and intervals

小公鸡卡哇伊呀~

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
[JavaScript] 计时器

这是MDN教程上的一道练习题，我的code：<!DOCTYPE html><html lang="en-US"> <head> <meta charset="utf-8"> <title>Simple setInterval clock</title> <style> ...
复制链接

扫一扫