<!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>