Как случайным образом изменить цвет изображения с помощью HTML CSS и JavaScript?

Опубликовано: 1 Января, 2023

В этой статье мы создадим веб-страницу, на которой мы можем случайным образом изменить цвет изображения, щелкнув изображение с помощью HTML, CSS и JavaScript. Цвет изображения будет изменяться случайным образом с помощью функции JavaScript Math random().

Подход:

Прежде всего, выберите свое изображение с помощью HTML-тега <img>.
В JavaScript используйте функцию Math random() для случайного выбора цветов.
Мы будем использовать прослушиватели событий, чтобы изменить цвет изображения. Прослушиватель событий используется для случайного изменения цвета фона данного изображения.

HTML-код:

Создайте HTML-файл.
Создайте тело и выберите свое изображение, используя HTML <img> src.
Внутри HTML-тега body создайте HTML-раздел и присвойте ему идентификатор.

HTML

<!DOCTYPE html>
<html>
<head>
     <title>random image color change</title>
</head>
  
<body>
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220803165300/geeksimage-200x145.png">
    <div id="divID"></div>
</body>  
</html>

Код CSS: мы используем смешанный режим CSS. для смешивания содержимого элемента с родительским содержимым и фоном.

CSS

<style>
    * {
        margin: 0;
        padding: 0;
    }
  
    #divID {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100vh;
        mix-blend-mode: hue;
    }
  
    body {
        overflow: hidden;
    }
  
    img {
        height: 100vh;
        width: 100%;
    }
</style>

Код JavaScript:

Сначала мы используем Math Floor() для случайного выбора цветов.
После этого мы добавим прослушиватель события клика, чтобы изменить цвет.

Javascript

<script>
    const divElem = document.getElementById("divID");
    function randomcolor() {
        return Math.floor(Math.random() * 255);
    }
    divElem.addEventListener("click", () => {
        divElem.style.backgroundColor = 
        "rgba("+randomcolor()+","+randomcolor()+","+randomcolor()+")"
    })
</script>

Полный код:

Вывод: Нажмите на изображение, чтобы случайным образом изменить цвет.

JavaScript HTML CSS

Как случайным образом изменить цвет изображения с помощью HTML CSS и JavaScript?

HTML

CSS

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