Ivan858,
|
Цитата:
|
|
Жёлтый, Красный, Голубой, Hе угнаться За тобой!
|
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.act{
background-color: rgba(255, 0, 255, 1);
transition: 1s;
}
button{
height: 100px;
width: 100px;
border-radius: 50%;
}
button:focus {
outline: 0;
border: 0;
}
</style>
<script src="https://cdn.polyfill.io/v1/polyfill.js?Element.prototype.closest"></script>
<script>
window.addEventListener("DOMContentLoaded", function() {
var nav = document.querySelector("nav"),
button = nav.querySelectorAll("button");
nav.addEventListener("click", function(event) {
var target = event.target;
if ((target = target.closest("button")) && target.classList.contains("act")) {
target.classList.remove("act");
target.style.backgroundColor = "";
var siblings = [].filter.call(button, function(child) {
return child !== target
});
target = siblings[siblings.length * Math.random() | 0];
target.classList.add("act");
target.style.backgroundColor = "#" + ("000000" + (Math.random() * 16777215 | 0).toString(16)).slice(-6)
}
})
});
</script>
</head>
<body>
<nav>
<button class="act">01</button>
<button>02</button>
<button>03</button>
<button>04</button>
<button>05</button>
<button>06</button>
<button>07</button>
<button>08</button>
<button>09</button>
<button>10</button></nav>
</body>
</html>