Js實現隨機div顏色位置 滿天星效果

2021-09-03 02:03:40 字數 1358 閱讀 7676

效果如下:

**如下:

總結:

這個小專案的實現主要是基於了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生成隨機顏色

方法一 var getrandomcolor function 隨機生成6個字元然後再串到一起,閉包呼叫自身與三元運算子讓程式變得內斂。方法二 var getrandomcolor function math,0123456789abcdef 5 把math物件,用於生成hex顏色值的字串提取出來,...

js實現兩個div交換位置

同事問了乙個問題,就是關於兩個層交換位置的問題,其實實現起來很簡單,我在這裡簡單的列舉兩種方法 方法一 這裡只是用的純js來實現,我直接貼 其中前面是判斷是否相容fixfox function movediv id 1,id 2 引數傳遞的是你需要交換位置的兩個div的id else var obj...

JS實現DIV拖動

可移動可調整大小 預設居中開啟 保留位置上開啟 開啟div 操作說明 選中核取方塊 可移動 可調整大小 後,開啟的div具有移動 調整大小的功能 此時移動 調整大小快捷鍵可使用 反之,不可移動 調整大小 此時移動 調整大小快捷鍵無效 單選框預設居中開啟選中,無論有無儲存div位置和大小均以預設位置及...