DOM应用实例（寻找房祖名）

　　在上一篇我讲到了DOM的一些总结，这一次我就用我前几天做的一个游戏demo来讲讲DOM的一些用法吧。

　　首先简单说说这个游戏，如下图所示（大家忽略样式/(ㄒoㄒ)/~~）。当玩家点击开始后，只要选择了正确的图片，则跳到下一关，展开更多的图片。其主要原理是利用DOM中节点的增删操作来实现。

body,ul,li,input,button,img{
padding: 0;
margin: 0;
}
body{
background: #f06060;
width: 100%;
font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;
}
img{
border: none;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
a:hover {
text-decoration: underline;
}

/*main*/
#wrap{
width: 540px;
margin: 0 auto 10px;
position: relative;
}
#txtBox{
width:100%;
height: 80px;
}
#imgBox{
width: 510px;
padding: 15px;
background: #fff;
border-radius: 10px;
}
ul{
overflow: hidden;
width: 100%;
}
li img{
width: 100%;
}
/*txt*/
#txtBox ul{
width: 100%;
height: 80px;
}
#txtBox ul li{
float: left;
height: 80px;
line-height: 80px;
font-size: 2em;
color: #fff;
}
#txtBox ul li.time_list{
width: 260px;
}
#txtBox ul li.score_list{
width: 140px;
}
button{
width: 100px;
height: 40px;
outline: none;
border: none;
background: #C262C1;
color: #fff;
font-size: 20px;
cursor: pointer;
border-radius: 5px;
}
button:hover{
background: #C666C6;
}
#stop{
display: none;
}
/*img*/
#imgBox ul li{
float: left;
width: 100%;
background: #c262c1;
border-radius: 10px;
cursor: pointer;
}
#imgBox ul li img{
width: 100%;
border-radius: 10px;
}

/*cover*/
#cover{
display: block;
width: 540px;
height: 548px;
background:#C262C1;
opacity: 0.9;
-webkit-opacity: 0.9;
position: absolute;
top: 80px;;
left: 0;
z-index: 10;
color: #fff;
font-size: 30px;
line-height: 540px;
text-align: center;
}

展开CSS样式
　　由于逻辑不是很复杂，我就把解释写在代码中了。请看注释。

//获取元素
var time = document.getElementById("time");
var score = document.getElementById("score");
var start = document.getElementById("start");
var stop = document.getElementById("stop");
var cover = document.getElementById("cover");

//定时
var remainT = 100;
function setTime (){
Remain = setInterval(function (){
remainT-=0.05;
shortT = remainT.toFixed(2);　　　　//保留两位小数
time.innerHTML = shortT;
if(shortT==0){　　　　//时间结束
clearInterval(Remain);
alert("游戏结束！你的得分是："+yourScore);
window.location.reload();
}
},50);
}
//点击按钮
function beginGame(a,b){
if(a.id=="start"){
setTime();
if(level==1){//第一次点击
nextLevel();
}
cover.style.display = "none";
}else{
clearInterval(Remain);
cover.style.display = "block";
}
a.style.display = "none";
b.style.display = "inline";
}
//绑定开始按钮
start.onclick = function(){
beginGame(start,stop);
}
//绑定暂停按钮
stop.onclick  = function() {
beginGame(stop,start);
}
//切换图片
var level = 1;//层数
var maxLevel = 20;//游戏级数
var yourScore = 0;//分数
function nextLevel(){
var imgBox = document.getElementById("imgBox");
var boxChild = imgBox.children;//获取imgBox的直接子标签元素
//删除上一级
var imgL = boxChild.length
for(var i=0;i<imgL;i++){
imgBox.removeChild(boxChild[0]);//不断地删除第一个  PS:这里用到了上一次讲到了删除子节点方法
}
//生成下一级
for(var i=0;i<level;i++){
var ul = document.createElement("ul");　　//创建一个新的ul标签
ul.className = "row";
for(var j=0;j<level;j++){
var li = document.createElement("li");   　　//创建一个新的li标签
var img = document.createElement("img");　　　　　　//创建一个新的img标签
li.className = "list";
//绑定点击事件
img.onclick = function(){
if(level==maxLevel){  　　　　　　//达到游戏最高级
clearInterval(Remain);
alert("游戏结束！你的得分是："+yourScore);
window.location.reload();
}else{
if(this.index==1){　　　　//如果正确（即index等于1）就加分
yourScore++;　　　　//加分
score.innerHTML = yourScore;　　　　//输出分数
nextLevel();　　　　//再次执行
}
}
}
li.style.width = 100/level + "%";　　　　//设置百分比宽
img.src = "img/1.png";　　　　　　　　//先给图片添加统一的资源地址
li.appendChild(img);　　　　　　　//将img子节点绑定到li标签下
ul.appendChild(li);　　　　　　//将li子节点绑定到ul下
}
imgBox.appendChild(ul);　　　　//将ul子节点绑定到div容器中，实现层层嵌套

}
//产生随机答案
var allImg = imgBox.getElementsByTagName("img");//所有图片选项
var imgLength = allImg.length;　　//选项个数
var ranNum = Math.floor(Math.random()*imgLength);　　//随机数
allImg[ranNum].src = "img/2.png";　　//正确的图
allImg[ranNum].index=1;　　//正确的标记为1
level++;　　//增加级数
}

　　说明：由于上次某网站在未经本人同意下，原文照搬了我之前写的一篇IE6总结。虽然其中有错漏之处，但是希望大家在引用别人文章的时候注明出处和作者。以上均为个人原创，仅供学习与交流。谢谢。