活在IE的恐惧之下

Left_you 2011-10-28 03:39:03
前写天，我也写了一个javascript俄罗斯方块练练手，但是完了以后发现 悲剧了...
竟然火狐、ie7均不支持。现在测试通过的有ie8 和 谷歌。
很纳闷我也不知道是哪些代码不兼容！ 问问了...



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>luosi</title>

</head>

<body oncontextmenu="return mayTurned();">

	<table>

		<tr><td colspan="2">

			<div id="top"></div>

		</td></tr>

		<tr>

			<td><div id="left"></div></td>

			<td><div id="main"></div></td>

		</tr>

		<tr><td></td><td>

				<button onclick="this.style.display='none';down();">开始</button>

			</td></tr>

	</table>

</body>

<script type="text/javascript">

//---------------------------- 一些需要初始化的变量 ----------------------------//

	var top = document.all("top");

	var left = document.all("left");

	var main = document.all("main");

//板大小

	var width = 5, height = 8;

	var i = 1; var j = 1; var k = 1; var g = 1;//控制循环的变量

//当前的列、行、块

	var currentX = 0, currentY = 0;

	var allTissue = [[2,4,1,1,1, 1,1, 2,1, 3,1, 4,1],//前面2、4、1、1，1是参数：X轴、最大X、最大Y、顺，逆变形后变成数组中第几个。

		[1,1,4,0,0, 1,1, 1,2 ,1,3, 1,4]];

	var p = 5;//

	var currentTissue;

//-------------------------------- 一些函数 --------------------------------//

//点创建 坐标

	function createCell(x,y){

		var cell = document.createElement("button");

		cell.setAttribute("style","height: 30px;width: 30px;");

		cell.setAttribute("id",x+"|"+y);

		cell.setAttribute("onclick","moveTissue(this.id);");

		return cell;

	}



//点染色 bel:true时染色;false时去色

	function printCell(cell,bel){

		if (cell != null && bel && !cell.disabled){

				cell.setAttribute("style","height: 30px;width: 30px;background-color: teal;");

				cell.setAttribute("disabled","disabled");

		}

		else if (cell != null && !bel && cell.disabled){

				cell.setAttribute("style","height: 30px;width: 30px;");

				cell.removeAttribute("disabled");

		}

		else {

			throw "cellPrintError";

		}

	}



//块生成

	function getTissue(){

		currentTissue = allTissue[Math.floor(Math.random()*allTissue.length)];

		try{

			printTissue(true);

		}catch (error){

			alert("死！");

		}

	}

//块打印

	function printTissue(bel){

		for (i = p;i < currentTissue.length - 1;i += 2){

			try{

				printCell(document.getElementById((currentTissue[i]+currentX)+"|"

					+(currentTissue[i+1]+currentY)),bel);

			}catch (error){

				for (j = p;j < i;j += 2){

					printCell(document.getElementById((currentTissue[j]+currentX)+"|"

						+(currentTissue[j+1]+currentY)),false);

				}

				throw error;

			}

		}

	}

//块移动

	function moveTissue(id){

		if (id.replace(/\|\d+/,"") > currentTissue[1]+currentX){

			printTissue(false);

			currentX ++;

			try{

				printTissue(true);

			}catch (error){

				currentX --;

				printTissue(true);

			}

		}

		else if(id.replace(/\|\d+/,"") < currentTissue[1]+currentX){

			printTissue(false);

			currentX --;

			try{

				printTissue(true);

			}catch (error){

				currentX ++;

				printTissue(true);

			}

		}

	}

	function down(){

		printTissue(false);

		currentY ++;

		try{

			printTissue(true);

		}catch (error){

			currentY --;

			printTissue(true);

			removeRow();

			currentY = 0;	currentX = 0;

			getTissue();

		}

			window.setTimeout("down()",500);

	}



//块变形

	function turned(){

		printTissue(false);

		currentTissue = allTissue[currentTissue[3]];

		try{

			printTissue(true);

		}catch (error){

			currentTissue = allTissue[currentTissue[4]];

			printTissue(true);

		}

	}

	function mayTurned(ev){

		ev = ev || window.event;

		var elem = ev.srcElement||ev.target;

		if (/\d+\|\d+/.test(elem.id)){

			turned();

			return false;

		}

	}

//行消除

	function removeRow(){

		for (i = height;i >= 1;i --){

			for (j = 1;j <= width;j ++){

				var cell = document.getElementById(j+"|"+i);

				if (!cell.disabled){

					cell = null; break;

				}

				if (j != width){continue;}

				for (k = 1;k <= width;k ++){

					for (g = i;g > 1;g --){

						var cell = document.getElementById(k+"|"+g);

						var upCell = document.getElementById(k+"|"+(g-1));

						if(cell.disabled != upCell.disabled){

							printCell(cell,upCell.disabled);

						}

						cell = null;	upCell = null;

					}

				}

				i ++; break;

			}

		}

	}



