爲什麼HTML5會破壞這段代碼？

-2

我不確定如何詳細詢問此問題，但爲什麼在將文檔設置爲<!DOCTYPE html>時，此網站無法正常顯示？我已經在多個瀏覽器上（例如firefox，chrome，opera）嘗試了這個頁面，並且它們都顯示不正確，除非我省略<!DOCTYPE html>。下面是代碼：爲什麼HTML5會破壞這段代碼？

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8" /> 
<title>DotSmasher</title> 
<link rel="stylesheet" href="dotSmasher.css" type="text/css" /> 
<script type="text/javascript" src="dotSmasher.js"></script> 
</head> 
<body onload="setGameAreaBounds()" onresize="setGameAreaBounds()"> 
<div id="scoreLabel">Score: 0</div> 
<div id="pageTitle">DotSmasher</div> 
<div id="gameArea"> 
    <button id="dot" onClick="detectHit()"></button> 
    </div> 
</body> 
</html>

這裏是它是如何想看看截圖： http://i.stack.imgur.com/TNTrQ.jpg

這裏是它的外觀截圖<!DOCTYPE html>後： http://i.stack.imgur.com/r5Qtm.jpg

的JavaScript和CSS代碼如下：

var score = 0; 
var aWidth; 
var aHeight; 
var timer; 
function detectHit() { 
score += 1; 
scoreLabel.innerHTML = "Score: " + score; 
} 
function setGameAreaBounds() { 
if (document.all) { 
    aWidth = document.body.clientWidth; 
    aHeight = document.body.clientHeight; 
} 
else { 
    aWidth = innerWidth; 
    aHeight = innerHeight; 
} 
aWidth -= 30; 
aHeight -= 95; 
document.getElementById("gameArea").style.width = aWidth; 
document.getElementById("gameArea").style.height = aHeight; 
aWidth -= 74; 
aHeight -= 74; 
moveDot(); 

} 
function moveDot() { 
var x = Math.floor(Math.random() * aWidth); 
var y = Math.floor(Math.random() * aHeight); 
if (x < 10) 
    x = 10; 
if (y < 10) 
    y = 10; 
document.getElementById("dot").style.left = x; 
document.getElementById("dot").style.top = y; 
clearTimeout(timer); 
timer = setTimeout("moveDot()", 1000); 
} 


#scoreLabel { 
font-family: Arial, Helvetica, sans-serif; 
font-size: 14pt; 
color: #000000; 
font-weight: bold; 
position: absolute; 
top: 10px; 
height: 25px; 
} 

#pageTitle { 
font-family: Arial, Helvetica, sans-serif; 
font-size: 24pt; 
font-weight: bold; 
color: #000099; 
position: absolute; 
top: 35px; 
left: 10px; 
height: 25px; 
} 

#gameArea { 
position: absolute; 
top: 75px; 
left: 10px; 
border: 1px solid #000000; 
} 

#dot { 
position: absolute; 
top: 25px; 
left: 25px; 
background-color: #000099; 
width: 64px; 
height: 64px; 
} 

#stop { 
position: absolute; 
top: 50px; 
}

來源

2013-11-21 Brian

應該怎麼看？它以什麼方式打破？ –

...你做的文件包括什麼？更改文檔類型時是否收到腳本錯誤？ – Bergi

控制檯發生任何錯誤？任何截圖可能？ – Hellgorithm

問題是，你得到的代碼f從大學的書是錯誤的。我發現這本書是here。

目前至少有兩件事情是錯誤的。

var x = Math.floor(Math.random() * aWidth); 
var y = Math.floor(Math.random() * aHeight);

兩個aWidth和aHeight沒有初始化的，因此你是一個NULL倍增。這些設置爲1，就像這樣：

var aWidth = 1; 
var aHeight = 1;

此外，

document.getElementById("dot").style.left = x; 
document.getElementById("dot").style.top = y;

應該是：

document.getElementById("dot").style.left = x + "px"; 
document.getElementById("dot").style.top = y + "px";

他們失蹤的位置結束了「PX」。

而RobG是正確的，因爲瀏覽器的怪癖模式沒有DOCTYPE html。

希望這會有所幫助。

來源

2013-11-21 03:40:30

爲什麼HTML5會破壞這段代碼？

回答

相關問題