页面空白处使用toggle（）函数，单击时诗词正文在三种颜色之间切换。

可以使用以下代码实现：

HTML代码：

<div id="poetry">
  <p>白日依山尽，</p>
  <p>黄河入海流。</p>
  <p>欲窮千里目，</p>
  <p>更上一層樓。</p>
</div>

<button onclick="toggle()">切换颜色</button>

JavaScript代码：

function toggle() {
  var poetry = document.getElementById("poetry");
  var color = poetry.style.color;

  if (color === "red") {
    poetry.style.color = "blue";
  } else if (color === "blue") {
    poetry.style.color = "green";
  } else {
    poetry.style.color = "red";
  }
}

在这个例子中，我们首先获取了包含诗词的div元素，并将其存储在变量“poetry”中。然后，我们获取div元素的当前颜色并将其存储在变量“color”中。

接下来，我们使用一个if-else语句来检查当前的颜色，并在三个可能的颜色之间循环切换。在每个条件分支中，我们使用“style.color”属性来设置div元素的颜色。当我们切换到新的颜色时，它将在下一次单击按钮时用作新的起点。

相关问题

在页面空白处使用toggle（）函数，单击时诗词正文在三种颜色之间切换。

好的，我知道了，以下是实现该功能的代码：

HTML：

<div class="poem"></div>
<button class="toggle-btn">Toggle</button>

CSS：

.poem {
  color: #000; /* 初始颜色 */
}

.red {
  color: #f00;
}

.green {
  color: #0f0;
}

.blue {
  color: #00f;
}

JavaScript：

const poem = document.querySelector('.poem');
const toggleBtn = document.querySelector('.toggle-btn');
const colors = ['red', 'green', 'blue']; // 三种颜色

toggleBtn.addEventListener('click', function() {
  // 获取当前颜色的下标
  const currentIndex = colors.indexOf(poem.classList[0]);
  // 下一个颜色的下标
  const nextIndex = (currentIndex + 1) % 3;
  // 移除当前颜色，添加下一个颜色
  poem.classList.remove(colors[currentIndex]);
  poem.classList.add(colors[nextIndex]);
});

当你单击 Toggle 按钮时，诗词正文的颜色会在红、绿、蓝之间切换。

页面空白处使用toggle（）函数，单击时诗词正文在三种颜色之间切换。不使用按钮

可以使用JavaScript来实现这个效果，代码如下：

HTML部分：

<div id="poem">
  <h2>静夜思</h2>
  <p>窗前明月光，</p>
  <p>疑是地上霜。</p>
  <p>举头望明月，</p>
  <p>低头思故乡。</p>
</div>

JavaScript部分：

var poem = document.getElementById("poem");
var colors = ["#FF0000", "#00FF00", "#0000FF"];
var currentColor = 0;

poem.addEventListener("click", function() {
  currentColor = (currentColor + 1) % colors.length;
  poem.style.color = colors[currentColor];
});

这段代码首先获取了包含诗词的div元素和三种颜色的数组。然后给这个div元素添加了一个click事件监听器，当用户点击div时，会触发这个事件监听器。事件监听器会将当前颜色的索引加1，然后将div的文字颜色设置为新的颜色。这样就可以实现在三种颜色之间切换的效果了。