Введите текст для поиска

воскресенье, 11 декабря 2016 г.

Изучаем JS - блок, меняющий цвет на рандомный

Идея такова - есть коробочка div с прописанным id. Мы обращаемся к ней. По клику по этому div мы генерируем три значения rgb для трех цветов (число от 0 до 255). Потом склеиваем эти три значения в строку вида: rbg(000, 000, 000) и передаём ее в  style.backgroundColor элемента.
Конечно, есть вероятность того, что новый цвет и текущий совпадет. Однако, она ничтожно мала (я так думаю 1 / (256*256*256). Собственно, html: 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тестовая JS страница</title>
        <style>
            #box {
                width:300px;
                height:300px;
                background-color:lightsalmon;
            }
        </style>
 </head>
 <body>
    <div id="box">Кликни, чтобы изменить цвет</div>
    <script src="test1.js"></script>
    </body>
</html>
И javascript.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/* 
* Суперфункция для изменения цвета коробочки в рандомный.
* принимает параметр:
* box - id коробки
* to - количество ргб оттенка, до которого надо рандомить
*/

var el, curRGB, box, to, red, green, blue;
box = 'box';
to = 255;

el = document.getElementById(box);

el.addEventListener('click', function(event) {
             
            red = myRandom(to) + ',';
            green = myRandom(to) + ',';
            blue = myRandom(to);
            curRGB = 'rgb(' + red + green + blue + ')';
            el.style.backgroundColor = curRGB; 
            
        });
        function myRandom (to)  { // рандомайзер
      return Math.floor(Math.random() * to);
        }
Жалко, что здесь нельзя вставлять исполняемые скрипты на страницу.

Если вам понравилась/принесла пользу эта запись, то сказать "СПАСИБО" очень просто - поделитесь записью в социальных сетях при помощи кнопочек ниже. Вам несложно, а мне приятно!

Комментариев нет :

Отправить комментарий