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秒后自动消失。
原文地址: https://www.cveoy.top/t/topic/bkMX 著作权归作者所有。请勿转载和采集!