JS 点击页面改变背景颜色并添加注释 - 简单代码示例

以下是一个简单的示例，当您单击页面时，页面的背景颜色会更改，并在页面上添加一条注释：

HTML 代码：

<!DOCTYPE html>
<html>
<head>
	<title>点击换颜色加注</title>
	<style>
		body {
			background-color: #fff;
		}
	</style>
</head>
<body>
	<h1>点击换颜色加注</h1>
	<p>单击页面以更改背景颜色。</p>
	<script src="app.js"></script>
</body>
</html>

JavaScript 代码：

// 获取 body 元素
var body = document.querySelector('body');

// 在页面上添加一条注释
var note = document.createElement('p');
note.textContent = '颜色已更改！';
note.style.display = 'none';
body.appendChild(note);

// 单击事件监听器
body.addEventListener('click', function() {
	// 更改背景颜色
	body.style.backgroundColor = '#' + (Math.random() * 0xFFFFFF << 0).toString(16);
	
	// 显示注释
	note.style.display = 'block';
	
	// 2 秒后隐藏注释
	setTimeout(function() {
		note.style.display = 'none';
	}, 2000);
});

此代码将在单击页面时更改背景颜色，并在屏幕上添加一条注释，指示颜色已更改。注释将在 2 秒后自动消失。