<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- <script type="text/javascript" src="js/jquery-1.12.1.js"></script>
--><title></title>
<style>
div {
width: 50px;
height: 50px;
color: white;
background: red;
line-height: 50px;
font-size: 28px;
font-weight: bold;
position: absolute;
text-align: center;
}
#div1 {
position: relative;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementsByTagName('input')[0],
conTent = document.getElementById('div1'),
str = '',
top,
left,
len = 5;
flag = 0;
oBtn.onclick = function () {
// 箭头在下
if (flag == 0) {
str = '';
for (var i = 0; i < len; i++) {
left = i *50 +'px';
if (i<len/2) {
top = i *50 +'px';
} else {
top = (len-i -1)*50 +'px';
}
str +='<div style="top:'+top+';left:'+left+'">' +i+ '</div>'
}
flag ++;
}
// 箭头在右
else if(flag == 1){
str = '';
for (var i = 0; i < len; i++) {
top = i*50 + 'px';
if (i<len/2) {
left = i*50 +'px';
} else {
left = (len - i -1)*50 +'px';
}
str +='<div style="top:'+top+'; left:'+left+'">'+ i +'</div>'
}
flag ++;
}
// 箭头在左
else if(flag == 2){
str = '';
for (var i = 0; i < len; i++) {
top = i*50 +'px';
if (i<len/2) {
left = ((len-1)/2-i)*50 +'px';
} else {
left = (i-(len-1)/2)*50 + 'px';
}
str += '<div style="top:'+top+'; left: '+left+'">'+i+'</div>'
}
flag ++;
}
// 箭头在上
else if (flag == 3) {
str = '';
for (var i = 0; i < len; i++) {
left = i*50 +'px';
if (i<len/2) {
top = ((len-1)/2 - i)*50 + 'px';
}
else {
top =(i-(len-1)/2)*50 +'px';
}
str += '<div style="left:'+left+';top:'+top+';">'+i+'</div>'
}
flag = 0;
}
conTent.innerHTML = str;
}
}
</script>
</head>
<body>
<input type="button" name="" value="V字形">
<section id="div1"></section>
</body>
</html>
