3．电子时钟自动走动效果 具体要求如下：（1）编写程序，实现电子时钟自动走动效果；（2）提供一个按钮控制电子时钟是否停止走动

这里提供一个简单的 HTML、CSS 和 JavaScript 实现电子时钟自动走动效果并提供按钮控制的示例代码：

HTML 代码：

<div id="clock"></div>
<button id="stop-btn">停止走动</button>

CSS 代码：

#clock {
  font-size: 48px;
  font-weight: bold;
  text-align: center;
  padding-top: 100px;
}

JavaScript 代码：

// 获取 HTML 元素
var clockEl = document.getElementById('clock');
var stopBtn = document.getElementById('stop-btn');

// 定义函数：获取当前时间并更新显示
function updateTime() {
  var date = new Date();
  var hours = date.getHours();
  var minutes = date.getMinutes();
  var seconds = date.getSeconds();
  clockEl.textContent = hours + ':' + minutes + ':' + seconds;
}

// 定义函数：启动时钟
function startClock() {
  updateTime();
  setInterval(updateTime, 1000); // 每秒更新一次显示
}

// 定义变量：定时器 ID
var timerId;

// 给按钮添加点击事件处理函数
stopBtn.addEventListener('click', function() {
  if (timerId) {
    // 如果定时器已经启动，则停止定时器，并更新按钮文本
    clearInterval(timerId);
    timerId = null;
    stopBtn.textContent = '开始走动';
  } else {
    // 如果定时器未启动，则启动定时器，并更新按钮文本
    startClock();
    timerId = setInterval(updateTime, 1000);
    stopBtn.textContent = '停止走动';
  }
});

// 启动时钟
startClock();
timerId = setInterval(updateTime, 1000);

代码说明：

1. HTML 代码中包含一个用于显示时钟的 `div` 元素和一个用于控制时钟走动的按钮。
2. CSS 代码定义了时钟显示的样式。
3. JavaScript 代码中，首先获取了用于显示时钟和控制按钮的 HTML 元素。
4. `updateTime` 函数用于获取当前时间并更新显示。
5. `startClock` 函数用于启动时钟，它会先调用 `updateTime` 函数更新一次时间显示，然后每隔一秒钟调用一次 `updateTime` 函数，从而实现自动走动效果。
6. 使用 `setInterval` 函数启动定时器，将定时器 ID 存储在 `timerId` 变量中。
7. 给按钮添加点击事件处理函数，当按钮被点击时，如果定时器已经启动，则停止定时器，并更新按钮文本；如果定时器未启动，则启动定时器，并更新按钮文本。
8. 最后调用 `startClock` 函数启动时钟，同时启动定时器。