js連連看
首先見證奇跡的時刻---效果圖如下：
實現主要分為三個部分：
一、創建元素塊
二、隨機分布元素塊
三、事件綁定
一、創建元素塊
生成span的元素標簽，並將標簽添加到父容器中，設置其left、top和background屬性。
/* * creSpan 創建元素標簽 * n 指當前個數 * mpId 指父容器 * mleft 指其left屬性值 * mtop 指其top屬性值 * bgcolor 指其背景色屬性值 */ function creSpan(n,mpId,mleft,mtop,bgcolor){ var mSpan = document.createElement("span"); var pId = mpId[0]; pId.appendChild(mSpan); with(mSpan.style){ left = mleft+"px"; top = mtop+"px"; background =bgcolor; } }
二、隨機分布元素塊
為了方便理解，將其過程以趣味題的形式描述出來。
==========================================================
有96個方塊，每排放12塊，一共放8排，現在有六個顏色的油漆桶，每個油漆桶的顏色不同，
現在讓這六種顏色隨機塗抹這96個方塊，有一點要求是每種塗色方塊的總數是偶數 。
==========================================================
思路：
96塊和6種顏色
96 - 6 =90 讓前90塊顏色隨機出現，並記錄每種顏色出現的總和
后6塊一塊一塊校正，根據當前顏色的總和，如果為奇數，讓其繼續加一，偶數時為方塊塗抹給后面將要出現的顏色值
var arrColor = ["#FF00FF","#FFFF00","#00FFFF","#FF0000","#00FF00","#0000FF"]; //顏色值 var myleft = 3; // 初始的left值 var mytop = 3; // 初始的top值 var arr = new Array(); // 將每一個span對象存放在二維數組中 var test = $("#test"); // 父容器 var arrtmp =[0,0,0,0,0,0]; // 顏色計數器 var tmpcolor =arrColor[0]; // 當前顏色 for(var j=0;j<8;j++){ arr[j] = new Array(); if(j===7){ for(var i=0;i<12;i++){ if(i!==0){ myleft+=32; } if(i===6){ if(arrtmp[0]%2===0){ arr[j][i] = new creSpan((j+1)*(i+1),test,myleft,mytop,arrColor[1]); arrtmp[1]++; } else{ arr[j][i] = new creSpan((j+1)*(i+1),test,myleft,mytop,arrColor[0]); arrtmp[0]++; } } else if(i===7){ if(arrtmp[1]%2===0){ arr[j][i] = new creSpan((j+1)*(i+1),test,myleft,mytop,arrColor[2]); arrtmp[2]++; } else{ arr[j][i] = new creSpan((j+1)*(i+1),test,myleft,mytop,arrColor[1]); arrtmp[1]++; } } else if(i===8){ if(arrtmp[2]%2===0){ arr[j][i] = new creSpan((j+1)*(i+1),test,myleft,mytop,arrColor[3]); arrtmp[3]++; } else{ arr[j][i] = new creSpan((j+1)*(i+1),test,myleft,mytop,arrColor[2]); arrtmp[2]++; } } else if(i===9){ if(arrtmp[3]%2==0){ arr[j][i] = new creSpan((j+1)*(i+1),test,myleft,mytop,arrColor[4]); arrtmp[4]++; } else{ arr[j][i] = new creSpan((j+1)*(i+1),test,myleft,mytop,arrColor[3]); arrtmp[3]++; } } else if(i===10){ if(arrtmp[4]%2===0){ arr[j][i] = new creSpan((j+1)*(i+1),test,myleft,mytop,arrColor[5]); arrtmp[5]++; } else{ arr[j][i] = new creSpan((j+1)*(i+1),test,myleft,mytop,arrColor[4]); arrtmp[4]++; } } else if(i===11){ if(arrtmp[5]%2===0){ } else{ arr[j][i] = new creSpan((j+1)*(i+1),test,myleft,mytop,arrColor[5]); arrtmp[5]++; } } else{ tmpcolor=arrColor[parseInt(Math.random()*arrColor.length)]; if(tmpcolor===arrColor[0]){ arrtmp[0]++; } else if(tmpcolor===arrColor[1]){ arrtmp[1]++; } else if(tmpcolor===arrColor[2]){ arrtmp[2]++; } else if(tmpcolor===arrColor[3]){ arrtmp[3]++; } else if(tmpcolor===arrColor[4]){ arrtmp[4]++; } else if(tmpcolor===arrColor[5]){ arrtmp[5]++; } arr[j][i] = new creSpan((j+1)*(i+1),test,myleft,mytop,tmpcolor); } } } else{ for(var i=0;i<12;i++){ if(i!==0){ myleft+=32; } tmpcolor=arrColor[parseInt(Math.random()*arrColor.length)]; if(tmpcolor===arrColor[0]){ arrtmp[0]++; } else if(tmpcolor===arrColor[1]){ arrtmp[1]++; } else if(tmpcolor===arrColor[2]){ arrtmp[2]++; } else if(tmpcolor===arrColor[3]){ arrtmp[3]++; } else if(tmpcolor===arrColor[4]){ arrtmp[4]++; } else if(tmpcolor===arrColor[5]){ arrtmp[5]++; } arr[j][i] = new creSpan((j+1)*(i+1),test,myleft,mytop,tmpcolor); } } mytop+=32; myleft=3; }
三、事件綁定
相同顏色時，顏色塊消失。
不同顏色塊不消失。
兩次點擊同一個顏色塊時，不消失。
var iclick = 0; // 記錄狀態組click點擊的次數 var marr = new Array(); // 存儲顏色值 var first = ""; // 記錄每次狀態組中的第一個span的當前數 var second =""; // 記錄每次狀態組中的第一個span的當前數 $.each($("#test span"),function(k,v){ $(this).click(function(){ if(iclick===0){ $(this).addClass("del"); marr[0]=$(this).css("backgroundColor"); first=k; } if(iclick===1){ $(this).addClass("del"); marr[1]=$(this).css("backgroundColor"); second=k; } iclick++; if(iclick>=2){ iclick=0; if(first!=second){ if( marr[0]===marr[1]){ $("#test").find(".del").detach(); } else{ $("#test span").removeClass("del"); } } else{ $("#test span").removeClass("del"); } } }); });
演示實例：