JS随机生成100个DIV每10个换行(换色,生成V字和倒V)
附图
<!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)的更多相关文章
- java代码--------实现随机输出100个随机数,10行,0--到9的数字
总结:妹纸不是那么会表述,如有不妥之处,请提出来 package com.sads; //杰伦的世界 //实现在0-100个数中,随机输出数每行10个数,也就是10行10列,这些数在0---到9之间 ...
- 生成100个Div
<!doctype html><html><head><meta charset="utf-8"><title>无标题文 ...
- js 随机产生100个0~1000之间的整数
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 原生js,一些小应用(逢10进一,生成V字,多个div抖动)
第一题:每隔10个div换一行.并且鼠标移入 改变opacity. <!DOCTYPE html> <html lang="en"> <head> ...
- 【three.js练习程序】随机生成100个方块
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- SQLServer如何快速生成100万条不重复的随机8位数字
最近在论坛看到有人问,如何快速生成100万不重复的8位编号,对于这个问题,有几点是需要注意的: 1. 如何生成8位随机数,生成的数越随机,重复的可能性当然越小 2. 控制不重复 3. ...
- JS随机生成不重复数据的代码分享
JS随机生成不重复数据. 代码如下: <script> // 定义存放生成随机数的数组 var array=new Array(); // 循环N次生成随机数 for(var i = 0 ...
- JS练习--自动生成100个li
点击按钮,自动生成100个li,红.黄.蓝.绿四种颜色的顺序显示出现在页面中 CSS: ;;} ul,li{list-style: none;} #ul1{position: relative;} # ...
- java代码--------随机输出100个随机数,要求每行10个数
总结:不敢爱你么开口 package com.sads; ///实现随机输出100个数字,数字是0到9之间,每行输出10个 public class Wss { public static void ...
随机推荐
- sql 删除重复数据保留一条
--创建测试表 CREATE TABLE TEST ( DEPTNO ), DNAME ), LOC ) ); --插入测试数据 , 'test1', 'test2'); , 'test1', 'te ...
- Entity Framework Code-First(9.8):DataAnnotations - Column Attribute
DataAnnotations - Column Attribute: Column attribute can be applied to properties of a class. Defaul ...
- 7.27实习培训日志-Oracle SQL(三)
Oracle SQL(三) 视图 特性 简单视图 复杂视图 关联的表数量 1个 1个或多个 查询中包含函数 否 是 查询中包含分组数据 否 是 允许对视图进行DML操作 是 否 CREATE [OR ...
- 39、生鲜电商平台-redis缓存在商品中的设计与架构
说明:Java开源生鲜电商平台-redis缓存在商品中的设计与架构. 1. 各种计数,商品维度计数和用户维度计数 说起电商,肯定离不开商品,而附带商品有各种计数(喜欢数,评论数,鉴定数,浏览数,etc ...
- 【java数据类型和mysqk数据类型对照表】
java mysql 数据类型对照 类型名称 显示长度 数据库类型 JAVA类型 JDBC类型索引(int) 描述 VARCHAR L+N VARCHAR java.lan ...
- .net Core命令行,Json配置
创建.netCore控制台 NuGet :Microsoft.AspNetCore.All static void Main(string[] args) { var builder = new Co ...
- 51nod1091(贪心)
题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1091 题意:中文题诶- 思路:贪心: 我们先将数据按照左端点 ...
- jsp内置对象request的使用方法
<%@page import="java.text.SimpleDateFormat"%> <%@page import="java.util.Date ...
- dorado开发模式下实现动态查询
使用dorado开发模式,我们可以实现以下开发技巧 开发技巧1.实现动态查询功能: 1. 查询按钮的onClick事件中写入: datasetEmployee.parameters().setValu ...
- 洛谷P1318 积水面积
题目描述 一组正整数,分别表示由正方体叠起的柱子的高度.若某高度值为\(x\),表示由\(x\)个正立方的方块迭起(如下图,\(0<=x<=5000\)).找出所有可能积水的地方(图中蓝色 ...