jQuery-黑白反斗棋
2016-05-23 21:06
323 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script src="jquery-1.8.0.js"></script> <script> $(function(){ var t=$("<table>").appendTo("div"); t.attr("border","1"); for(var i=0;i<5;i++){ var row=$("<tr>").appendTo(t); for(var j=0;j<5;j++){ var cols=$("<td>").appendTo(row); cols.attr({height:"100",width:"100",bgColor:"#000000"}); cols.attr("id",i+"-"+j); cols.click(function(){ var tdidarr=this.id.split("-"); var x=parseInt(tdidarr[0]); var y=parseInt(tdidarr[1]); if(document.getElementById(x+"-"+y).bgColor=="#000000"){ document.getElementById(x+"-"+y).bgColor="#ffffff"; }else if(document.getElementById(x+"-"+y).bgColor=="#ffffff"){ document.getElementById(x+"-"+y).bgColor="#000000"; } if(x-1>=0){ if(document.getElementById((x-1)+"-"+y).bgColor=="#000000"){ document.getElementById((x-1)+"-"+y).bgColor="#ffffff"; }else if(document.getElementById((x-1)+"-"+y).bgColor=="#ffffff"){ document.getElementById((x-1)+"-"+y).bgColor="#000000"; } } if(x+1<=4){ if(document.getElementById((x+1)+"-"+y).bgColor=="#000000"){ document.getElementById((x+1)+"-"+y).bgColor="#ffffff"; }else if(document.getElementById((x+1)+"-"+y).bgColor=="#ffffff"){ document.getElementById((x+1)+"-"+y).bgColor="#000000"; } } if(y-1>=0){ if(document.getElementById(x+"-"+(y-1)).bgColor=="#000000"){ document.getElementById(x+"-"+(y-1)).bgColor="#ffffff"; }else if(document.getElementById(x+"-"+(y-1)).bgColor=="#ffffff"){ document.getElementById(x+"-"+(y-1)).bgColor="#000000"; } } if(y+1<=4){ if(document.getElementById(x+"-"+(y+1)).bgColor=="#000000"){ document.getElementById(x+"-"+(y+1)).bgColor="#ffffff"; }else if(document.getElementById(x+"-"+(y+1)).bgColor=="#ffffff"){ document.getElementById(x+"-"+(y+1)).bgColor="#000000"; } } $(function(){ var flag=true; for(i=0;i<5;i++){ for(j=0;j<5;j++){ if(document.getElementById(i+"-"+j).bgColor!="#ffffff"){ flag=false; } } } if(flag){ alert("你赢了!"); } }) }); } } }); </script> </head> <body> <div></div> </body> </html>
![](http://s3.51cto.com/wyfs02/M00/80/7F/wKiom1dC_-Tz7RasAAA3-gw0B-U245.png)
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- $.ajax()方法详解
- jQuery ajax - ajax() 方法
- JavaScript 各种遍历方式详解
- 数组方法汇总
- jQuery Html控件基本操作(日常收集整理)
- jQuery插件实现文字无缝向上滚动效果代码
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果
- jQuery 练习[一] 学习jquery的准备工作
- jquery获得页面元素的坐标值实现思路及代码