Permalink
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
76 lines (58 sloc) 1.41 KB
<!DOCTYPE html>
<html>
<head>
<title>Simple Color Changer</title>
<style>
body {
margin: 0px;
padding: 50px;
}
#container {
border: 5px #CCC solid;
width: 550px;
height: 350px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 1s ease-in-out;
}
#square {
width: 150px;
height: 150px;
border-radius: 5px;
background-color: #CCC;
transition: background-color 1s ease-in-out;
animation: colorTimer 2s infinite;
}
@keyframes colorTimer {
/* deliberately empty */
}
</style>
</head>
<body>
<div id="container">
<div id="square"></div>
</div>
<script>
var square = document.querySelector("#square");
var container = document.querySelector("#container");
square.addEventListener("animationiteration", changeColor, false);
function changeColor(e) {
square.style.backgroundColor = getRandomColor();
}
function getRandomColor() {
var characters = "0123456789ABCDEF";
var color = '#';
for (var i = 0; i < 6; i++) {
color += characters[getRandomNumber(0, 15)];
}
return color;
}
function getRandomNumber(low, high) {
var r = Math.floor(Math.random() * (high - low + 1)) + low;
return r;
}
</script>
</body>
</html>