附图

 <!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. contentType和dataType的区别

    contentType: 告诉服务器,我要发什么类型的数据 dataType:告诉服务器,我要想什么类型的数据,如果没有指定,那么会自动推断是返回 XML,还是JSON,还是script,还是Stri ...

  2. 【Strtus2】

    基于mvc设计模式的web应用框架!strtus2作为控制器来建立模型与视图数据的交互.

  3. java线程基础知识----java daemon线程

    java线程是一个运用很广泛的重点知识,我们很有必要了解java的daemon线程. 1.首先我们必须清楚的认识到java的线程分为两类: 用户线程和daemon线程 A. 用户线程: 用户线程可以简 ...

  4. 如何配置使用Dnsmasq

    此文已由作者赵斌授权网易云社区发布 欢迎访问网易云社区,了解更多网易技术产品运营经验. 一.前言 最近为了测试内容分发网络(Content Delivery Network,简称 CDN)CDN在调用 ...

  5. java排序算法（持续更新）

    package exception; import java.util.Arrays; public class Sort { public static void main(String[] arg ...

  6. GoWeb开发_Iris框架讲解（四）：Iris框架设置操作

    路由组的使用 在实际开发中,我们通常都是按照模块进行开发,同一模块的不同接口url往往是最后的一级url不同,具有相同的前缀url.因此,我们期望在后台开发中,可以按照模块来进行处理我们的请求,对于这 ...

  7. uva 10817（数位dp）

    uva 10817(数位dp) 某校有m个教师和n个求职者,需讲授s个课程(1<=s<=8, 1<=m<=20, 1<=n<=100).已知每人的工资c(10000 ...

  8. MCP|DYM|Quantitative mass spectrometry to interrogate proteomic heterogeneity in metastatic lung adenocarcinoma and validate a novel somatic mutation CDK12-G879V (利用定量质谱探究转移性肺腺瘤的蛋白质组异质性及验证新体细胞突变)

    文献名:Quantitative mass spectrometry to interrogate proteomic heterogeneity in metastatic lung adenoca ...

  9. ByteBuffer flip描述

    # 关于flip ByteBuffer 的filp函数, 将缓冲区的终止位置limit设置为当前位置, 缓冲区的游标position(当前位置)重设为0. 比如 我们有初始化一个ByteBuffer ...

  10. 启动windows .net 3.5 功能

    近期给window 2008 版本安装loadrunner ,发现还需要用户自己打开windows 的 .net 3.5 功能,所以在这里记录一下步骤 激活