JS控制按钮自动切换背景颜色(可暂停)

下面是一个简单的JavaScript示例，展示了如何控制一个按钮在点击时自动切换背景颜色，并且具备暂停和继续的功能。这个示例使用了`setInterval`来周期性改变颜色，以及`clearInterval`来暂停。

HTML 部分:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Color Changer</title>
<style>
  #colorChangerBtn {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
  }
</style>
</head>
<body>

<button id="colorChangerBtn">Change Color</button>
<button id="pauseBtn">Pause/Resume</button>

<script>
// JavaScript 代码将在这里编写
</script>

</body>
</html>

JavaScript 部分:


// 获取按钮元素
const colorChangerBtn = document.getElementById('colorChangerBtn');
const pauseBtn = document.getElementById('pauseBtn');

let intervalId = null; // 用于存储 setInterval 的 ID
let isPaused = false; // 标记是否暂停

const colors = ['red', 'green', 'blue', 'yellow', 'purple', 'orange']; // 可选颜色
let currentIndex = 0; // 当前颜色索引

// 定义改变颜色的函数
function changeColor() {
  if (!isPaused) {
    colorChangerBtn.style.backgroundColor = colors[currentIndex];
    currentIndex = (currentIndex + 1) % colors.length; // 循环颜色
  }
}

// 开始自动改变颜色
colorChangerBtn.addEventListener('click', function() {
  if (!intervalId) { // 如果还没有开始，则开始
    intervalId = setInterval(changeColor, 500); // 每500毫秒改变一次颜色
  }
});

// 暂停/继续按钮的点击事件
pauseBtn.addEventListener('click', function() {
  if (intervalId) {
    if (isPaused) {
      // 如果已暂停，则继续
      intervalId = setInterval(changeColor, 500);
      isPaused = false;
    } else {
      // 如果正在运行，则暂停
      clearInterval(intervalId);
      intervalId = null;
      isPaused = true;
    }
  }
});

这段代码实现了当用户点击“Change Color”按钮时，按钮的背景色会每500毫秒自动改变一次，直到用户点击“Pause/Resume”按钮暂停。再次点击“Pause/Resume”按钮将恢复颜色变化。注意，这里使用了简单的颜色数组来切换颜色，你可以根据需要扩展这个数组。