打地鼠

来源：互联网发布：灰色预测模型软件下载编辑：程序博客网时间：2024/05/02 04:52

对于一些刚接触js动画操作的人来说，没什么思路，在这里有简单易懂的代码，便于理解

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

<styletype="text/css">

margin:0;

padding:0;

}

#wrap{

width:616px;

height:660px;

/*border: 2px solid red;*/

margin:30pxauto;

position:relative;

}

#time,

#score{

width:140px;

height:50px;

text-align: center;

line-height:50px;

float:left;

border:1pxsolid black;

}

#start{

float:right;

width:140px;

height:50px;

border:1pxsolid black;

color:#fff;

font-size:20px;

}

table{

border:3pxsolid blueviolet;

clear:both;

}

td{

width:150px;

height:150px;

background-color: deepskyblue;

}

.active{

background-color: red;

}

</style>

</head>

<body>

<inputtype="button"name="" id="start"value="开始"/>

<tableborder=""cellspacing=""cellpadding="">

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

</body>

//开始按钮

varstart= document.getElementById("start");

//分数

varscore= document.getElementById("score");

//时间

vartime= document.getElementById("time");

//所有的单元格

vartable= document.getElementsByTagName("table")[0];

//所有的td

vartds= table.getElementsByTagName("td");

//随机函数

function randomNum(m,n) {

return Math.floor(Math.random() * (n - m + 1) + m);

}

varindex= 0;//记录随机单元格的位置下标

vartimer;//寻找地鼠坑的定时器

varscores= 0; //用来记录得分

varsurTime= 20; //记录剩余时间

vartimer2;//时间定时器

//开始按钮的点击事件

start.onclick=function () {

//清除定时器

clearInterval(timer);

timer = setInterval(function () {

//清空所有的背景色

for(vari = 0; i<tds.length; i++) {

tds[i].className="";

}

//随机单元格的位置

index=randomNum(0,tds.length - 1);

tds[index].className="active";

},1000);

timer2 = setInterval(function() {

surTime--;

time.innerHTML="时间：" +surTime;

if(surTime== 0) {

clearInterval(timer2);

//清除随机地鼠的操作

clearInterval(timer);

alert("亲，你获得的分数为："+scores);

}

}, 1000);

}

//为所有的单元格添加点击事件

for(vari = 0; i<tds.length; i++) {

tds[i].onclick=function () {

if(this.className= "active") {

scores++;

score.innerHTML="分数：" +scores;

}

</script>

</html>

0 0