1 在html页面中展示出一个长宽分别为150px的正方形红色色块。2 当点击该色块时该色块颜色会变成绿色再点击变回红色再点击变为绿色3 深入当点击色块时该色块的颜色会变为随机颜色
可以使用HTML和JavaScript来实现这个功能。下面是一个示例代码:
HTML部分:
<div id="color-block" onclick="changeColor()"></div>
CSS部分:
#color-block {
width: 150px;
height: 150px;
background-color: red;
}
JavaScript部分:
function changeColor() {
var colorBlock = document.getElementById("color-block");
var currentColor = colorBlock.style.backgroundColor;
if (currentColor === "red") {
colorBlock.style.backgroundColor = "green";
} else if (currentColor === "green") {
colorBlock.style.backgroundColor = getRandomColor();
} else {
colorBlock.style.backgroundColor = "red";
}
}
function getRandomColor() {
var letters = "0123456789ABCDEF";
var color = "#";
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
这个代码中,我们使用了一个div元素作为色块,并给它一个id为"color-block"。当点击该div元素时,会触发changeColor()函数。changeColor()函数会根据当前色块的颜色来改变它的颜色。如果当前颜色是红色,则改为绿色;如果当前颜色是绿色,则改为随机颜色;如果当前颜色是其他颜色,则改为红色。
getRandomColor()函数用于生成一个随机颜色,它会随机选择6个16进制数字来构成一个颜色代码(类似于#FFFFFF)。
通过这段代码,你可以在HTML页面中展示一个长宽为150px的正方形红色色块,并实现点击色块时颜色的变化
原文地址: https://www.cveoy.top/t/topic/ipUT 著作权归作者所有。请勿转载和采集!