<!DOCTYPE?HTML>
<html>
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8">
<title>無標(biāo)題文檔</title>
<style>
#container?div{
width:?50px;
height:?50px;
background-color:?red;
position:?absolute;
top:?40px;
left:?0px;
margin-right:?10px;
}
#container?.on{
background-color:?yellow;
}
</style>
<script>
window.onload?=?function?()?{
var?btn1?=?document.getElementsByTagName('button')[0];
var?container?=?document.getElementById('container');
var?box?=?container.getElementsByTagName('div');
var?str?=?'';
for?(var?i?=?0;?i?<?10;?i++)?{
str?+=?'<div></div>';
};
container.innerHTML?=?str;
for?(var?i?=?0;?i?<?box.length;?i++)?{
box[i].style.left?=?80*i?+?'px';
}
btn1.onclick?=?go;
var?num?=?0;
function?go()?{
//if?(num?<?10)?{
clearInterval(box.timer);
box.timer?=?setInterval(?function?()?{
for?(var?i?=?0;?i?<?box.length;?i++)?{
box[i].className?=?'';
};
box[num].className?=?'on';
num++;
if?(num?>=?10)?{
clearInterval(box.timer);
num?=?0;
num1?=?9;
go1();
};
//box[num-1].className?=?'on';
//num?%=?box.length;//循環(huán)
},?100);
//}
};
//var?num1?=?9;
function?go1()?{
if?(num1?>=?0)?{
clearInterval(box.timer);
box.timer?=?setInterval(?function?()?{
for?(var?i?=?0;?i?<?box.length;?i++)?{
box[i].className?=?'';
};
box[num1].className?=?'on';
num1--;
if?(num1?==?-1)?{
clearInterval(box.timer);
//num1?=?9;
};
},?100);
}
};
};
</script>
</head>
<body>
<button>go</button>
<div?id="container"></div>
</body>
</html>覺得這么寫很麻煩,求更簡單的實現(xiàn)法子
更好地實現(xiàn)這段代碼的效果的 寫法
啊啊啊啊123
2017-03-18 11:22:41