HTML 点击改变颜色：红色、绿色，再到随机颜色
以下是一个实现上述需求的HTML代码：\n\nhtml\n<!DOCTYPE html>\n<html>\n<head>\n<style>\n.square {\n width: 150px;\n height: 150px;\n background-color: red;\n}\n</style>\n</head>\n<body>\n\n<div class="square" onclick="changeColor()"></div>\n\n<script>\nfunction changeColor() {\n var square = document.querySelector(".square");\n if (square.style.backgroundColor === "red") {\n square.style.backgroundColor = "green";\n } else {\n square.style.backgroundColor = "red";\n }\n}\n</script>\n\n</body>\n</html>\n\n\n要实现第三个需求，即点击色块时颜色变为随机颜色，可以修改changeColor()函数如下：\n\njavascript\nfunction changeColor() {\n var square = document.querySelector(".square");\n var randomColor = getRandomColor();\n square.style.backgroundColor = randomColor;\n}\n\nfunction getRandomColor() {\n var letters = "0123456789ABCDEF";\n var color = "#";\n for (var i = 0; i < 6; i++) {\n color += letters[Math.floor(Math.random() * 16)];\n }\n return color;\n}\n\n\n这样点击色块时，颜色会随机变化。
原文地址: https://www.cveoy.top/t/topic/p7EJ 著作权归作者所有。请勿转载和采集!