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


Posted in Javascript onOctober 24, 2019

本文实例为大家分享了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);//函数名 毫秒——过多长时间运行一次这个函数。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 树形递归实例代码
May 18 Javascript
读jQuery之七 判断点击了鼠标哪个键的代码
Jun 21 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
Aug 25 Javascript
jQuery图片轮播插件——前端开发必看
May 31 Javascript
功能强大的Bootstrap效果展示(二)
Aug 03 Javascript
原生js封装的一些jquery方法(详解)
Sep 20 Javascript
Vue数据驱动模拟实现3
Jan 11 Javascript
Vue中组件之间数据的传递的示例代码
Sep 08 Javascript
Angular6新特性之Angular Material
Dec 28 Javascript
微信小程序实现禁止分享代码实例
Oct 19 Javascript
vue 父组件通过v-model接收子组件的值的代码
Oct 27 Javascript
vue实现随机验证码功能(完整代码)
Dec 10 Javascript
windows实现npm和cnpm安装步骤
Oct 24 #Javascript
JS实现简单随机3D骰子
Oct 24 #Javascript
JS合并两个数组的3种方法详解
Oct 24 #Javascript
js实现简单掷骰子小游戏
Oct 24 #Javascript
js实现GIF图片的分解和合成
Oct 24 #Javascript
js实现掷骰子小游戏
Oct 24 #Javascript
Element-Ui组件 NavMenu 导航菜单的具体使用
Oct 24 #Javascript
You might like
解析php中static,const与define的使用区别
2013/06/18 PHP
Yii的Srbac插件用法详解
2016/07/14 PHP
php多进程应用场景实例详解
2019/07/22 PHP
jQueryUI如何自定义组件实现代码
2010/11/14 Javascript
js实现表单多按钮提交action的处理方法
2015/10/24 Javascript
javascript图片滑动效果实现
2021/01/28 Javascript
跟我学习javascript的循环
2015/11/18 Javascript
详解Node.js:events事件模块
2016/11/24 Javascript
Nodejs实现文件上传的示例代码
2017/09/26 NodeJs
Three.js基础学习之场景对象
2017/09/27 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
2018/06/14 Javascript
详解如何在webpack中做预渲染降低首屏空白时间
2018/08/22 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
2019/01/20 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
2019/03/07 jQuery
vue里如何主动销毁keep-alive缓存的组件
2019/03/21 Javascript
解决vue-photo-preview 异步图片放大失效的问题
2020/07/29 Javascript
[41:37]DOTA2北京网鱼队选拔赛——冲击职业之路
2015/04/13 DOTA
[05:59]带你看看DPC的台前幕后
2021/03/11 DOTA
讲解Python中if语句的嵌套用法
2015/05/14 Python
举例讲解Python中的迭代器、生成器与列表解析用法
2016/03/20 Python
python字符串string的内置方法实例详解
2018/05/14 Python
Python爬虫框架Scrapy常用命令总结
2018/07/26 Python
Python的条件表达式和lambda表达式实例
2019/01/31 Python
pycharm工具连接mysql数据库失败问题
2020/04/01 Python
去除python中的字符串空格的简单方法
2020/12/22 Python
Linux系统下升级pip的完整步骤
2021/01/31 Python
大学生自我鉴定
2013/12/08 职场文书
2014年教师节讲话稿5篇
2014/09/10 职场文书
自愿解除劳动合同协议书
2014/09/11 职场文书
无工作证明怎么写
2015/06/15 职场文书
有关西游记的读书笔记
2015/06/25 职场文书
田径运动会通讯稿
2015/07/18 职场文书
青年干部培训班学习心得体会
2016/01/06 职场文书
助学金申请书该怎么写?
2019/07/16 职场文书
励志语录:时光飞逝,请学会珍惜所有的人和事
2020/01/16 职场文书
MySQL索引失效场景及解决方案
2022/07/23 MySQL