js實現隨機div顏色位置類似滿天星效果-創新互聯

本文實例為大家分享了js實現隨機div顏色位置的具體代碼，供大家參考，具體內容如下

我們提供的服務有：成都做網站、成都網站建設、微信公眾號開發、網站優化、網站認證、克井ssl等。為成百上千企事業單位解決了網站和推廣的問題。提供周到的售前咨詢和貼心的售后服務，是有科學管理、有技術的克井網站制作公司

效果如下：

代碼如下：

<!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實現隨機div顏色位置類似滿天星效果-創新互聯
網站路徑：http://www.yijiale78.com/article18/dicegp.html

成都網站建設公司_創新互聯，為您提供外貿建站、ChatGPT、網站維護、面包屑導航、虛擬主機、關鍵詞優化

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容

99偷拍视频精品区一区二,口述久久久久久久久久久久,国产精品夫妇激情啪发布,成人永久免费网站在线观看,国产精品高清免费在线,青青草在线观看视频观看,久久久久久国产一区,天天婷婷久久18禁,日韩动漫av在线播放直播

js實現隨機div顏色位置類似滿天星效果-創新互聯