帮我写一个js点击按钮一个盒子消失，另一个盒子出现用onclick 还有opacity

好的，我可以帮您编写这样的代码：

首先，您需要在 HTML 中创建两个盒子，一个是要消失的盒子，另一个是要出现的盒子，如下所示：

<div id="box1">要消失的盒子</div>
<div id="box2" style="display:none;">要出现的盒子</div>
<button onclick="toggleBox()">点击我切换盒子</button>

然后，您需要编写一个 JavaScript 函数来实现当按钮被点击时切换两个盒子的显示状态：

function toggleBox() {
  var box1 = document.getElementById("box1");
  var box2 = document.getElementById("box2");
  if (box1.style.opacity === "0") {
    // 如果盒子1已经消失，则显示盒子1，隐藏盒子2
    box1.style.opacity = "1";
    box2.style.opacity = "0";
    setTimeout(function() {
      box2.style.display = "none";
    }, 1000); // 延迟1秒隐藏盒子2，以便动画效果更流畅
  } else {
    // 如果盒子1正在显示，则隐藏盒子1，显示盒子2
    box1.style.opacity = "0";
    box2.style.display = "block";
    setTimeout(function() {
      box2.style.opacity = "1";
    }, 10); // 延迟10毫秒显示盒子2，以便动画效果更流畅
  }
}

在这个函数中，我们首先获取了两个盒子的 DOM 元素，然后判断盒子1是否已经消失（即透明度是否为0），如果已经消失，则显示盒子1，隐藏盒子2；否则，隐藏盒子1，显示盒子2。为了实现动画效果，我们使用了 opacity 属性来控制盒子的透明度，并使用 setTimeout 函数来延迟显示或隐藏盒子的动作，以便让动画效果更流畅。

最后，您只需要将这些代码复制到您的网页中，就可以实现点击按钮切换两个盒子的显示状态了。