js写一个“V”型字

来源：互联网发布：河西学院网络教学平台编辑：程序博客网时间：2024/06/08 09:22

2017年的第一篇，写个小应用，用原生js写的V型div，遇到一个小瓶颈是从小到上的div不知道怎么定位。后来，想了好久才明白。

贴上代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">        div{            position:absolute;            left:0;            top:0;            border:1px solid #ccc;            width:60px;            height:40px;            padding: 10px;        }    </style></head><body>    <!-- <div class="div2">final</div> --></body><script type="text/javascript"> function fnTurn(){    var aDiv = document.getElementsByTagName('div');    var str ='';    for(var i=0;i<30;i++){        str += '<div>' + i + '</div>'        document.body.innerHTML = str;     };    var j = 0;    for(var i=0;i<aDiv.length;i++){        if(i > aDiv.length /2){            aDiv[i].style.left = i * 20 +'px';             j = j + 2;            aDiv[i].style.top = i * 20 - j * 20 +'px';        }else{            aDiv[i].style.left = i * 20 +'px';             aDiv[i].style.top = i * 20 +'px';        }//20为每个div的padding值，可修改    }}fnTurn();</script></html>

实现的效果见下：

V型效果

0 0