One, the button can be clicked multiple times.
650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/4C/D4/wKiom1RF_p3CAgzgAACAPa-vVUw364.jpg "title=" QQ picture 20141021143110.png "alt=" Wkiom1rf_p3cagzgaacapa-vvuw364.jpg "/>
Second, HTML+CSS code.
<style>
. box{width:800px; margin:90px Auto;}
. btn{padding:5px 10px; color: #fff; background: #ff6600; cursor:pointer; font-size:16px; border-radius:5px;}
. list{position:relative; margin-top:20px;}
. list li{width:48px; height:48px; position:absolute; left:0; top:0; line-height:50px; Text-align:center; font-size:30px; border:1px solid #000; background:red; Color: #fff;}
</style>
<div class= "box" >
<input type= "button" value= "automatically generates a variable V-shaped" id= "btn" class= "btn"/>
<ul id= "list" class= "list" ></ul>
</div>
Third, JS code.
<script>
Window.onload = function () {
var obtn = document.getElementById (' btn ');
var oul =document.getelementbyid (' list ');
var aLi =oul.getelementsbytagname (' Li ');
var on =true;
var onOff = true;
var onOff1 = false;
var onOff2 = false;
var onOff3 = false;
var len = 5;
Obtn.onclick = function () {
if (ON) {
for (Var i=0;i<len;i++) {
oul.innerhtml+= ' <li> ' +i+ ' </li> ';
}
On=false;
}
if (ONOFF) {
for (Var i=0;i<len;i++) {
ali[i].style.left= (0+i) *50+ ' px ';
if (I<math.floor (LEN/2)) {
Ali[i].style.top= (Math.floor (LEN/2)-i) *50+ ' px ';
}else{
Ali[i].style.top= (I-math.floor (LEN/2)) *50+ ' px ';
}
}
Onoff=false;
Onoff1=true;
}else if (onOff1) {
for (Var i=0;i<len;i++) {
ali[i].style.left= (0+i) *50+ ' px ';
ali[i].style.top= (0+i) *50+ ' px ';
if (I<math.floor (LEN/2)) {
ali[i].style.top= (0+i) *50+ ' px ';
}else{
Ali[i].style.left= (Math.floor (LEN/2)-(I-math.floor (LEN/2))) *50+ ' px ';
}
}
Onoff1=false;
Onoff2=true;
}else if (onOff2) {
for (Var i=0;i<len;i++) {
ali[i].style.left= (0+i) *50+ ' px ';
if (I<math.floor (LEN/2)) {
ali[i].style.top= (0+i) *50+ ' px ';
}else{
Ali[i].style.top= (Math.floor (LEN/2)-(I-math.floor (LEN/2))) *50+ ' px ';
}
}
Onoff2=false;
Onoff3=true;
}else if (ONOFF3) {
for (Var i=0;i<len;i++) {
ali[i].style.top= (0+i) *50+ ' px ';
if (I<=math.floor (LEN/2)) {
Ali[i].style.left= (Math.floor (LEN/2)-(I-math.floor (LEN/2))) *50+ ' px ';
}else{
ali[i].style.left= (i-2) *50+ ' px ';
}
}
Onoff3=false;
Onoff=true;
}
}
</script>
This article from "Handsome Handsome" blog, declined reprint!
innerHTML application-automatic generation of a V-shaped (Premium version)