效果如下:
**如下:
總結:
這個小專案的實現主要是基於了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位置和大小均以預設位置及...