zoukankan      html  css  js  c++  java
  • 生成100个Div

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    </head>
    <style>
    #div1{position:relative;}
    #div1 div{50px;height:50px;position:absolute;font-size:30px;color:#fff;text-align:center;line-height:50px;}
    </style>
    <body>
    <script>

    window.onload = function()
    {

    var oBtn = document.getElementById('btn1');
    var oDiv = document.getElementById('div1');
    var arrColor = ['red','green','blue'];
    var str = '';
    oBtn.onclick = function()
    {
    for(var i=0;i<100;i++)
    {
    //left
    //0*60 1*60 2*60
    //0*60 1*60 2*60
    //top
    //0 0 0 0 0 0 (0-9)/10 不大于1的小数
    //1*60 60 60 (10-19)/10 不大于 2 的小数
    //2*60
    //3*60

    str += '<div style="left:'+(i%10*60)+'px;top:'+(Math.floor((i/10))*60)+'px;background:'+arrColor[i%arrColor.length]+';">'+(i+1)+'</div>';
    };

    oDiv.innerHTML = str;
    };

    }

    </script>
    <input type="button" id="btn1" value="生成一百个Div" >

    <div id="div1">

    </div>

    </body>


    </html>

  • 相关阅读:
    多播委托和匿名方法再加上Lambda表达式
    委托
    从警察抓小偷看委托
    StringBuilder
    C#修饰符详解
    数据结构与算法之队列
    数据结构与算法之栈
    win10重复安装
    网络编程基础
    PrintPreviewControl
  • 原文地址:https://www.cnblogs.com/gyc51/p/8316083.html
Copyright © 2011-2022 走看看