h5教程H5制作一个计时器的代码演示

前言

计时器是一个常见的功能，可以用来记录时间的流逝或者倒计时。在H5中，我们可以通过使用JavaScript来实现一个计时器。本教程将向您展示如何使用HTML、CSS和JavaScript来创建一个简单的计时器。

HTML结构

首先，我们需要在HTML中创建一个基本的结构，用于容纳计时器的各个部分。我们可以使用<div>元素来创建一个包含标题、时间显示和按钮的容器。以下是HTML代码：

<h4>计时器</h4>
<div id="timer-container">
  <p id="time-display">00:00:00</p>
  <button id="start-btn">开始</button>
  <button id="stop-btn">停止</button>
  <button id="reset-btn">重置</button>
</div>

样式

接下来，我们可以使用CSS来为计时器添加样式。以下是我们可以使用的一些基本样式示例：

#timer-container {
  text-align: center;
  margin-top: 10px;
}

#time-display {
  font-size: 24px;
}

button {
  margin: 5px;
  padding: 10px 20px;
  font-size: 16px;
}

JavaScript代码

最后，我们需要编写一些JavaScript代码来控制计时器的行为。以下是代码的基本结构：

// 获取计时器的相关元素
const timerDisplay = document.getElementById('time-display');
const startBtn = document.getElementById('start-btn');
const stopBtn = document.getElementById('stop-btn');
const resetBtn = document.getElementById('reset-btn');

// 定义计时器变量和初始值
let timer;
let seconds = 0;
let minutes = 0;
let hours = 0;

// 更新时间显示的函数
function updateTimeDisplay() {
  timerDisplay.innerHTML = `${hours < 10 ? '0' + hours : hours}:${minutes < 10 ? '0' + minutes : minutes}:${seconds < 10 ? '0' + seconds : seconds}`;
}

// “开始”按钮的点击事件
startBtn.addEventListener('click', function() {
  if (!timer) {
    timer = setInterval(function() {
      seconds++;
      if (seconds >= 60) {
        seconds = 0;
        minutes++;
        if (minutes >= 60) {
          minutes = 0;
          hours++;
        }
      }
      updateTimeDisplay();
    }, 1000);
  }
});

// “停止”按钮的点击事件
stopBtn.addEventListener('click', function() {
  clearInterval(timer);
  timer = null;
});

// “重置”按钮的点击事件
resetBtn.addEventListener('click', function() {
  clearInterval(timer);
  timer = null;
  seconds = 0;
  minutes = 0;
  hours = 0;
  updateTimeDisplay();
});

// 页面加载完成时初始化时间显示
updateTimeDisplay();

总结

本教程展示了如何使用HTML、CSS和JavaScript创建一个简单的计时器。通过将HTML标记与样式和JavaScript代码结合起来，我们可以创建一个功能完善且具有良好用户体验的计时器。