四个箭头 

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

 

posted @ 2017-11-09 15:06  小毛驴--  阅读(162)  评论(0)    收藏  举报