七彩霓虹燈

NO IMAGE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
body {
background-color:#000000;
}
div {       
width:200px;
height:20px;           
float:left;
opacity:0;
}
/*red, orange, yellow, green, blue, indigo, violet*/
#div1 {
background-color:red;  
}
#div2 {
background-color:orange;  
}
#div3 {
background-color:yellow;  
}
#div4 {
background-color:green;  
}
#div5 {
background-color:blue;  
}
#div6 {
background-color:indigo;  
}
#div7 {
background-color:violet;  
}
</style>
</head>
<body>   
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
<div id="div6"></div>
<div id="div7"></div>
<script>
window.onload = function () {
var divlist = document.getElementsByTagName("div");//標籤選擇器
var box = 0;
setInterval(function () {
switch (box) {
case 0: divlist[6].style.opacity = 0.1;divlist[0].style.opacity = 1; box++; break;
case 1: divlist[0].style.opacity = 0.1; divlist[1].style.opacity = 1; box++; break;
case 2: divlist[1].style.opacity = 0.1;divlist[2].style.opacity = 1; box++; break;
case 3: divlist[2].style.opacity = 0.1;divlist[3].style.opacity = 1; box++; break;
case 4: divlist[3].style.opacity = 0.1;divlist[4].style.opacity = 1; box++; break;
case 5: divlist[4].style.opacity = 0.1;divlist[5].style.opacity = 1; box++; break;
case 6: divlist[5].style.opacity = 0.1;divlist[6].style.opacity = 1; box=0; break;
}
}, 250)//200毫秒多久一次,沒進行一次選擇,相應的style就會改變
}
</script>
</body>
</html>

相關文章

YYCache源碼學習

MVC基礎知識整理(一)

初識Linq

Ajax無刷新技術的踩坑點