关闭

js写一个“V”型字

标签: javascript
225人阅读 评论(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型效果

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1129次
    • 积分:43
    • 等级:
    • 排名:千里之外
    • 原创:3篇
    • 转载:0篇
    • 译文:0篇
    • 评论:3条
    文章分类
    文章存档