附图

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

     <style>

         #content{margin:20px auto 0px;}

         .d2{width:50px;height:50px;color:white;text-align: center;font-size:14px; background:red; line-height:50px; position:absolute; left:10px; top:40px;}

     </style>

     <script>

         window.onload = function () {

             var onOff = true;

             //获取body里面的所有div

             var d2 = $('content').getElementsByTagName('div');

             var arr = ['red','blue','black','green'];

             //生成100个div事件

             $('Div100').onclick = function(){

                 $('content').innerHTML = '';

                 if(onOff){

                     for(var i=0; i<100; i++){

                         $('content').innerHTML += '<div class="d2">'+i+'</div>';

                         d2[i].style.left = 10+(i*60)+'px';

                     }

                     onOff = true;

                 }

             }

             //每隔10个换行

             $('Div10').onclick = function(){

                 for(var i=0; i<100; i+=10){

                     for(var j=0; j<10; j++){

                         d2[i+j].style.left = 10+(j*60)+'px';

                         d2[i+j].style.top = 40+(i*6)+'px';

                     }

                 }

             }

             //每隔一个换色,4个换一次

             $('DivCol').onclick = function () {

                 for(var i=0; i<100; i+=4){

                     for(var j=0; j<4; j++){

                         d2[i+j].style.background = arr[j];

                     }

                 }

             }

             //生成V字DIV

             $('DivV').onclick = function () {

                 $('content').innerHTML = '';

                 for(var i=0; i<11; i++){

                     $('content').innerHTML += '<div class="d2">'+i+'</div>';

                     if(i<6){

                         d2[i].style.left = 10+(i*60)+'px';

                         d2[i].style.top = 40+(i*60)+'px';

                     }else{

                         d2[i].style.left = 10+(i*60)+'px';

                         d2[i].style.top = 400-((i-4)*60)+'px';

                     }

                 }

             }

             //生成倒V字DIV

             $('DivDv').onclick = function(){

                 $('content').innerHTML = '';

                 for(var i=0; i<11; i++){

                     $('content').innerHTML += '<div class="d2">'+i+'</div>';

                     if(i<6){

                         d2[i].style.left = 10+(i*60)+'px';

                         d2[i].style.top = 340-(i*60)+'px';

                     }else{

                         d2[i].style.left = 10+(i*60)+'px';

                         d2[i].style.top = 40+(i*60)-300+'px';

                     }

                 }

             }

         }

         function $(id){

             return document.getElementById(id);

         }

     </script>

 </head>

 <body>

 <input id="Div100"  type="button" value="生成100个DIV">

 <input id="Div10"  type="button" value="每10个DVI换行">

 <input id="DivCol" type="button"  value="每隔一个DIV换颜色">

 <input id="DivV"  type="button" value="生成V">

 <input id="DivDv"  type="button" value="生成倒V">

 <div id="content"></div>

 </body>

 </html>

JS随机生成100个DIV每10个换行(换色，生成V字和倒V)的更多相关文章

  1. java代码--------实现随机输出100个随机数，10行，0--到9的数字

    总结:妹纸不是那么会表述,如有不妥之处,请提出来 package com.sads; //杰伦的世界 //实现在0-100个数中,随机输出数每行10个数,也就是10行10列,这些数在0---到9之间 ...

  2. 生成100个Div

    <!doctype html><html><head><meta charset="utf-8"><title>无标题文 ...

  3. js 随机产生100个0~1000之间的整数

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 原生js，一些小应用（逢10进一，生成V字，多个div抖动）

    第一题:每隔10个div换一行.并且鼠标移入 改变opacity. <!DOCTYPE html> <html lang="en"> <head> ...

  5. 【three.js练习程序】随机生成100个方块

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. SQLServer如何快速生成100万条不重复的随机8位数字

    最近在论坛看到有人问,如何快速生成100万不重复的8位编号,对于这个问题,有几点是需要注意的: 1．    如何生成8位随机数,生成的数越随机,重复的可能性当然越小 2．    控制不重复 3．    ...

  7. JS随机生成不重复数据的代码分享

    JS随机生成不重复数据. 代码如下: <script> // 定义存放生成随机数的数组 var array=new Array(); // 循环N次生成随机数 for(var i = 0 ...

  8. JS练习--自动生成100个li

    点击按钮,自动生成100个li,红.黄.蓝.绿四种颜色的顺序显示出现在页面中 CSS: ;;} ul,li{list-style: none;} #ul1{position: relative;} # ...

  9. java代码--------随机输出100个随机数，要求每行10个数

    总结:不敢爱你么开口 package com.sads; ///实现随机输出100个数字,数字是0到9之间,每行输出10个 public class Wss { public static void ...

随机推荐

  1. Linux 启动顺序

    Linux 启动顺序:1. BIOS自检2. 运行系统内核并检测硬件3. 运行系统的第一个进程init4. init读取系统引导配置文件/etc/inittab中的信息进行初始化            ...

  2. Entity Framework：Code-First Tutorial开篇

    这个系列文章是关于Entity Framework Code-First的英文系列文章,内容不错,每篇一个主题知识点介绍,特转载过来 原文地址:http://www.entityframeworktu ...

  3. 3.Windows应急响应：蠕虫病毒

    0x00 前言 蠕虫病毒是一种十分古老的计算机病毒,它是一种自包含的程序(或是一套程序),通常通过网络途径传播, 每入侵到一台新的计算机,它就在这台计算机上复制自己,并自动执行它自身的程序.常见的蠕虫 ...

  4. PHP中空字符串、0、null、empty和false之间的关系

    原文来自:http://www.seayee.net/article/info_115.html

  5. python之02数据类型学习

    参考链接:http://www.cnblogs.com/yuanchenqi/articles/5782764.html python的数据类型有:Number.Boolean.String .Lis ...

  6. ios一个自定义的下拉多选菜单

    前段时间项目刚好要做到条件筛选菜单,正好找到一些别人写的,结合自己实际需求进行优化修改,一个实用的多条件筛选菜单,根据其他的下拉进行一些改进. 点击后返回点击文字显示 github地址:https:/ ...

  7. Java基础--常用API--java.lang.Object

    一.简述 1.Object类是所有类的父类,即直接或间接的继承java.lang.Object类.省略了extends Object. 2.方法 (1)protected native Object ...

  8. 黑匣子_NOI导刊2010提高（06） Splay Tree

    题目描述 Black Box是一种原始的数据库.它可以储存一个整数数组,还有一个特别的变量i.最开始的时候Black Box是空的．而i等于0.这个Black Box要处理一串命令. 命令只有两种: ...

  9. B.Grid with Arrows-The 2019 ICPC China Shaanxi Provincial Programming Contest

    BaoBao has just found a grid with $n$ rows and $m$ columns in his left pocket, where the cell in the ...

  10. 再谈布局，栅栏式自适应布局的学习和实现(calc自适应布局)

    布局真的很重要.一个不好的布局后期会有很多很多的bug,就像是建房子的地基一样. 首先,再一次地圣杯布局的学习,来源于该教程: http://www.jianshu.com/p/f9bcddb0e8b ...