js写一个“V”型字

最新推荐文章于 2020-03-25 12:39:19 发布

darcy24

最新推荐文章于 2020-03-25 12:39:19 发布

阅读量2.1k

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_34250472/article/details/53994768

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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型效果

darcy24

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
js写一个“V”型字

2017年的第一篇，写个小应用，用原生js写的V型div，遇到一个小瓶颈是从小到上的div不知道怎么定位。后来，想了好久才明白。贴上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> d
复制链接

扫一扫