纯javescript制作随机生成象数块小案例

今天做一个纯javescript制作的随机生成十个带颜色的像素块并且每500毫秒生成一次

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><script>//先创建一个div元素var d1 = document.createElement('div');//在把div元素添加到body中document.body.appendChild(d1);//给div动态添加id名var div = document.getElementsByTagName('div')[0];div.setAttribute('id','div');//给div元素添加宽高和背景颜色var dive = document.getElementById('div')dive.style.width='800px';dive.style.height='800px';dive.style.background='SlateGray';dive.style.margin='0 auto';//设置相对定位dive.style.position='relative';
//创建一个随机数方法
var tools = {getRandom:function(min, max) {min = Math.ceil(min);max = Math.floor(max);return Math.floor(Math.random() * (max - min)) + min;
//不含最大值，含最小值
}
}
//创建一个小盒子对象
function Box (parent,options){var options = options || {};this.width=options.width ||20;this.height=options.height ||20;this.background =options.background ||'yellow';this.div = document.createElement('div');console.log(dive);dive.appendChild(this.div);//调用小盒子样式设置方法this.into();}//小盒子样式设置 宽高 及位置
Box.prototype.into=function(){div = this.div;
div.style.width=20+'px';
div.style.height=20+'px';
div.style.background=this.background;
div.style.position='absolute';
}
//随机创建小盒子的位置
Box.prototype.random=function(){//用父盒子的宽度/小盒子的宽度-1）*小盒子宽度var x=tools.getRandom(0,dive.offsetWidth / this.height -1)*this.height;var y=tools.getRandom(0,dive.offsetHeight / this.height -1)*this.height;// console.log(x,y);this.div.style.left=x+'px';this.div.style.top=y+'px';}
var bos=[];//接受小盒子；//创建多个小盒子for(i=0;i<10;i++){var r = tools.getRandom(0,255);var g = tools.getRandom(0,255);var b = tools.getRandom(0,255);var box = new Box (parent,{background: 'rgb('+r+','+g+','+b+')'});bos.push(box)}
/*setInterval(function(){for (var i=0;i<bos.length;i++) {var box = bos[i];box.random();
}},500);*///改善刷新页面时方块回到起点位置setInterval(randomBox,500);randomBox();
function randomBox(){for (var i=0;i<bos.length;i++) {var box = bos[i];box.random();
}}
document.body.style.background='SteelBlue';
// var box = new Box(dive)
// box.random();</script>
</body>
</html>

纯javescript制作随机生成象数块小案例相关推荐

Python语言学习：Python随机生成那些事之随机生成使用方法、案例应用之详细攻略
Python语言学习:利用Python随机生成那些事之随机生成使用方法.案例应用之详细攻略目录案例应用 1.随机生成指定区间内的某一值案例应用 1.随机生成指定区间内的某一值使用说明:给定区域 ...
php 快递单号生成规则,Thinkphp 生成订单号小案例
Thinkphp 生成订单号小案例小伙伴们在日常的商城项目开发中,都会遇到订单号生成的问题,今天呢思梦PHP就带领大家去解读一下生成订单号的问题!首先,订单号我们要明确它有有3个性质:1.唯一性 2. ...
Vue制作todoList事件备忘录经典小案例
前言今天是10月1日国庆节,行走在大街小巷,处处洋溢着热烈喜庆的节日氛围,在这一天祝愿祖国繁荣昌盛,越来越强大.因国庆放假(本来周六这天有课),今天无聊看了看后台私信,看到了很对私我类似的消息: 很 ...
用javascript制作随机汉字打字练习小程序
这个是上一篇的续集.也是2020年年底的时候给银行妹写的小程序,对我来说已经没什么卵用了.但是,还是在CSDN里面留着吧,就像之前用python给那个叫xc的渣女写的转换器一样.于我是无用之物,但是发 ...
MATLAB使用AppDesigner制作测试界面的入门小案例
matlab的AppDesigner基本使用前几天搞了一个matlab的小的界面设计,使用到了其自带的工具AppDesigner,最近再使用有好些都忘记了,把一些基本的使用方式记录在案,如果有一些基 ...
Java 随机生成 “纯数字“、“纯字母“ 、“数字字母混合“ ID 并保持全局唯一
文章目录随机生成 "纯数字"."纯字母" ."数字字母混合" ID并保持全局唯一一.随机生成纯数字ID 二.随机生成纯字母ID 三.随机 ...
Python3制作类八音符的小游戏
导语 T_T突然发现N久以前我还做过一个系列??? 利用Python制作小游戏??? 好吧,既然做了,就有头有尾吧~~~ 本期我们将制作一个类似八音符的小游戏. 让我们愉快地开始吧~~~ 相关文件百 ...
c语言中定义密码为英文字母,请设计一个密码生成器，要求随机生成4组10位密码（C语言）...
请设计一个密码生成器,要求随机生成4组10位密码(密码只能由字母和数字组成),每一组必须包含至少一个大写字母,每组密码不能相同,输出生成的密码. #include #include #include ...
密码生成器c语言程序,请设计一个密码生成器，要求随机生成4组10位密码（C语言）...
请设计一个密码生成器,要求随机生成4组10位密码(密码只能由字母和数字组成),每一组必须包含至少一个大写字母,每组密码不能相同,输出生成的密码. #include #include #include ...

纯javescript制作随机生成象数块小案例

纯javescript制作随机生成象数块小案例相关推荐

最新文章

热门文章