附图

 <!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. Spring入门第二十二课

    重用切面表达式 我们有的时候在切面里面有多个函数,大部分函数的切入点都是一样的,所以我们可以声明切入点表达式,来重用. package logan.study.aop.impl; public int ...

  2. java的大小端和转换

    一直以为大小端针对的bit的顺序,今天才知道:大小端的分度值是 byte,即每一个byte都是按照正常顺序,但是byte组装成一个int 或者是 long等时每个byte的摆放位置不同. 测试代码: ...

  3. PHP中ob_start()函数的用法

    ob_start()函数用于打开缓冲区,比如header()函数之前如果就有输出,包括回车/空格/换行/都会有"Header had all ready send by"的错误,这 ...

  4. 介绍一款“对话框”组件之 “artDialog”在项目中的使用

    在实际开发项目中经常会用到对话框组件,提示一些信息.其实有很多,例如:在项目中常用到的“Jquery-UI.Jquery-EasyUI”的.Dialog,他们也很强大,Api文档也很多.今天就介绍一款 ...

  5. Good Bye 2014 B. New Year Permutation（floyd ）

    题目链接 题意:给n个数,要求这n个数字小的尽量放到前面,求一个最小的. 给一个矩阵s[i][j]==1,表示位置 i 的数字可以和 位置 j 的数字交换. 分析: 刚开始用的是3个循环,每次都找一个 ...

  6. 痞子衡嵌入式：恩智浦i.MX RTxxx系列MCU特性介绍（2）- RT685EVKA性能实测(Dhrystone)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是恩智浦i.MX RTxxx系列MCU的性能. 在前面的文章 i.MXRTxxx微控制器概览 里,痞子衡给大家简介过恩智浦半导体在2018 ...

  7. Glance代码分析

    V2版本的glance-api采用Proxy的方式来构建对象(对象套对象),有点类似装饰器模式,包裹的顺序是 Auth(外层) -> Notifier -> Policy -> Qu ...

  8. [CentOS7] at, bash, cron, anacron

    声明:本文主要总结自:鸟哥的Linux私房菜-第十五章.例行性工作排程(crontab),如有侵权,请通知博主 at => /var/spool/at /etc/at.allow, /etc/a ...

  9. ASP.NET控件之RegularExpressValidator控件

    作用:对Textbox或者其他输入框进行正则验证: 属性:ControlToValidate:要验证的控件: ErrorMessage:错误提示信息: ValidationExpression:正则表 ...

  10. Mysql缓存的配置和使用

    在mysql服务器高负载的情况下,必须采取一种措施给服务器减轻压力,减少服务器的I/O操作.一般采用的方法是优化sql操作语句,优化服务器的配置参数,从而提高服务器的性能.Mysql使用了几种内存缓存 ...