javascript九宮格圖片隨機打亂位置的實現(xiàn)方法
今天就做個九宮格的簡易拼圖,最讓我頭疼的就是點擊開始打亂圖片位置。一開始在百度查看相關(guān)博客,走了很多彎路。最后看了眾多的例子,自己寫了個方法。
<script> //打亂圖片方法 function fun(){ var x = []; var y ; for(var i=1;i<10;i++){ var div = document.getElementById("d"+i+""); div.removeChild(document.getElementById("img"+i+"")); } for(var i=1;i<10;i++){ var img = document.createElement('img'); //動態(tài)創(chuàng)建img標(biāo)簽 var div1 = document.getElementById("d"+i+""); var p = [1,2,3,4,5,6,7,8,9]; //用p[]數(shù)組保存圖片的代號 var j = Math.round(Math.random()*8); //通過隨機數(shù)j產(chǎn)生隨機圖片代號p[j] for ( var u=0 ; u < x.length ; u++ ) //遍歷x[]數(shù)組防止后面出現(xiàn)與前面一樣的圖片代號 { if ( x[u] == p[j] ) { y = x[u]; break; } } if(p[j]==y){ i-=1; continue; }else{ img.setAttribute("src","images/tiger_0"+p[j]+".gif"); img.id = "img"+i+""; } div1.appendChild(img); x.push(p[j]); //添加已經(jīng)出現(xiàn)的圖片號數(shù)進入x[]數(shù)組 } dragdrop();//拖動圖片方法 } </script>
點擊開始可以達到隨機打亂圖片位置的效果,如下
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
如何使用json在前后臺進行數(shù)據(jù)傳輸實例介紹
需要把這些輸入寫入數(shù)據(jù)庫,這里就用到j(luò)son傳入,先看一下后臺如何生成要傳輸?shù)臄?shù)據(jù),感興趣的朋友可以參考下,希望可以幫助到你2013-04-04JavaScript簡單實現(xiàn)鼠標(biāo)拖動選擇功能
本篇文章主要是對JavaScript簡單實現(xiàn)鼠標(biāo)拖動選擇功能的示例代碼進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-03-03深入理解JavaScript系列(6):S.O.L.I.D五大原則之單一職責(zé)SRP
Bob大叔提出并發(fā)揚了S.O.L.I.D五大原則,用來更好地進行面向?qū)ο缶幊?/div> 2012-01-01JavaScript中array.reduce()數(shù)組方法的四種使用實例
reduce為數(shù)組中的每一個元素依次執(zhí)行回調(diào)函數(shù),不包括數(shù)組中被刪除或從未被賦值的元素,下面這篇文章主要給大家介紹了關(guān)于JavaScript中array.reduce()數(shù)組方法的四種使用實例,需要的朋友可以參考下2022-07-07關(guān)于innerHTML后丟失動態(tài)綁定的EVENT問題解決方法
用innerHTML取出一段內(nèi)容后再innerHTML回去,那么原來動態(tài)綁定的事件就會丟失,下面與大家分享下解決方法,感興趣的朋友可以參考下哈2013-05-05escape函數(shù)解決js中ajax傳遞中文出現(xiàn)亂碼問題
這篇文章主要介紹了escape函數(shù)解決js中ajax傳遞中文出現(xiàn)亂碼問題,是非常實用的技巧,需要的朋友可以參考下2014-10-10PHP實現(xiàn)的各種中文編碼轉(zhuǎn)換類分享
這篇文章主要介紹了PHP實現(xiàn)的各種中文編碼轉(zhuǎn)換類分享,本文類庫支持簡體中文、繁體中文、GB2312、BIG5、UTF-8等多種格式之間的轉(zhuǎn)換,需要的朋友可以參考下2015-01-01最新評論