如何使用 HTML CSS 和 JavaScript 随机更改图像颜色?
在本教程中，我们将介绍两种使用 HTML、CSS 和 JavaScript 随机更改图像颜色的方法。
方法 1:使用 Math.random() 函数
我们将首先编写 HTML 代码并使用 <img> 标签选择目标图像。然后，我们将使用 CSS 属性应用一些基本的样式。为了随机选择颜色，我们必须使用 JavaScript Math.random() 函数。Math.random() 会随机生成一个介于 0(含)和 1(不含)之间的数字。要更改图像的颜色，我们将使用事件侦听器。事件侦听器用于随机更改给定图像的背景颜色。
示例
<!DOCTYPE html>
<html>
<head>
<title>How to randomly change image color using HTML CSS and JavaScript ?</title>
</head>
<style>
body {
overflow: hidden;
}
#container {
top:0;
width: 350px;
height: 150px;
position: absolute;
mix-blend-mode: hue;
}
img {
height: 150px;
width: 350px;
}
p {
font-size: 20px;
font-weight: bold;
margin-left: 15px;
}
</style>
<body>
<img src="https://www.tutorialspoint.com/images/logo.png">
<div id="container"></div>
<p>Click the image to change its color</p>
<script>
const divElement = document.getElementById("container");
function selectcolor() {
return Math.floor(Math.random() * 255);
}
divElement.addEventListener('click', () => {
divElement.style.backgroundColor = 'rgba('
+ selectcolor() + ',' + selectcolor()
+ ',' + selectcolor() + '\)'
})
</script>
</body>
</html>
方法 2:使用带有十六进制颜色代码的数学函数
在此方法中，我们将使用 onclick 事件触发按钮，该按钮最终将触发图像的颜色变化。我们将使用 Math.random() 和 Math.floor() 函数以及 hexColorCode 来实现这一点。
我们将遵循一系列步骤来实现此方法。
首先，我们将使用 div 容器编写 HTML 代码，并将目标图像包含在其中。之后，我们将包含一个可点击的按钮，该按钮将负责图像的颜色变化。
接下来，我们将使用 CSS 样式属性设计整个布局，包括我们的 div 容器、图像和按钮。使用 CSS 动画属性，我们将为 p 标签设置动画。在我们的 CSS 中，我们将为 p 选择器提供动画属性和名称值"hexcolors"。它将持续 5 秒，并将无限交替。它会改变文本的颜色。
然后我们继续创建名为 hexcolors 的 @keyframes。关键帧描述动画元素在动画序列中的特定点如何出现。文本动画将从 0% 开始。它将在 0% 时显示紫色，在 20% 时显示靛蓝色，在 40% 时显示蓝色，在 60% 时显示绿色，在 80% 时显示黄色，在 100% 时显示橙红色。
最后，我们在 JavaScript 中创建一个函数，其中包含一个由十六进制数字组成的数组。然后，将使用内置数学函数生成十六进制代码。使用 document.getElementById，我们可以获取 span 标签的 id。这将更改屏幕对十六进制颜色代码的显示。接下来，我们还通过使用 document.getElementByTagName 获取图像标签；当您单击按钮时，这将改变图像的背景颜色。
示例
<!DOCTYPE html>
<html>
<head>
<title>How to randomly change image color using HTML CSS and JavaScript ?</title>
<style>
body {
background-color: paleturquoise;
}
.container {
width: 75%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin: auto;
}
h3 {
font-size: 18px;
margin: 10px 20px 20px 10px;
color: white;
}
.btn1 {
padding: 2% 2%;
border: none;
border-radius: 4px;
color: teal;
font-size: 15px;
cursor: pointer;
}
img{
width: 400px;
height: 200px;
border: 2px solid white;
}
p{
animation: hexcolors 5s infinite alternate;
font-size: 20px;
font-weight: bold;
color: navy;
}
@keyframes hexcolors {
0% {
color: violet;
}
20% {
color: indigo;
}
40% {
color: blue;
}
60% {
color: green;
}
80% {
color: yellow;
}
100% {
color: orangered;
}
}
@media screen and (min-width: 992px) {
/* For Large Laptops */
.container {
width: 100vw;
margin: auto;
}
h2 {
font-size: 30px;
}
.btn1 {
padding: 2% 2%;
margin: auto;
font-size: 20px;
font-weight: bold;
}
}
</style>
</head>
<body>
<div class="container">
<div>
<p>Click the button to change the color of the image.</p>
<img src="https://www.tutorialspoint.com/images/logo.png">
<h3>The background color is : # <span id="colorCode">0f5257</span></h3>
<button onclick="changeColor()" class="btn1">
Generate Color
</button>
</div>
</div>
<script>
function changeColor() {
let hexNumbers = [
"0",
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"A",
"B",
"C",
"D",
"F",
];
let hexColorCode = "";
for (var i = 0; i < 6; i++) {
let randomIndex = Math.floor(Math.random() * hexNumbers.length);
hexColorCode += hexNumbers[randomIndex];
}
document.getElementById("colorCode").innerHTML = hexColorCode;
document.getElementsByTagName("img")[0].style.background =
"#" + hexColorCode;
}
</script>
</body>
</html>
