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 相关文章推荐
[原创]图片分页查看
Aug 28 Javascript
jsTree树控件(基于jQuery, 超强悍)[推荐]
Sep 01 Javascript
jquery-easyui关闭tab自动切换到前一个tab
Jul 29 Javascript
jquery随机展示头像代码
Dec 21 Javascript
精心挑选的15个jQuery下拉菜单制作教程
Jun 15 Javascript
JavaScript获取页面中表单(form)数量的方法
Apr 03 Javascript
浅谈addEventListener和attachEvent的区别
Jul 14 Javascript
node.js express安装及示例网站搭建方法(分享)
Aug 22 Javascript
分类解析jQuery选择器
Nov 23 Javascript
Angular 4依赖注入学习教程之简介(一)
Jun 04 Javascript
vue.js中父组件调用子组件的内部方法示例
Oct 22 Javascript
vue 实现一个简单的全局调用弹窗案例
Sep 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
Yii基于CActiveForm的Ajax数据验证用法示例
2016/07/14 PHP
如何离线执行php任务
2017/02/21 PHP
PHP使用PDO调用mssql存储过程的方法示例
2017/10/07 PHP
PHP缓存工具XCache安装与使用方法详解
2018/04/09 PHP
Thinkphp页面跳转设置跳转等待时间的操作
2019/10/16 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
JavaScript的单例模式 (singleton in Javascript)
2010/06/11 Javascript
javascript string字符串优化问题
2011/07/31 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
2016/02/18 Javascript
JavaScript添加随滚动条滚动窗体的方法
2016/02/23 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
2016/09/22 Javascript
Extjs表单输入框异步校验的插件实现方法
2017/03/20 Javascript
详解VUE 定义全局变量的几种实现方式
2017/06/01 Javascript
JS实现多张图片预览同步上传功能
2017/06/23 Javascript
js实现多张图片延迟加载效果
2017/07/17 Javascript
详解如何从零开始搭建Express+Vue开发环境
2018/07/17 Javascript
Puppeteer环境搭建的详细步骤
2018/09/21 Javascript
JavaScript使用ul中li标签实现删除效果
2019/04/15 Javascript
JavaScript之Blob对象类型的具体使用方法
2019/11/29 Javascript
[54:45]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 Optic vs OG
2018/04/02 DOTA
PyCharm在新窗口打开项目的方法
2019/01/17 Python
python3图片文件批量重命名处理
2019/10/31 Python
Python嵌套函数,作用域与偏函数用法实例分析
2019/12/26 Python
django创建css文件夹的具体方法
2020/07/31 Python
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
2016/11/16 HTML / CSS
京东港澳售:京东直邮港澳台
2018/01/31 全球购物
来自南加州灵感的工作和娱乐服装:TravisMathew
2019/05/01 全球购物
趣天网日本站:Qoo10 JP
2019/09/18 全球购物
俄罗斯韩国化妆品网上商店:Cosmasi.ru
2019/10/31 全球购物
如何让Java程序执行效率更高
2014/06/25 面试题
法律进学校实施方案
2014/03/15 职场文书
优秀护士演讲稿
2014/04/30 职场文书
企业总经理任命书
2014/06/05 职场文书
2014年高三班主任工作总结
2014/12/05 职场文书
Vue elementUI表单嵌套表格并对每行进行校验详解
2022/02/18 Vue.js
Mysql外键约束的创建与删除的使用
2022/03/03 MySQL