用js写具体要求如下:(1)编写程序,实现电子时钟自动走动效果;(2)提供一个按钮控制电子时钟是否停止走动
时间: 2023-06-08 12:04:35 浏览: 184
好的,这是一个很好的问题。根据您的要求,以下是用 JavaScript 编写电子时钟自动行走效果并提供控制按钮的示例代码:
HTML 代码:
```
<h1 id="clock"></h1>
<button id="stop">停止运行</button>
```
JavaScript 代码:
```
// 获取显示时间的 HTML 元素
const clock = document.getElementById("clock");
// 定义更新时间的函数
function updateTime() {
// 获取当前时间
const now = new Date();
// 将时间格式化为 HH:MM:SS 的形式
const hours = now.getHours().toString().padStart(2, "0");
const minutes = now.getMinutes().toString().padStart(2, "0");
const seconds = now.getSeconds().toString().padStart(2, "0");
// 更新时间显示
clock.textContent = `${hours}:${minutes}:${seconds}`;
}
// 每秒钟更新一次时间
let timerId = setInterval(updateTime, 1000);
// 获取控制按钮 HTML 元素
const stopButton = document.getElementById("stop");
// 定义按钮点击事件的处理函数
function onStopButtonClick() {
if (timerId) {
clearInterval(timerId);
timerId = null;
stopButton.textContent = "开始运行";
} else {
timerId = setInterval(updateTime, 1000);
stopButton.textContent = "停止运行";
}
}
// 给控制按钮添加点击事件监听器
stopButton.addEventListener("click", onStopButtonClick);
```
当页面加载时,JavaScript 代码会自动启动一个定时器,每秒钟更新一次页面上显示的时间。同时,控制按钮的默认文本是“停止运行”,点击按钮后,定时器会停止运行,并将按钮文本改为“开始运行”,再次点击按钮时,定时器会重新运行,并将按钮文本改为“停止运行”。
阅读全文