blob: 67abfb231aba80f63bbd5bb1330cff647cf18747 [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: rgb(255, 255, 255);
}
.box {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div>
<div class="box" tabindex="-1" id="box0"></div>
<div class="box" tabindex="-1" id="box1"></div>
<div class="box" tabindex="-1" id="box2"></div>
</div>
<script>
box0 = document.getElementById("box0")
box1 = document.getElementById("box1")
box2 = document.getElementById("box2")
box0.addEventListener("focus", function(){
box0.style.background = "#FF5468";
});
box0.addEventListener("blur", function(){
box0.style.background = "#FFF";
});
box1.addEventListener("focus", function(){
box1.style.background = "#FABE4D";
});
box1.addEventListener("blur", function(){
box1.style.background = "#FFF";
});
box2.addEventListener("focus", function(){
box2.style.background = "#4DFA90";
});
box2.addEventListener("blur", function(){
box2.style.background = "#FFF";
});
i = 1;
handle = window.setTimeout(callback, 500);
function callback() {
i = (i + 2) % 3;
document.getElementById("box" + i).focus();
handle = window.setTimeout(callback, 1000);
}
</script>
</body>
</html>