點選元素依次下落,在點選依次上升
阿新 • • 發佈：2018-12-07
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
window.onload=function(){
//建立div
for(var i=0;i<10;i++){
var oDiv=document.createElement('div');
oDiv.style.width="100px";
oDiv.style.height="100px";
oDiv.style.background="blue";
oDiv.style.position="absolute";
oDiv.style.left=i*110+'px';
oDiv.style.top="0px";
oDiv.style.transition="0.5s all ease";
document.body.appendChild(oDiv);
}
var allDiv=document.getElementsByTagName('div');
var index=0;
var num=1;
var timer=null;
document.onclick=function(){
if(num==2)return;
num=2;
if(index==0){
clearInterval(timer);
timer=setInterval(function(){
allDiv[index].style.top="500px";
index++;
if(index==allDiv.length){
index=allDiv.length-1;
num=1;
return;
}
},50);
}else{
clearInterval(timer);
timer=setInterval(function(){
allDiv[index].style.top="0px";
index--;
if(index==-1){
index=0;
num=1;
return;
}
},50)
}
}
}
</script>
</html>