js写一个“V”型字

原创 2017年01月03日 15:19:52

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

V8 js引擎的一个简单介绍

随着最近 AJAX 技术的兴起,JavaScript 现在已经变成了实现基于 web 的应用程序(例如我们自己的 Gmail)的核心技术。JavaScript 程序从聊聊几行变成数百 KB 的代码。J...

.NET当中的另一个V8 JS引擎 Wrapper

前言 之前写过一篇文章,是关于在.NET中,使用v8sharp作为v8Engine的Wraper, 从而在.NET中与Javascript互操作。不过v8Sharp有几个很大的问题,第一,在...

Vue.js的小片段——Vue中一个组件的v-for(props,is="todo-item")

注意这里的 is="todo-item" 属性。这种做法在使用 DOM 模板时是十分必要的,因为在  元素内只有  元素会被看作有效内容。这样做实现的效果与  相同,但是可以避开一些潜在的浏览器解析错...
  • Ludmila
  • Ludmila
  • 2017年11月18日 14:44
  • 65

一个js写的日历控件

  • 2016年07月01日 15:25
  • 5KB
  • 下载

自己写的一个小JS类库

  • 2011年08月17日 15:20
  • 43KB
  • 下载

js实现点击按钮自动生成V字形,可连续点击四次

效果图大致如下: 代码如下:   lang="en">     charset="UTF-8">   自动生成V...

一个用JS写的很好用的树

  • 2010年04月06日 09:19
  • 58KB
  • 下载

linux应用项目(二)摄像头(2)从零写一个V4L2虚拟摄像头驱动之详细分析

一、框架搭建 内核在V4l2-dev.c (linux-3.4.2\drivers\media\video) 中提供了V4L2的核心函数。我们再来看一下整体框架: 我们要做的是写个硬件相关驱动,...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js写一个“V”型字
举报原因:
原因补充:

(最多只允许输入30个字)