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