附图

 <!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. jquery 简单入门

    例:GridView

  2. Dijkstra 路径规划 C#

    示例无向图如下:(起始点为v0) 邻接矩阵为: 注意:其中没有连接的边和自己到自己的点权值用10000表示. 代码: static void Main(string[] args) { , , , , ...

  3. Windows10安装node.js，vue.js以及创建第一个vue.js项目

    [工具官网] Node.js : http://nodejs.cn/ 淘宝NPM: https://npm.taobao.org/ 一.安装环境 1.本机系统:Windows 10 Pro(64位)2 ...

  4. redis命令集

    查看使用运行服务:ping 关闭服务的连接:quit 切换数据库:select index 连接: redis-cli -h -a myPassword 查看密码: config get requir ...

  5. Exceptionless - .Net Core开源日志框架

    Exceptionless - .Net Core开源日志框架 作者:markjiang7m2 原文地址:https://www.cnblogs.com/markjiang7m2/p/11020140 ...

  6. smix到底是个啥？Perl的正则表达式匹配模式

    最近在研究一个perl项目,临时学习了一下perl语法,强行看项目源码.因为总是见到各种正则表达式后面接smxi之类,虽然知道是匹配模式,但脑子里毫无概念.所以特地去学习了一下. 以上为背景. Per ...

  7. jmeter - 录制app接口

    准备: 1.手机 2.wifi 3.Jmeter   步骤: 1.Jmeter->文件->Template    2.手机设置代理 端口:8888:电脑的ip,如下图设置 3.点击启动   ...

  8. 我的省选 Day -11

    Day -11 上了一天的文化课,晚上才来到机房(神秘的一天.. 班里前一半的JuLao们都去参加省质检的同步赛了, 然而我太菜,早就跌到班级的中下下了(所以没得参加.. 所以今天上课时特别尴尬,班级 ...

  9. 1、gitlab的理论知识

    2.1 svn与git对比 . svn git 分布式 不是 是 在线阅读 不支持 不仅支持,而且可以在线编辑 存储方式 按文件 按元数据 完整性 一般 优 离线工作 日志都没法看 完全没问题 分支 ...

  10. Vue中的指令（听博主说总结的很好）

    指令[重点] 作用:简化Dom操作 参考:https://cn.vuejs.org/v2/api/#%E6%8C%87%E4%BB%A4 特点: 1.都是以v-开头 2.除了插值表达式,其它都写在标签 ...