- Давайте сначала создадим index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta http-equiv="X-UA-Compatible" content="ie=edge"/> <link rel="stylesheet" href="./style.css"> <title>Document</title> </head> <body onload="setRandomColor()"> <div id="box1" onClick="setBackgroundColor(this.id);"> <div id="box2" onClick="setBackgroundColor(this.id);"> <div id="box3" onClick="setBackgroundColor(this.id);"></div> </div> </div> <div id="box4"> </div> <script src="main.js"></script> </body> </html>
2. Давайте создадим style.css, чтобы придать стиль
#box1 { width: 300px; height: 300px; cursor: pointer; display: flex; justify-content: center; align-items: center; float: left; } #box2 { width: 200px; height: 200px; cursor: pointer; display: flex; justify-content: center; align-items: center; z-index: 0; } #box3 { width: 100px; height: 100px; cursor: pointer; display: flex; justify-content: center; align-items: center; z-index: 1; } #box4 { width: 100px; height: 100px; background-color: #000; float: right; }
3. Теперь давайте создадим main.js для написания функции javascript.
function setBackgroundColor(e) { var color = document.getElementById(e).style.backgroundColor; event.stopPropagation(); document.getElementById('box4').style.backgroundColor = color; } function getRandomColor() { return 'rgb(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ')'; } function setRandomColor() { document.getElementById('box1').style.backgroundColor = getRandomColor(); document.getElementById('box2').style.backgroundColor = getRandomColor(); document.getElementById('box3').style.backgroundColor = getRandomColor(); document.getElementById('box4').style.backgroundColor = getRandomColor(); }
Это случайным образом сгенерирует цвет и установит его для каждого div с именами box1,box2, box3 и box4 с помощью функции setRandomColor() в main.js, где getRandomColor() сгенерирует цвет и установит его для каждого div, и когда пользователь нажмет на первые 3 div (т.е. box1, box2 и box3), тот же фон будет отображаться в div box4.
Это простая техника игры с цветами с использованием простого javascript. Надеюсь, это поможет новичкам.