JavaScript 点击页面变色 - 代码示例及解释 - 常规

以下是使用 JavaScript 实现点击一下页面变一下颜色加注释的代码：

HTML 代码：

<!DOCTYPE html>
<html>
<head>
	<title>点击改变颜色</title>
	<style>
		body {
			background-color: #fff;
			color: #333;
			font-family: Arial, sans-serif;
		}
		.container {
			margin: 20px auto;
			width: 80%;
			max-width: 600px;
			text-align: center;
		}
		.btn {
			display: inline-block;
			padding: 10px 20px;
			background-color: #007bff;
			color: #fff;
			border: none;
			border-radius: 5px;
			cursor: pointer;
			transition: background-color 0.3s ease;
		}
		.btn:hover {
			background-color: #0062cc;
		}
		.color-change {
			font-weight: bold;
			font-size: 20px;
			margin-top: 40px;
			transition: color 0.3s ease;
		}
		.color-change.red {
			color: #ff0000;
		}
		.color-change.blue {
			color: #007bff;
		}
		.color-change.green {
			color: #28a745;
		}
		.comment {
			margin-top: 20px;
			font-style: italic;
			opacity: 0;
			transition: opacity 0.3s ease;
		}
		.comment.show {
			opacity: 1;
		}
	</style>
</head>
<body>
	<div class='container'>
		<button class='btn' onclick='changeColor()'>点击改变颜色</button>
		<p class='color-change'>这是一段文字</p>
		<p class='comment'></p>
	</div>
	<script src='script.js'></script>
</body>
</html>

JavaScript 代码：

function changeColor() {
  const colors = ['red', 'blue', 'green'];
  const colorChange = document.querySelector('.color-change');
  const comment = document.querySelector('.comment');

  // 随机生成颜色
  const randomColor = colors[Math.floor(Math.random() * colors.length)];

  // 改变文字颜色
  colorChange.classList.remove('red', 'blue', 'green');
  colorChange.classList.add(randomColor);

  // 显示注释
  comment.textContent = `当前颜色为 ${randomColor}`;
  comment.classList.add('show');
}

解释：

HTML 中有一个按钮和两个段落，一个段落是要改变颜色的文本，另一个段落是用来显示注释的。
JavaScript 中定义了一个函数 changeColor，当按钮被点击时会调用该函数。
函数里定义了一个数组 colors，用来存储可以改变文本颜色的颜色。
通过 document.querySelector 方法获取到需要改变颜色的段落和用来显示注释的段落。
使用 Math.random() 方法生成一个随机数，然后通过 Math.floor() 方法取整，得到一个 0-2 之间的整数。
根据上一步得到的整数，从 colors 数组中获取到一个随机颜色。
使用 classList 属性对需要改变颜色的段落进行操作，先将原来的颜色类名全部移除，再添加随机颜色的类名。
设置用来显示注释的段落的 textContent 属性为“当前颜色为...”，其中...为随机颜色的名字。
使用 classList 属性将用来显示注释的段落的类名改为“show”，这样就会显示出来。
CSS 中定义了一些样式，用来改变按钮、段落和注释的样式。其中，注释一开始的 opacity 为 0，表示不显示，当类名为“show”时，才会显示。