数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何使用HTML、CSS和JavaScript随机更改图像颜色？
在本教程中，我们将学习两种使用HTML、CSS和JavaScript随机更改图像颜色方法。
方法一：使用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://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>
方法二：使用十六进制颜色代码的数学函数
在这种方法中，我们将使用onclick事件触发一个按钮，该按钮最终将触发图像的颜色更改。我们将使用Math.random()和Math.floor()函数以及hexColorCode来实现这一点。
我们将遵循一系列步骤来实现这种方法。
首先，我们将编写包含div容器的HTML代码，并将目标图像包含在其中。在此之后，我们将包含一个可点击的按钮，该按钮将负责更改图像的颜色。
接下来，我们将使用CSS样式属性设计整个布局，包括我们的div容器、图像和按钮。使用CSS动画属性，我们将对p标签进行动画处理。在我们的CSS中，我们将为p选择器提供animation属性和'hexcolors'名称值。它将持续5秒，并将无限交替。它会改变文本的颜色。
然后，我们继续创建名为hexcolors的@keyframes。关键帧描述动画元素在动画序列中的特定点上的显示方式。文本动画将从0%开始。它在0%时为紫色，在20%时为靛蓝，在40%时为蓝色，在60%时为绿色，在80%时为黄色，在100%时为橘红色。
最后，我们在JavaScript中创建一个包含十六进制数字的数组的函数。然后将使用内置的Math函数生成十六进制代码。使用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://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>
936 次浏览
