DIV CSS 佈局教程網

功能模塊： 　　程序設計：
　　　1.可選擇游戲時間，顯示倒計時　　　　　　　1.定義全局變量
　　　2.可選擇英文字母出現個數　　　　　　　　　2.控制游戲時間函數
　　　3.統計得分　　　　　　　　　　　　　　　　3.動畫效果
　　　4.菜單選項　　　　　　　　　　　　　　　　4.設定字母圖片出現的時間
　　　　　　　　　　　　　　　　　　　　　　　　5.判斷函數
　　　　　　　　　　　　　　　　　　　　　　　　6.游戲菜單
　　　　　　　　　　　　　　　　　　　　　　　　7.游戲時間選項
　　　　　　　　　　　　　　　　　　　　　　　　8.顯示游戲時間
　　　　　　　　　　　　　　　　　　　　　　　　9.游戲難度選項
　　　　　　　　　　　　　　　　　　　　　　　　10.游戲得分
　　
　　先上效果圖：(PS：美工是硬傷)

主要代碼設計：
復制代碼 代碼如下: 
//-------全局變量------- 
var data={ 
"10":["<img src='images/A.gif'/>"],"11":["<img src='images/B.gif'/>"],"12":["<img src='images/C.gif'/>"],"13":["<img src='images/D.gif'/>"], 
"14":["<img src='images/E.gif'/>"],"15":["<img src='images/F.gif'/>"],"16":["<img src='images/G.gif'/>"],"17":["<img src='images/H.gif'/>"], 
"18":["<img src='images/I.gif'/>"],"19":["<img src='images/J.gif'/>"],"20":["<img src='images/K.gif'/>"],"21":["<img src='images/L.gif'/>"], 
"22":["<img src='images/M.gif'/>"],"23":["<img src='images/N.gif'/>"],"24":["<img src='images/O.gif'/>"],"25":["<img src='images/P.gif'/>"], 
"26":["<img src='images/Q.gif'/>"],"27":["<img src='images/R.gif'/>"],"28":["<img src='images/S.gif'/>"],"29":["<img src='images/T.gif'/>"], 
"30":["<img src='images/U.gif'/>"],"31":["<img src='images/V.gif'/>"],"32":["<img src='images/W.gif'/>"],"33":["<img src='images/X.gif'/>"], 
"34":["<img src='images/Y.gif'/>"],"35":["<img src='images/Z.gif'/>"]
};
var datas=new Array();//隨機出現的 class樣式以數組中偶數存儲，圖片以數組中奇數存儲
var now=new Date();
var Image; //隨機出現圖片
var Divs;//隨機出現層
var count=0;//積分系統
var key;//鍵盤的值
var amounts=1;//出現字母圖片的個數
var gametime=30;//控制游戲的時間
var gametimes;//時間為0
var gametimess=30;//顯示時鐘變量
var time1;//setInterval變量
var time2=5000;//設定setInterval的時間
var time3;
var tab;//用來記錄，傳遞tabindex焦點位置的值
//--------這樣寫為了兼容FF浏覽器-------
var plug = {
addEvent:function(o,e,f){
if(o.addEventListener){
o.addEventListener(e,f,false);
}
else if(o.attachEvent){
o.attachEvent("on"+e,f);
}
}
}
plug.addEvent(window,"load",function(){Focus()});//兼容FF浏覽器
//------1.控制游戲時間函數--------
function Gametime(){
for(gametimes=gametime;gametimes>=0;gametimes--) {
window.setTimeout('Show(' + gametimes + ')',(gametime-gametimes+2) * 1000);
}
}
function Show(gametimes){
if(gametimes==0){
clearInterval(time1);//停止游戲
alert("游戲結束!你的得分為:"+count);
$("#main").empty();//清除main中的div
$(".gameapply").empty();
$("#select1").empty();
$("#select2").empty();
count=0;//得分清空為0
Score();//讓分數框顯示為0
Focus();//重新生成菜單選項
}
}
//---------2.動畫效果---------
function fun(){
datas.length=0;
for(var i=0;i<amounts;i++){
Image=parseInt(Math.random() * 26)+10;//隨機出現字母圖片
datas.push(Image);//圖片以數組中偶數存儲,從零開始
Divs=parseInt(Math.random() * 8)+1;//隨機出現層的class樣式即層的不同位置
datas.push(Divs);//樣式以數組中奇數存儲
var time=parseInt(Math.random() * 2000)+3000;//完成動畫的時間
if(time<5000){
var $divs=$("<div class='divPop"+Divs+"'>"+data[Image]+"</div>");
$("#main").append($divs);
//-----JQ動畫函數----
$(".divPop"+Divs).animate(
{"top":$(window).height() - $(".divPop"+Divs).height() - $(".divPop"+Divs).position().top},time,function(){$("#main").empty()})
}
}
}
//--------3.設定字母圖片出現的時間------
function sets(){
time1 = setInterval(fun,time2);
}
//---------4.綁定鍵盤---------
//---------兼容FF浏覽器---------
document.onkeydown = function keydown(e){
e = e||window.event;
var key = e.charCode||e.keyCode
select(key)
}
//---------5.判斷函數---------
function select(key){
if(key==13){
switch(tab){
case 0:Gametime();Gametimeselect();time3=setInterval(countdown,1000);sets();$("#select").hide(2000);break;//開始游戲
case 1:Gametime();Gametimeselect();time3=setInterval(countdown,1000);sets();$("#select").hide(2000);break;//開始游戲
case 2:alert("可以在左側設置游戲選項");break;
case 3:window.opener=null;window.open('','_self');window.close();break;//退出游戲
case 4:window.opener=null;window.open('','_self');window.close();break;//退出游戲
}
}
for(var j=0;j<datas.length;j=j+2){//為了讓data1裡面樣式和圖片的值不重復（即奇數跟偶數的不可能重復，m的值或者k的值要相差一定的值）
if(key==datas[j]+55){
$(".divPop"+datas[j+1]).hide();//key值相等,隱藏該層
delete datas[j]; //為了避免有重復的字母，所以數組裡面每遍歷到一個(key==datas[j]+55)都要刪除這個值
count+=10;
Score();
break;
}
}
}
//---------6.游戲菜單-------
function Focus(){
//---------初始化游戲界面--------
var $selects=$("<div id='select'><table id=\"tables\"><tr><td><input class=\"inputs\" type=\"text\"value=\"游戲開始\"/></td></tr><tr><td><input class=\"inputs\" type=\"text\" value=\"游戲選項\"/></td></tr><tr><td><input class=\"inputs\" type=\"text\" value=\"退出游戲\"/></td></tr></table></div>");
$(".gameapply").append($selects);
for(var i=30;i<=300;i=i+30){
$("#select1").append('<option>' + i+ '</option>')
}
for(var j=1;j<=9;j++){
$("#select2").append('<option>' + j+ '</option>')
}
//---------開始時取得第一個input的焦點--------
$(".inputs:first").trigger("focus").addClass("input1");
tab=1;//因為第一個焦點是沒法輸入Enter，所以要調用鍵盤輸入事件
var tabIndex=1;
//----------獲取tr行數，input個數--------
$("#tables").find("tr").each(function(r) {
$(this).find("input").attr("tabindex", r+1);//tabindex為焦點位置的值，賦初值為1，遍歷為1-2-3-4
});
//---------響應input的鍵盤上下操作
$("#tables .inputs").bind("keydown", function(e){
tabIndex = parseInt($(this).attr("tabindex"));//取得當前tabindex焦點的值
switch(e.which){
case 38://向上
tabIndex-=1;
tab=tabIndex;
break;
case 40://向下
tabIndex+=1;
tab=tabIndex;
break;
default:
return;
}
//--------判斷tabIndex焦點的值
if (tabIndex > 0 && tabIndex < 4) {
$(".inputs[tabindex=" + tabIndex + "]").focus().addClass("input1");//當前input獲取焦點
for(var i=0;i<=4;i++)
{
if(i==tabIndex){
break;
}
else{
$(this).removeClass("input1");
}
}
keydown();
return false;
}
return true;
});
}
//--------7.游戲時間選項---------
function Gametimeselect(){
var option=document.getElementById("select1");
for(var i=0;i<option.length;++i){
if(option[i].selected) {
gametime=option.options[i].text;
gametimess=gametime;
}
}
}
//-----8.顯示游戲時間-------
function countdown(){
var timeshows=document.getElementById("timeshow");
if(timeshows){//如果網頁速度很慢的話，可能定時器運行的時候控件還沒有加載
if(gametimess<0){
clearInterval(time3);//停止計時器
}
else{
timeshows.value=gametimess;
gametimess--;
}
}
}
//--------9.游戲難度選項---------
function Gameselectamount(){
var option=document.getElementById("select2");
for(var i=0;i<option.length;++i){
if(option[i].selected) {
amounts=option.options[i].text;
}
}
}
//---------10.游戲得分-----------
function Score(){
var sum=document.getElementById("sum");
sum.value=count;
if(count==0){ //初始化文本框分數為0
sum.value=count;
}
}

總結：由於時間隔得比較久，代碼方面沒有優化，有個地方做得不是很好，就是字母出現的時間間隔過長，有興趣的話可以嘗試修復。代碼僅供參考
在線演示：http://demo.jb51.net/js/2011/StarWars/
打包下載： http://www.jb51.net/jiaoben/40902.html