活在IE的恐惧之下

前写天，我也写了一个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>

解决方案 »

  1.   

    document.all => document.getElementById
      

  2.   

    各种浏览器的对于JS方法的兼容性http://www.quirksmode.org/dom/w3c_core.html#nodeinformation
      

  3.   

    setAttribute  和removeAttribute 呢？
      

  4.   

    如果对W3C标准不熟还可以借助一些JS框架嘛，如jQuery就挺好用的，干嘛不用
      

  5.   

    我不喜欢jQ那种写作习惯，工作上也不用jQ
      

  6.   

    抄袭别人的代码吧？这么长的JS code都写出来，应该会写兼容啊?
      

  7.   

     document.all 应该是兼容不好的
      

  8.   

    现在就剩下 鼠标右键变形 火狐浏览器下面的鼠标右键事件好像不能这么自定义 oncontextmenu 事件火狐下面不知道有没有8楼的逻辑哥真的不懂？是不是写得多就一定是抄人家的？
      

  9.   

    简单的说就是怎么通过点鼠标右键触发turned()方法？ 在火狐下面...求高手指点，真心求！
      

  10.   


    事件可以通过firebug都能看出来有没有
      

  11.   


    你说得没错，我就是今年才毕业的。 以前主要学java  js里面的兼容确实考虑得灰常少，但是我觉得js的话兼容是必须重点考虑的，所以在慢慢的注意这些。 还有就是写js也会尽量向java的写法靠拢， jQ里面到处是#、$、*这些符号，说实话不习惯也不喜欢、、、 火狐的firebug我没在里面找出来事件，求更具体的指点，可能是我还不太会用。 3Q！
      

  12.   

    所以要抽象封装
    底层对于dom的操作要完全封装起来
    java里面常用的面向接口
      

  13.   

    document.all不兼容，最好要用获取id的方式。。