js实现类似满天星的随机div颜色位置效果

本文的例子分享了js实现随机div颜色位置的具体代码，供大家参考。具体内容如下

效果如下：

代码如下：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title MTX/title style div { width : 50px；高度： 50px；绝对位置：}/style/head dy！-//定义10 div，随机div的属性赋值-div id=' div 1 '/div id=' div 2 '/div id=' div 3 '/div id=' div 4 '/div id=' div 5 '/div id=' div 6 '/div id=' div 7 '/div id=' div 8//入口函数init(){ randomDiv()；//初始随机} setInterval(randomDiv，100)；//函数名毫秒——这个函数函数randomDiv(){ for(var I=1；i11I ){//为每个定义的div块设置随机属性vardivs=document . getelementbyid(' div ' I)；//div暂时存储为每个周期的数据。var point=div position()；//point作为临时存储cloneobj的位置的数据(divs.style，{left:point.left，top:point.top，backgroundcolor : div color()})} } function cloneobj(target，source){ for(source中的var key){ target[key]=source[key]}//div position random function div position(elem宽度，elem高度){if(！elemWidth)elemWidth=50；if(！elem h8)elem h8=50；var left=math . random()*(document . document element . client width-elemWidth)' px '；//屏幕宽度减去原始50ox宽度左侧的随机距离。var top=math . random()*(document . document element . client height-elem h8)' px '；//屏幕高度减去从原始50ox高度到顶部return {left:left，top:top}的随机距离；//返回左侧距离和顶部距离}//随机背景色函数div color(){ var col=' # '；//这个字符串的第一位是# color for的格式(var I=0；i6；I){ col=ParSeint(Math . random()* 16)。toString(16)；//rondom*16之后的随机值为0-1 * 16==0-16；ToString(16)转换为十六进制} return col//最后，返回一个七位值格式，格式为# nnnnnn color }/script/body/html summary:

这个小项目的实现主要基于Js中的随机函数Math.random():

这种情况下分为入口函数init()，随机div () ——3354随机div主要添加到这个函数中。

randomDiv()函数由三个块组成，它们为定义Div做准备，也就是说，为10个div块逐个赋值。在这个for循环中，div表示的div块被随机函数赋予随机值。以及var定义的两个变量，取下面介绍的divColor和divPosition函数中的值。

函数的作用是：

* 1.遍历源对象中的所有关键字。关键字定义的变量是关键。* 2.向目标对象添加关键字，并将关键字的值设置为源对象的值。* 3.返回目标对象。

然后再说一遍divColor()函数，var col=' #这个列字符串被定义来存储我们的颜色格式。下面的rondom()函数使用十六进制为我们的颜色随机赋值，最后返回一个七位的值格式，也就是#nnnnnn color的格式。

位置的随机函数是divposition (elem宽度，elem高度):

if(！elemWidth)elemWidth=50；if(！elem h8)elem h8=50；这两行的目的是介绍我们初始div的高度和宽度，这样当我们实现随机位置时，就不会出现div块超过我们浏览器窗口的情况。document . document element . client width-elem width浏览器宽度-50 document . document element . client height-elem h8浏览器高度-50，可以实现上述过程。最后，返回左侧的距离和顶部的距离。

setInterval(randomDiv，100)；//函数名毫秒——这个函数多长时间运行一次？

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。