//-------------------------------- 开始位置 --------------------------------//

	for (i = 1;i <= height;i ++){

		for (j = 1;j <= width;j ++){

			var cell = createCell(j,i);

			main.appendChild(cell);

			cell = null;

		}

		main.innerHTML += "<br/>";

	}

	getTissue();

</script>

</html>
...全文
201 16 打赏 收藏 转发到动态 举报
写回复
用AI写文章
16 条回复
切换为时间正序
请发表友善的回复…
发表回复
学城 2011-11-01
  • 打赏
  • 举报
 回复
document.all不兼容，最好要用获取id的方式。。
KK3K2005 2011-11-01
  • 打赏
  • 举报
 回复
所以要抽象封装
底层对于dom的操作要完全封装起来
java里面常用的面向接口
Left_you 2011-11-01
  • 打赏
  • 举报
 回复
[Quote=引用 12 楼 theforever 的回复:]

看来楼主是典型的后生代，没在IE6环境中成长起来。

所以就会象是小孩子觉得皱纹一大把的慈祥老人是妖怪一样。没啥，就是代沟。你怀着慈悲心看待它就好了。反过来如果你把它当作魔鬼，那它可能就真是魔鬼了，这对什么都是一样。
[/Quote]

你说得没错，我就是今年才毕业的。 以前主要学java js里面的兼容确实考虑得灰常少，但是我觉得js的话兼容是必须重点考虑的，所以在慢慢的注意这些。 还有就是写js也会尽量向java的写法靠拢， jQ里面到处是#、$、*这些符号，说实话不习惯也不喜欢、、、

火狐的firebug我没在里面找出来事件，求更具体的指点，可能是我还不太会用。 3Q！
liangws 2011-11-01
  • 打赏
  • 举报
 回复
[Quote=引用 10 楼 left_you 的回复:]

现在就剩下 鼠标右键变形

火狐浏览器下面的鼠标右键事件好像不能这么自定义 oncontextmenu 事件火狐下面不知道有没有

8楼的逻辑哥真的不懂？是不是写得多就一定是抄人家的？
[/Quote]

事件可以通过firebug都能看出来有没有
碧海情天-赵亮 2011-11-01
  • 打赏
  • 举报
 回复
看来楼主是典型的后生代，没在IE6环境中成长起来。

所以就会象是小孩子觉得皱纹一大把的慈祥老人是妖怪一样。没啥，就是代沟。你怀着慈悲心看待它就好了。反过来如果你把它当作魔鬼，那它可能就真是魔鬼了，这对什么都是一样。
ismezy2002 2011-10-31
  • 打赏
  • 举报
 回复
如果对W3C标准不熟还可以借助一些JS框架嘛，如jQuery就挺好用的，干嘛不用
Left_you 2011-10-31
  • 打赏
  • 举报
 回复
setAttribute 和removeAttribute 呢？
Left_you 2011-10-31
  • 打赏
  • 举报
 回复
简单的说就是怎么通过点鼠标右键触发turned()方法？ 在火狐下面...

求高手指点，真心求！
Left_you 2011-10-31
  • 打赏
  • 举报
 回复
现在就剩下 鼠标右键变形

火狐浏览器下面的鼠标右键事件好像不能这么自定义 oncontextmenu 事件火狐下面不知道有没有

8楼的逻辑哥真的不懂？是不是写得多就一定是抄人家的？
ziyouren521125 2011-10-31
  • 打赏
  • 举报
 回复
document.all 应该是兼容不好的
sssschenyi 2011-10-31
  • 打赏
  • 举报
 回复
抄袭别人的代码吧？这么长的JS code都写出来，应该会写兼容啊?
Left_you 2011-10-31
  • 打赏
  • 举报
 回复
我不喜欢jQ那种写作习惯，工作上也不用jQ
懒得搭理你 2011-10-28
  • 打赏
  • 举报
 回复
各种浏览器的对于JS方法的兼容性http://www.quirksmode.org/dom/w3c_core.html#nodeinformation
yhtapmys 2011-10-28
  • 打赏
  • 举报
 回复
document.all => document.getElementById
liangws 2011-10-28
  • 打赏
  • 举报
 回复
document.all火狐不支持。。
hellNo 2011-10-28
  • 打赏
  • 举报
 回复
太长啦，看的眼睛疼，帮你顶一下
JavaScript

87,902

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章