实现一个功能丰富的计时器

要求实现一个功能丰富的计时器，支持正向计时和倒计时，并且精确到毫秒级别。以下是具体的功能和技术运用：

1.功能

正向计时：

用户点击“开始计时”按钮后，计时器从0开始计时，并显示经过的时间。

倒计时：

用户在输入框中输入倒计时时间（格式为mm:ss.ms），然后点击“开始倒计时”按钮，计时器会从输入的时间开始倒计时，直到时间结束。

停止计时：

用户可以随时点击“停止”按钮来停止当前的计时或倒计时。

重置计时器：

用户点击“重置”按钮可以将计时器重置为初始状态，即00:00:00.000。

输入验证：

在开始倒计时时，如果用户没有输入有效的时间，则会弹出提示信息。

2.技术运用

HTML：

用于构建网页的基本结构。包含一个显示时间的div元素、四个按钮（开始倒计时、开始计时、停止、重置）和一个输入框用于输入倒计时时间。

CSS：

用于美化页面，使计时器界面更加友好和美观。设置了字体、背景颜色、按钮样式等。

JavaScript：

用于实现计时器的核心逻辑。使用Date.now()获取当前时间戳。使用setInterval函数每毫秒更新一次时间显示。使用clearInterval函数停止定时器。处理用户输入并进行相应的操作。

3. 具体技术细节

DOM操作：

通过document.getElementById获取页面元素。

更新页面元素的内容以显示当前时间。

事件处理：

为按钮添加点击事件监听器，以便在用户点击时执行相应的函数。

字符串处理：

使用split方法分割用户输入的时间字符串。使用padStart方法确保时间显示始终是两位数。

条件判断：

检查是否正在运行计时器，防止重复启动。检查用户输入的有效性，确保输入的时间格式正确。

4.完整代码

5.效果展示