java满天星随机变颜色_js实现随机div颜色位置 类似满天星效果
本文实例为大家分享了js实现随机div颜色位置的具体代码,供大家参考,具体内容如下
效果如下:
代码如下:
MTX
function init(){
randomDiv();//初始的随机
}
setInterval(randomDiv,100);//函数名 毫秒——过多长时间运行一次这个函数
function randomDiv(){
for (var i=1;i<11;i++){//为定义的各个div块一一设置随机属性
var divs=document.getElementById("div"+i);//divs作为每次循环的数据暂存
var point=divPosition();//point作为位置的数据暂存
cloneObj(divs.style,{
left:point.left,
top:point.top,
backgroundColor:divColor()
})
}
}
function cloneObj(target,source){
for (var key in source){
target[key]=source[key];
}
}
//div位置随机
function divPosition(elemWidth,elemHeight){
if(!elemWidth) elemWidth=50;
if(!elemHeight) elemHeight=50;
var left=Math.random()*(document.documentElement.clientWidth-elemWidth)+"px";
//屏幕宽度减去本来50ox宽度 的随机与左面的距离
var top=Math.random()*(document.documentElement.clientHeight-elemHeight)+"px";
//屏幕高度减去本来50ox高度 的随机与上面的距离
return {left:left,top:top};//返回 与左面的距离 与上面的距离
}
//背景颜色随机
function divColor(){
var col="#";//这个字符串第一位为# 颜色的格式
for(var i=0;i<6;i++){
col+=parseInt(Math.random()*16).toString(16);
//rondom*16后的随机值即为0-1*16==0-16; toString(16)为转化为16进制
}
return col;//最后返回一个七位的值 格式即为#nnnnnn 颜色的格式
}
总结:
这个小项目的实现主要是基于了Js中的随机函数Math.random():
将此案例分为入口函数init(),主要在这个函数中加入了randomDiv()————随机div这个函数。
randomDiv()函数中又由三大块组成,分别为定义divs:即为这10个div块进行一一的赋值做准备,在这个for循环中一一为divs代表的div块赋予随机函数给他们的随机值。以及var定义的这两个变量去取我们下面介绍的divColor、divPosition两个函数中的值。
cloneObj()函数的作用是:
* 1、遍历源对象中的所有关键字,关键字定义的变量是key 。
* 2、设置目标对象上面增加关键字key,并且设置该关键字的值是源对象该关键字的值 。
* 3、返回目标对象。
然后再说一下 divColor()函数,var col="#";定义这个col字符串用于存我们的颜色格式,下面的rondom()函数即为我们的颜色随机赋值,利用到了16进制,最后返回一个七位的值 格式即为#nnnnnn 颜色的格式。
位置随机函数为divPosition(elemWidth,elemHeight):
if(!elemWidth) elemWidth=50; if(!elemHeight) elemHeight=50;
这两行的作用是将我们的初始div的高度宽度引入,以便我们在实现随机位置的时候不会出现div块超出我们浏览器窗口的情况。
document.documentElement.clientWidth-elemWidth 浏览器宽度-50
document.documentElement.clientHeight-elemHeight 浏览器高度-50
这两局话即实现上述描述的这个过程。
最后返回 与左面的距离 与上面的距离。
setInterval(randomDiv,100);//函数名 毫秒——过多长时间运行一次这个函数。
java满天星随机变颜色_js实现随机div颜色位置 类似满天星效果相关推荐
- Java实现字数统计(中文英文韩文日文混合),类似word效果
因为业务需求,需要一个字数统计的功能,其实这个功能也不难,但是因为这边涉及到中文,英文, 日文和韩文的混合文本,所以不能用一般的统计方法,在网上搜索了一些, 然后综合了一下自己写了个支持混合统计的工具 ...
- Java背景颜色怎么设成随机的_JS实现随机改变背景颜色
JS实现随机改变背景颜色 JS实现随机改变背景颜色 使用Js实现随便点击页面某位置就能改变页面背景颜色的功能 function changeBg(){//改变背景颜色的函数 var bgColor=& ...
- 用java在画布中绘制六个随机英文字母
用java在画布中绘制六个随机英文字母,颜色,位置随机. package test; import java.awt.Canvas; import java.awt.Color; import jav ...
- java 正负随机_如何产生一个随机的[0, n)范围内的Short值
背景 最近在做一个Java的随机对象生成器.需要随机产生一些在[0, n)范围内的short值. 坑 很多人可能会说,这有什么难的,我刚学编程的时候就会了.然后给出下面代码. short value ...
- ColorCode是一个在线随机取色工具,可以随机获取十六进制、RGB、HSl等颜色。
ColorCode是一个在线随机取色工具,可以随机获取十六进制.RGB.HSl等颜色. ColorCode 彩蛋爆料直击现场 ColorCode是一个在线随机取色工具,可以随机获取十六进制.RGB.H ...
- java随机生成一个号码_Java 随机生成任意组电话号码过程解析
需求说明 要求根据用户输入,生成相应组数的电话号码 实现思路 1.通过百度,获取对应真实世界中电话号码的头三位数 2.采用Math.random()方法,生成电话号码的后八位数 代码内容 随机生成任意 ...
- java 随机四位数字组合_随机组合生成好听的名字(java)
前言 初学java,今天学到了字符串数组,于是乎:利用数组+Random(系统随机生成数字)组合生成随机好听的名字: 如图 图片.png 需求:设置两个数组分别保存姓和名然后利用随机数组合 思考:利用 ...
- java 获取长度为5的随机字符串,字符串由随机的5个大小写字母组成
获取长度为5的随机字符串,字符串由随机的5个大小写字母组成 定义String getStr()方法 功能描述: 获取长度为5的随机字符串,字符串由随机的5个大小写字母组成 在main方法中调用上述方法 ...
- Java黑皮书课后题第3章:**3.4(随机月份)编写一个随机产生1和12之间整数的程序,并根据数组1,2,3...显示对应的月份
**3.4(随机月份)编写一个随机产生1和12之间整数的程序,并根据数组1,2,3...显示对应的月份 题目 题目描述 破题 代码 如何理解产生随机数 题目 题目描述 **3.4(随机月份)编写一个随 ...
最新文章
- Installation error: INSTALL_FAILED_VERSION_DOWNGRADE Android
- 3157: 国王奇遇记 3516: 国王奇遇记加强版 - BZOJ
- linux设备树例程,iTOP-iMX6-设备树内核-实时时钟RTC以及Linux-c测试例程
- 解决maven dependencies xxx not found
- HDC2020开发者大会鸿蒙,华为开发者大会HDC 2020将于9月10日开启 鸿蒙OS 2.0亮相
- python安装anaconda ubuntu_Ubuntu 16.4 安装anaconda 详细教程
- php 同时导出两个文件_使用orangehill/iseed自动反向生成数据填充文件
- mysql命令成功数值不变_MySQL基础知识精华汇总_3(mysql基础命令操作)
- caffe之学习曲线可视化
- CUDA: (十一) NVIDIA 2D Image And Signal Performance Primitives (NPP) 初探
- 推荐股票理财博客-徐小明
- 日本流行语------收录
- Java 高并发编程详解 17.0 Active Object 模式
- 相对地址和绝对地址的理解
- 高通平台如何使用QPST抓DUMP
- 7款易上手C语言编程软件推荐
- JAVA中Action层, Service层 ,model层 和 Dao层的功能区分
- [ Office 365 开发系列 ] 开发模式分析
- 从0到1—JAVA大数据架构师之路
- DSP28335通过按键启动LED闪烁功能