使用JavaScript实现网页秒表功能（含开始、暂停、继续、重置功能）

2023年5月27日下午2:22 • JavaScript

下面就为您详细讲解如何使用JavaScript实现网页秒表功能。

一、制作基本网页结构

首先，在HTML文件中添加一个包含开始、暂停、继续、重置按钮和显示计时时间的元素。具体代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>页面标题</title>
  </head>
  <body>
    <div id="timer">00:00:00</div>
    <button id="start">开始</button>
    <button id="pause">暂停</button>
    <button id="continue">继续</button>
    <button id="reset">重置</button>  
  </body>
</html>

二、编写JavaScript代码

接下来，在JavaScript文件中编写计时器相关函数，分别实现开始、暂停、继续、重置功能，具体代码如下：

var timer = null;
var time = 0;

// 开始计时
function startTimer() {
  clearInterval(timer);  // 清除计时器
  timer = setInterval(function() {
    time++;
    var hour = Math.floor(time / 3600);
    var minute = Math.floor(time / 60) % 60;
    var second = time % 60;
    var hourStr = hour < 10 ? "0" + hour : hour;
    var minuteStr = minute < 10 ? "0" + minute : minute;
    var secondStr = second < 10 ? "0" + second : second;
    document.getElementById("timer").innerHTML = hourStr + ":" + minuteStr + ":" + secondStr;
  }, 1000);
}

// 暂停计时
function pauseTimer() {
  clearInterval(timer);
}

// 继续计时
function continueTimer() {
  startTimer();
}

// 重置计时
function resetTimer() {
  time = 0;
  clearInterval(timer);
  document.getElementById("timer").innerHTML = "00:00:00";
}

// 绑定按钮事件
document.getElementById("start").addEventListener("click", startTimer);
document.getElementById("pause").addEventListener("click", pauseTimer);
document.getElementById("continue").addEventListener("click", continueTimer);
document.getElementById("reset").addEventListener("click", resetTimer);

三、实例说明

示例一：在Vue.js中使用秒表功能

在Vue.js中使用秒表功能可以使用Vue组件，并将计时器相关函数封装进组件内。具体代码如下：

<template>
  <div>
    <div class="timer">{{ hourStr }}:{{ minuteStr }}:{{ secondStr }}</div>
    <button @click="startTimer">开始</button>
    <button @click="pauseTimer">暂停</button>
    <button @click="continueTimer">继续</button>
    <button @click="resetTimer">重置</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timer: null,
      time: 0
    }
  },
  computed: {
    hourStr() {
      return this.formatNumber(Math.floor(this.time / 3600));
    },
    minuteStr() {
      return this.formatNumber(Math.floor(this.time / 60) % 60);
    },
    secondStr() {
      return this.formatNumber(this.time % 60);
    }
  },
  methods: {
    startTimer() {
      clearInterval(this.timer);
      this.timer = setInterval(() => {
        this.time++;
      }, 1000);
    },
    pauseTimer() {
      clearInterval(this.timer);
    },
    continueTimer() {
      this.startTimer();
    },
    resetTimer() {
      this.time = 0;
      clearInterval(this.timer);
    },
    formatNumber(num) {
      return num < 10 ? "0" + num : num;
    }
  }
}
</script>

示例二：添加警报功能

网页秒表功能还可以添加警报功能，当计时器时间达到一定值时，触发警报。具体代码如下：

function checkTime() {
  var targetTime = 300; // 目标时间，单位秒
  if (time >= targetTime) {
    document.title = "时间到！"; // 修改页面标题
    alert("时间到！");
    resetTimer();
  }
}

// 在startTimer中添加checkTime
function startTimer() {
  clearInterval(timer);
  timer = setInterval(() => {
    time++;
    var hour = Math.floor(time / 3600);
    var minute = Math.floor(time / 60) % 60;
    var second = time % 60;
    var hourStr = hour < 10 ? "0" + hour : hour;
    var minuteStr = minute < 10 ? "0" + minute : minute;
    var secondStr = second < 10 ? "0" + second : second;
    document.getElementById("timer").innerHTML = hourStr + ":" + minuteStr + ":" + secondStr;
    checkTime();
  }, 1000);
}

这样就可以增加一个在计时达到目标时间后触发警报的功能。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：使用JavaScript实现网页秒表功能（含开始、暂停、继续、重置功能） - Python技术站