js实现秒表计时器

实现 js 的秒表计时器功能,可以按照以下步骤进行:

1. 创建页面结构

页面需要包含一个显示时间的区域和三个按钮,分别是“开始计时”、“暂停计时”和“重置计时”按钮。按钮可以使用 button 标签创建,显示时间的区域可以使用 div 标签创建。

下面是一个简单的页面结构示例:

<div id="clock">00:00:00</div>
<button id="start">开始计时</button>
<button id="pause">暂停计时</button>
<button id="reset">重置计时</button>

2. 编写 JavaScript 代码

首先,我们需要定义一个计时器变量(timer),并且初始化为 0。

let timer = 0;

接下来,我们需要编写一个函数,用于将计时器的时间转换为可读的格式。该函数接受一个参数 timeInSeconds,代表了当前的计时器时间,单位为秒。函数内部首先将时间转换为小时、分钟和秒的形式,然后将它们格式化成两位数,并且返回字符串类型的时间格式。

function formatTime(timeInSeconds) {
  const hours = Math.floor(timeInSeconds / 3600);
  const minutes = Math.floor((timeInSeconds % 3600) / 60);
  const seconds = timeInSeconds % 60;
  return `${hours.toString().padStart(2, '0')}:${minutes
    .toString()
    .padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}

接下来,我们需要编写一个函数,将时间显示在页面上。该函数内部调用上面编写的 formatTime 函数,将计时器的时间格式化并赋值给显示时间的区域。

function displayTime() {
  const clock = document.getElementById('clock');
  clock.textContent = formatTime(timer);
}

然后,我们需要编写一个函数,用于开始计时。该函数内部需要调用 setInterval 函数来递增计时器变量 timer,并且每秒更新显示区域的时间。

注意,该函数需要避免重复调用,考虑到用户可能需要在运行时暂停计时器,我们可以在函数内部添加一个状态变量 isRunning,用于判断当前计时器是否在运行状态。

let isRunning = false;
function startTimer() {
  if (!isRunning) {
    isRunning = true;
    setInterval(() => {
      timer++;
      displayTime();
    }, 1000);
  }
}

接下来,我们需要编写一个函数,暂停计时器。该函数内部需要清除之前 setInterval 函数的计时器,并且将 isRunning 变量置为 false。这样,当用户再次点击“开始计时”按钮时,计时器才能继续运行。

function pauseTimer() {
  if (isRunning) {
    clearInterval(timerInterval);
    isRunning = false;
  }
}

最后,我们需要编写一个函数,用于重置计时器。该函数需要清空计时器变量并将显示时间区域中的内容重置为“00:00:00”。

function resetTimer() {
  timer = 0;
  displayTime();
}

3. 示例说明

示例一

在按钮上添加 click 事件,用事件委托的方式监听多个按钮的点击事件。

const btnWrapper = document.querySelector('.btn-wrapper');
btnWrapper.addEventListener('click', (e) => {
  const target = e.target;
  switch (target.id) {
    case 'start':
      startTimer();
      break;
    case 'pause':
      pauseTimer();
      break;
    case 'reset':
      resetTimer();
      break;
    default:
      break;
  }
});

示例二

将计时器应用于一个元素上,并且支持在所有的子元素中通过命名规则来控制计时器。

const clock = document.getElementById('clock');
clock.start = function () {
  startTimer();
};
clock.pause = function () {
  pauseTimer();
};
clock.reset = function () {
  resetTimer();
};
clock.addEventListener('click', (e) => {
  const target = e.target;
  if (target.classList.contains('start')) {
    clock.start();
  } else if (target.classList.contains('pause')) {
    clock.pause();
  } else if (target.classList.contains('reset')) {
    clock.reset();
  }
});

在这个示例中,我们可以在元素的子元素中添加 .start, .pause, .reset 类名来控制计时器。在页面中使用该计时器时,可以用以下方式创建元素:

<div id="clock">
  <span class="start">开始计时</span>
  <span class="pause">暂停计时</span>
  <span class="reset">重置计时</span>
</div>

当点击该元素中任意一个子元素时,都能控制计时器开始、暂停或者重置。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:js实现秒表计时器 - Python技术站

(0)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • JavaScript Math对象和调试程序的方法分析

    针对“JavaScript Math对象和调试程序的方法分析”的详细讲解,我会分别进行介绍。 JavaScript Math 对象 在 JavaScript 中,Math 是一个内置的全局对象,用于执行常见的数学运算。以下是 Math 对象的一些常见方法: 1. Math.round() Math.round() 方法可把一个数字四舍五入为最接近的整数。 示…

    JavaScript 2023年5月27日
    00
  • 详解JavaScript自定义函数

    请看下面的详解: 详解 JavaScript 自定义函数 在 JavaScript 中,函数是一种可被调用的代码块,它可以重复使用,是提高代码复用率的重要手段。JavaScript 中的函数不仅可以使用已有的内置函数,还可以通过自定义函数实现更多的功能。 一、自定义函数的基本定义 JavaScript 中的自定义函数使用 function 关键字定义,其基本…

    JavaScript 2023年5月27日
    00
  • JavaScript 实现鼠标拖动元素实例代码

    下面就给您详细讲解一下“JavaScript 实现鼠标拖动元素实例代码”的攻略。 什么是鼠标拖动元素 鼠标拖动元素是指利用鼠标对网页上的某个元素进行拖动操作,把元素从一个位置移到另一个位置。在前端开发中,鼠标拖动元素经常被用于实现拖拽排序、拖拽上传等功能。 实现鼠标拖动元素的基本步骤 实现鼠标拖动元素的基本步骤如下: 给需要拖动的元素添加鼠标按下的事件监听器…

    JavaScript 2023年6月10日
    00
  • 微信小程序 自己制作小组件实例详解

    下面是关于“微信小程序自己制作小组件实例详解”的攻略: 什么是小组件 小组件是一种自由组合,具备特定功能的组合、封装后的组件库。作为组件库的一部分,一个好的小组件应该能够在各种应用场景下有良好的兼容和复用性。 制作小组件 1.创建小组件 使用命令行创建小组件(假设小组件名字为 my-component): # 使用命令行创建自定义组件 $ miniprogr…

    JavaScript 2023年6月11日
    00
  • javascript从右边截取指定字符串的三种实现方法

    如下是关于”javascript从右边截取指定字符串的三种实现方法”的攻略解释。 概述 当我们在实际的 Javascript 开发过程中处理一个字符串的时候,会经常遇到需要从字符串的右边开始截取指定长度的字符的需求。下面将会介绍三种实现 “javascript从右边截取指定字符串” 的方法。 方法一:使用String对象的slice()方法 slice()方…

    JavaScript 2023年5月28日
    00
  • javascript判断元素存在和判断元素存在于实时的dom中的方法

    判断元素是否存在于DOM中是Javascript中经常遇到的一个问题,特别是在进行DOM操作和事件处理的时候。下面是两种常见的判断元素的方法: 一、使用document.querySelector() 通过使用document.querySelector()方法来查找元素,如果返回值不为null,那么表示找到了该元素,否则表示没有找到该元素。 var ele…

    JavaScript 2023年6月10日
    00
  • Angular服务Request异步请求的实例讲解

    下面是关于“Angular服务Request异步请求的实例讲解”的完整攻略。 标题:Angular服务Request异步请求的实例讲解 什么是Angular服务Request? Angular服务Request是Angular框架内置的一个服务,主要用于发送异步HTTP请求。Request服务是通过Angular注入系统使用的,因此我们只需要在组件或其他服务…

    JavaScript 2023年6月11日
    00
  • JavaScript中标识符提升问题

    JavaScript中标识符提升问题是指在JavaScript代码中,变量或函数在声明之前仍然可以被引用和使用的问题。这是JavaScript语言本身的一个特性,不是一个错误。这种特性也被称为提升(Hoisting)。 在JavaScript代码中,当我们声明一个变量或函数时,它们会在代码执行之前被“提升”到代码的顶部。这意味着我们可以在声明之前使用它们。但…

    JavaScript 2023年5月18日
    00
合作推广
合作推广
分享本页
返回顶部