資料結構
網路
關係資料庫管理系統 (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.tw/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.tw/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 次瀏覽
