具有三个不同间隔的计数定时器

提问者：小点点

具有三个不同间隔的计数定时器

我要创建一个显示不同时间间隔的网站。我编写了代码，但当我在浏览器中打开它时，它不会显示出来。这是密码。我想删除代码的方式相同，它是在我的文本编辑器（Sublime文本3）

<!DOCTYPE html>
<html>
<head>
  <title>timer</title>
  <script type="text/javascript">
    // GRAB TIMER-DISPLAY ELEMENT
let timerDisplay =  document.getElementsByClassName( 'timerDisplay')[0];

// TIMER DATA
const myFootballMatch = {
  'firstHalf' : { 
    'start' : 0,
    'end' : 4.5
  },
  
  'interval' : { 
    'start' : 0,
    'end' : 1.5
  },
  
  'secondHalf' : { 
    'start' : 4.5,
    'end' : 9
  }
};

// THE FUNCTION
const runTimer = (timerObject, timerId = 0) => {

   // EXIT FUNCTION IF THERE ARE NO MORE TIMERS
   if (parseInt(timerId) === Object.keys(timerObject).length) {
     return;
   }

  let timerName = Object.keys(timerObject)[timerId];
  let timerCount = parseFloat(timerObject[timerName]['start']);
  let timerEnd = parseFloat(timerObject[timerName]['end']);
  
  const timer = setInterval(() => {
  
    timerCount = timerCount + 0.01;
    
    if (timerName === 'interval') {
      timerDisplay.textContent = '4.50';
    }
    
    else {
      timerDisplay.textContent = timerCount.toFixed(2);
    }
  
    if (timerCount > (timerEnd - 0.01)) {
  
      clearInterval(timer);
      runTimer(myFootballMatch, timerId + 1);
    }
  }, 10);
}

// RUN THE FUNCTION
runTimer(myFootballMatch);
  </script>
  <style type="text/css">
    .timerDisplay {
  margin: 0;
  font-size: 96px;
  text-align: center;
  font-weight: bold;
}
  </style>
</head>
<body>
<h1 class="timerDisplay"></h1>
</body>
</html>

这是密码。只要我在浏览器（chrome）上打开它，它就会返回一个空页面。请帮帮我。提前致谢

共2个答案

匿名用户

另一方面，您的控制台正在显示错误并告诉您错误所在。打开它。在HTML加载之前，您正在运行JS代码，因此找不到任何内容，它返回，并且在控制台中抛出一个错误。将脚本放置在/code>的末尾。

匿名用户

问题在于，当您分配时，DOM尚未就绪。最简单的解决方案是通过监听事件来等待窗口完成加载。

<!DOCTYPE html>
<html>
<head>
  <title>timer</title>
  <script type="text/javascript">
    window.addEventListener('load', () => {   // <====== Wait for the window to finish loading
        // GRAB TIMER-DISPLAY ELEMENT
        let timerDisplay =  document.getElementsByClassName( 'timerDisplay')[0];
        
        // TIMER DATA
        const myFootballMatch = {
          'firstHalf' : { 
            'start' : 0,
            'end' : 4.5
          },
          
          'interval' : { 
            'start' : 0,
            'end' : 1.5
          },
          
          'secondHalf' : { 
            'start' : 4.5,
            'end' : 9
          }
        };
        
        // THE FUNCTION
        const runTimer = (timerObject, timerId = 0) => {
        
           // EXIT FUNCTION IF THERE ARE NO MORE TIMERS
           if (parseInt(timerId) === Object.keys(timerObject).length) {
             return;
           }
        
          let timerName = Object.keys(timerObject)[timerId];
          let timerCount = parseFloat(timerObject[timerName]['start']);
          let timerEnd = parseFloat(timerObject[timerName]['end']);
          
          const timer = setInterval(() => {
          
            timerCount = timerCount + 0.01;
            
            if (timerName === 'interval') {
              timerDisplay.textContent = '4.50';
            }
            
            else {
              timerDisplay.textContent = timerCount.toFixed(2);
            }
          
            if (timerCount > (timerEnd - 0.01)) {
          
              clearInterval(timer);
              runTimer(myFootballMatch, timerId + 1);
            }
          }, 10);
        }
        
        // RUN THE FUNCTION
        runTimer(myFootballMatch);
    });
  </script>
  <style type="text/css">
    .timerDisplay {
  margin: 0;
  font-size: 96px;
  text-align: center;
  font-weight: bold;
}
  </style>
</head>
<body>
<h1 class="timerDisplay"></h1>
</body>
</html>

具有三个不同间隔的计数定时器

共2个答案

相关问题

热门标签

具有三个不同间隔的计数定时器

共2个答案

相关问题

热门标签

微信关注