表格游戏!

来源:互联网 发布:盛世汉桥 知乎 编辑:程序博客网 时间:2024/06/04 00:22
<style>
table{text-align: center;font-size: 50px;border: 1px solid #000;}
tr{height: 100px;border: 1px solid #000}
td{width : 100px;border: 1px solid #000;cursor:pointer }
</style>
<meta charset="utf8">
<center>
<h3>依次点击表格1-9</h3>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</center>
<!-- <script src='jquery-1.8.3.js'></script> -->
<script src="http://code.jquery.com/jquery-1.4.1.js"></script>
<script>
arrRand()//刷新打乱九宫格
//随机
function arrRand() {
arr = [1,2,3,4,5,6,7,8,9]//定义数组
arr.sort(function(){ return 0.5 - Math.random() })//打乱数组
//布页面
for (var i = 0; i < $('td').size(); i++) {
arr.push($('td').eq(i).html(arr[i]))
}
}
i=1  //点击的初始值
s  = 0 //秒的初始值
ms = 0 //毫秒精确两位的初始值
flag = true //秒表开关状态
$('td').click(function() {
if (flag) {
flag=false //秒表开始了
//开启秒表
start = setInterval(function() {
ms++
if (ms>99) {
ms=0
s++
}
},10)
}
if ($(this).html()/1==i) {
$(this).css('background','pink')
i++
if (i>9) {
alert('厉害了我的哥,您的用时为:'+s+'秒'+ms)
clearInterval(start)//关闭秒表
s = 0 //初始化秒
ms = 0 //初始化毫秒
arrRand() //重新布局
$('td').css('background','')//清除背景色
flag=true //秒表关闭了
i=1 //恢复初始
}
}else{
alert('你点错了笨蛋')
$('td').css('background','')//清楚背景色
i=1//恢复初始
}
})
</script>
原创粉丝点击