如何清除「document.write（）」所寫的內容

我目前正致力於編寫用javascript編寫的小遊戲，很像「蛇」。其中一部分是我顯示網格，並且網格需要經常更新。如何清除「document.write（）」所寫的內容

而我的一個方法是使用下面的函數。

function loadImages(){ 

    for(var i = 0;i<HEIGHT;i++){ 
     for(var j = 0;j<WIDTH;j++){ 
      if(grid[i][j] == -1){ 
       document.write('<IMG SRC="wall.png" width="30">'); 
      } 
      else if(grid[i][j] == 0){ 
       document.write('<IMG SRC="empty.png" width="30">'); 
      } 
     } 
    } 

    setTimeout(loadImages(), 50); 
}

唯一的問題是，當loadImages（）函數被反覆調用時，圖像被連接而不是替換。

所以我的問題是，有沒有辦法覆蓋文件，或清除？

P.S. 「document.clear（）」函數似乎並不是那麼有用。

謝謝

來源

2011-02-01 Anatoli

使用jQuery。對於遊戲，請看看HTML5的畫布元素。 – ThiefMaster 2011-02-01 18:23:55

你可以擴展你的grid數據結構，並同時存儲狀態和圖像元素：

// initialization 
for(var i = 0;i<HEIGHT;i++) { 
    for(var j = 0;j<WIDTH;j++){ 
     grid[i][j] = { 
      state: grid[i][j], 
      image: new Image() // creates HTMLImageElement object 
     }; 
     // set width 
     grid[i][j].image.setAttribute("width", "30"); 
     // append HTMLImageElement to BODY element 
     document.body.appendChild(grid[i][j].image); 
    } 
}

然後你就可以將裏面loadImages圖像以類似的方式：

function loadImages() { 
    for(var i = 0;i<HEIGHT;i++){ 
     for(var j = 0;j<WIDTH;j++){ 
      if(grid[i][j].state == -1){ 
       grid[i][j].image.src = "wall.png"; 
      } 
      else if(grid[i][j].state == 0){ 
       grid[i][j].image.src = "empty.png"; 
      } 
     } 
    } 
    setTimeout(loadImages, 50); 
}

由方法：setTimeout(loadImages(), 50)立即調用loadImages，但您應該改爲傳遞函數，所以setTimeout(loadImages, 50)。

您可以通過在一個臨時變量存儲grid[i][j]優化這個你loadImages功能，只有在狀態發生變化改變圖像來源：

var cell = grid[i][j]; 
switch (cell.state) { 
case -1: 
    if (cell.image.src !== "wall.png") { 
     cell.image.src = "wall.png"; 
    } 
    break; 
case 0: 
    if (cell.image.src !== "empty.png") { 
     cell.image.src = "empty.png"; 
    } 
    break; 
}

來源

2011-02-01 18:03:15 Gumbo

document.write總是加法的;你總是添加一個新的元素到文檔對象（DOM）。

在這種情況下，您想要的是document.getElementById（'imgParent'）。innerHTML，其中的child（ren）圖像位於具有ID的元素內。

document.getElementById('imgParent').innerHTML = '<IMG SRC="wall.png" width="30">';

真的，不過，考慮像jQuery庫：

http://api.jquery.com/html/

來源

2011-02-01 17:53:55

最簡單的事情是不使用document.write，但不是寫一個特定的文檔元素。例如，先從以下文件：

<html> 
    <head>...</head> 
    <body><div id='game'></div></body> 
</html>

然後，而不是「文件撰寫」，這樣做：

var game = document.getElementById('game'); 
game.innerHTML = '<IMG SRC="wall.png" width="30">';

你可以經常設置game.innerHTML屬性，它將覆蓋。

來源

2011-02-01 17:56:17 user85461

但是你怎麼顯示實際的圖片？我知道它加載到「div id ='遊戲'」中，但我不清楚如何顯示加載的內容。 – Anatoli 2011-02-01 18:03:15

@Ankiov - 這將*實際上在div內創建一個``元素，就好像它在原始HTML文檔中一樣。瀏覽器將負責渲染圖片，就像它遇到的任何其他``標籤一樣（例如您當前使用`document.write（）`-ing）的標籤。 – 2011-02-01 18:06:58

如何清除「document.write（）」所寫的內容

回答

相關問題