附图

 <!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. Java基础之cmd入门操作笔记

    前提:jdk已安装且环境变量配置成功,参考上文jdk 安装及环境变量配置 入门操作步骤: 1.打开记事本或者notepad,编写Abc代码,具体如下: public class Abc{    pub ...

  2. 【机器学习】主题模型（二）：pLSA和LDA

      -----pLSA概率潜在语义分析.LDA潜在狄瑞雷克模型 一.pLSA(概率潜在语义分析) pLSA:    -------有过拟合问题,就是求D, Z, W pLSA由LSA发展过来,而早期L ...

  3. 【转】lucene4.3.0 配置与调试

    lucene4.3.0 配置与调试 demo lucene的最新版本是4.3.0, http://www.apache.org/dyn/closer.cgi/lucene/java/4.3.0 luc ...

  4. C++开源库(一) ----log4cpp详解

    我们在写程序的时候通常会希望将一些信息记录下来,方便我们进行日后的一些信息跟踪,错误排查等等.比如:我们在进行数据库操作的时候,我们通常希望知道现在是程序的哪一部分进行了数据库的操作,所以我们会记录下 ...

  5. Java面向对象的三大特性 继承

    继承是类与类的一种关系,是“is a"关系  子类拥有父类的属性和方法,private除外 class 子类 extends 父类   方法的重写 调用方法时会优先调用子类的方法 重写时,返 ...

  6. Delphi Runtime Library在哪里？

    Delphi Runtime Library是Delphi的运行时库,里面包含了大部分Delphi库的代码,这些库代码在哪里呢?其实正常安装完Dephi之后,在它的安装目录下面!下面我以我的Delph ...

  7. jq写的上拉刷新

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 洛谷P1979 华容道（70分 暴力）

    P1979 华容道 题目描述 [问题描述] 小 B 最近迷上了华容道,可是他总是要花很长的时间才能完成一次.于是,他想到用编程来完成华容道:给定一种局面, 华容道是否根本就无法完成,如果能完成, 最少 ...

  9. 洛谷P1311 选择客栈

    P1311 选择客栈 题目描述 丽江河边有n 家很有特色的客栈,客栈按照其位置顺序从 1 到n 编号.每家客栈都按照某一种色调进行装饰(总共 k 种,用整数 0 ~ k-1 表示),且每家客栈都设有一 ...

  10. 导入别的类中的bean

    @Configuration class CommonContext { @Bean public MyBolt myBolt() { return new MyBolt(); } } ... @Co ...