V字形 

<!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;
    oBtn.onclick = function () {
         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>'
     }
          conTent.innerHTML = str;
    }
 }
</script>
</head>
<body>
<input type="button" name="" value="V字形">
<section id="div1"></section>
</body>
</html>

 

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