构建双功能按钮

以下是一个简单的示例，展示了如何使用HTML、CSS和JavaScript构建一个双功能按钮：

HTML代码：

<button id="dualButton">功能1</button>

CSS代码：

#dualButton {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}

#dualButton.active {
  background-color: #f44336;
}

JavaScript代码：

var button = document.getElementById("dualButton");
var active = false;

button.addEventListener("click", function() {
  if (active) {
    button.innerHTML = "功能1";
    button.classList.remove("active");
  } else {
    button.innerHTML = "功能2";
    button.classList.add("active");
  }

  active = !active;
});

这段代码创建了一个按钮，当按钮被点击时，会切换按钮的文本内容和样式。初始状态下，按钮显示为“功能1”并具有绿色背景。当按钮被点击后，按钮的文本内容变为“功能2”，背景颜色变为红色。再次点击按钮，状态会切换回初始状态。