js实现随机div颜色位置 类似满天星效果
本文实例为大家分享了js实现随机div颜色位置的具体代码，供大家参考，具体内容如下
效果如下：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MTX</title>
<style>
div{width: 50px;height: 50px;position: absolute;}
</style>
</head>
<body>
<!--//定义10个div，用于随机div的属性赋值-->
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
<div id="div6"></div>
<div id="div7"></div>
<div id="div8"></div>
<div id="div9"></div>
<div id="div10"></div>
<script>
init();//入口函数
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 颜色的格式
}
</script>
</body>
</html>
总结：
这个小项目的实现主要是基于了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);//函数名 毫秒——过多长时间运行一次这个函数。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JS控制div跳转到指定的位置的几种解决方案总结
总结一下自己在写这个需求遇到的问题,相信大家应该是经常遇到的.即要求滚轮滚动到指定的位置.先看下基本的解决方案. 1.给链接a加个#的方式来实现跳转.(锚点方法)这里直接贴下代码: <div id="container"> <a href="#div1">div1</a> <a href="#div2">div2</a> <a href="#div3">d
-
js判断鼠标位置是否在某个div中的方法
本文实例讲述了js判断鼠标位置是否在某个div中的方法.分享给大家供大家参考,具体如下: div的onmouseout事件让div消失时,会出现这样的情况,就是当鼠标移至div中的其它内容时,此时也判定为离开div,会触发 onmouseout事件,这样div中的内容就不能操作了.解决的办法是当触发onmouseout事件时,先判断鼠标是否在div内,如果在,说明鼠 标并没有离开div,就不删除div,否则,删除之.OK,现在问题解决了. 就是找到该div左上角和右下角坐标,判断鼠标的坐标是否在
-
JavaScript满天星导航栏实现方法
说明 分享一个满天星导航栏的效果,代码不多,但效果挺好看,先看看效果图吧. 解释 实现这个效果,需要掌握的知识不用很多,知道简单的CSS,会用JS 获取元素, 能绑定事件基本就足够了. 好的,我们直接来看代码,注释已经写的很详细了,不想看有注释的,点这里点击预览. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <style> b
-
js实现随机div颜色位置 类似满天星效果
本文实例为大家分享了js实现随机div颜色位置的具体代码,供大家参考,具体内容如下 效果如下: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>MTX</title> <style> div{width: 50px;height: 50px;position: absolute;}
-
JS实现网页Div层Clone拖拽效果
本文实例讲述了JS实现网页Div层Clone拖拽效果.分享给大家供大家参考.具体如下: 这是一个层拖动,网页上的拖拽Clone效果实例,两个层可在鼠标的拖动下,任意改变位置,智能判断层级,也就是智能判断自身是否处于最高层,最高处的层是不会被其它层遮挡的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-draw-box-clone-style-codes/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM
-
js循环改变div颜色具体方法
在使用javascript过程中,想循环遍历一个数组,经常使用的语法有两种: 复制代码 代码如下: for (var i; i < array.length; i++) { statement; } for (var i in array) { statement; } 这两种用法看起来能做同样的事情,但实际上两个循环的循环次数一般是不一样的.源码如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <st
-
JS+CSS实现DIV层的展开、收缩效果
本文为大家分享的第一个实例:JS控制DIV层的展开.收缩效果. <html> <head> <title>CSS+JS实现一个DIV层的展开/折叠效果</title> <style> * { margin:0; padding:0;} body { text-align:center; font:75% Verdana, Arial, Helvetica, sans-serif;} h1 { font:125% Arial, Helvetica,
-
js实现div拖动动画运行轨迹效果代码分享
本文实例讲述了js div拖动动画运行轨迹效果.分享给大家供大家参考.具体如下: 这是一款基于js实现的div拖动动画运行轨迹效果源码,是一款原生js div拖动效果制作鼠标拖动div动画运行轨迹效果代码.可以选择[记住轨迹]与[不记住轨迹]两种拖动显示模式,从而显示出不同的拖动效果. 运行效果图: -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能
-
js实现点击按钮后给Div图层设置随机背景颜色的方法
本文实例讲述了js实现点击按钮后给Div图层设置随机背景颜色的方法.分享给大家供大家参考.具体如下: 给myDiv设置随机背景颜色,用随机颜色代码赋值给DIV的背景颜色 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312"/> <title>js设置随机颜色 <
-
js实现点击生成随机div
本文实例为大家分享了js实现点击生成随机div的具体代码,供大家参考,具体内容如下 描述: 鼠标点击页面,在哪里点击就在那个位置创建一个div,宽高50, 颜色随机,div在鼠标点击的正中间 效果: 实现: js: var Method=(function () { return { EVENT_ID:"event_id", loadImage:function (arr) { var img=new Image(); img.arr=arr; img.list=[]; img.num
-
js从10种颜色中随机取色实现每次取出不同的颜色
昨天在做js 从10种颜色中随机取色,并每次取出的颜色不同的时候,考虑了很多,最终用如下来实现: 复制代码 代码如下: var colorList = ["#FFFF99","#B5FF91","#94DBFF","#FFBAFF","#FFBD9D","#C7A3ED","#CC9898","#8AC007","#CCC007"
-
JS简单实现DIV相对于浏览器固定位置不变的方法
本文实例讲述了JS简单实现DIV相对于浏览器固定位置不变的方法.分享给大家供大家参考,具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <html> <head> <title>Anchor Properties</title> <meta http-equiv="Content-Type" content=&q
-
js实现随机圆与矩形功能
本文实例为大家分享了js实现随机圆与矩形功能的具体代码,供大家参考,具体内容如下 1.节点操作版 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l