表刷新，每秒

<html> 
<body> 
<body bgcolor="33FF00"> 
<script language = "JavaScript"> 
//-----------------Created Variables Here------------------ 


timeLeft = 30              //this is counted down from until it hits 0 
points = 0               //this is the points system that is added to by 10 each time a duck is clicked 


// ----------------Duck Or Sky element----------------- 


function duSky(){             //This is a function to tell add points to the points variable if the user clicks a duck. 
duckNum = Math.floor((Math.random()*10)+1) 
if(duckNum<10){document.write("<img src=images/skyTile.jpg>")} 
else{document.write("<img src='images/duckTile.jpg' onClick='duckClick()'")} 
} 


</script> 


<center><img src=images/duckHuntTitle.gif><br>     <!Duck Hunt title gif, no background so you can see the background of the page, also centered> 



<div name = "tableDiv">           <!Named the table "TableDiv" so that I can refer to it at a later date. This was to try and make my job of refreshing easier> 
    <table> 
    <tr> 
    <td> <script> duSky() </script> </td> 
    <td> <script> duSky() </script> </td> 
    <td> <script> duSky() </script> </td> 
    <td> <script> duSky() </script> </td> 
    <td> <script> duSky() </script> </td> 

    </tr>              <!Inside of all the table boxes there is a function that designates whether inside will be a duck or sky tile> 
    <tr>              <!This is the duck table that is exactly 1000px wide by 400px height. This is created by 10 200px by 200px boxes, two rows of 5 boxes> 
    <td> <script> duSky() </script> </td> 
    <td> <script> duSky() </script> </td> 
    <td> <script> duSky() </script> </td> 
    <td> <script> duSky() </script> </td> 
    <td> <script> duSky() </script> </td> 
    </tr> 
    </table> 
</div> 


<form name="score"> 
Points <input type="text" name="pointsscored" readonly="readonly"> <!This is the box that is centered that displays the points the player has got, also is now readonly so no tweaking is allowed> 
</form> 

<form name="timer"> 
Time <input type="text" name="timeBox" readonly="readonly">   <!This is the timer box that is centered as well that displays how long the player has left and is readonly> 
</form> 
</center> 


<script language = "JavaScript">          //Returns the script to JavaScript to allow for functions to be used that are related to the HTML previous to this 


document.timer.timeBox.value = timeLeft        //Displays the time left before the game has even started and been clicked so the player immediately knows the time that they have to play with 


function timeDecrease(){           //This is the timer function that reduces the timer by a second each time to make the game slowly time out after 30 seconds 
setInterval(function(){timeLeft--         //I am still working on the refresh function but hopefully it will be corrected to make the table refresh with every 1000 miliseconds 
document.timer.timeBox.value=timeLeft; 
//document.tableDiv.reload(true)          //trying to get the reload function to work. 
},1000);                 //1000 miliseconds, therefore it is 1 second 
} 


while(timeLeft < 0){alert("Timeeeeeees Up, you scored: ", points ,"points! well done Duck Slayer!")} //Alert to signify the end of the game. 


// ----------------Function for clicking the duck----------------- 


function duckClick(){ 
points = points + 10; 
document.score.pointsscored.value = points;       //when the player clicks the duck, points will be added to the points box 
} 


</script> 
<center> 


<form name = "playButton"> 
<button type="button" onClick = "timeDecrease()">Play!</button>  <!This is the on click function that starts the game/countdown feature> 


</center> 
</form>  
</body> 
</html>

我有一個讓我的圖工作的問題。我目前正在製作一個簡單的點並點擊遊戲，並且我需要刷新表格以使圖像隨機化。這個想法是它每秒刷新一次，從腳本的前一部分出現真正的隨機化。問題是即使我已經設置了div標籤，並且正在使用重載功能，我仍無法獲取表格。我希望你能幫我找到解決辦法。表刷新，每秒

此外，該網站不承認部分，但我不明白如何獲得表刷新每一秒過去。

P.S如果你還沒有猜到我在編碼上很糟糕，但希望變得更好。

來源

2013-05-08 seniorjono

爲什麼在每個表格單元中調用函數「duSky（）」？ – Dirk 2013-05-08 11:05:15

afaik，'reload'只在'document'對象上定義（你需要一個來源來重新加載它，對吧？）。然而，總的來說設計是令人懷疑的：你在哪裏定義'timeLeft'？你如何取消沒有句柄的間隔功能？你的間隔功能不是沒有終止條件嗎？請注意，如果重新加載，您也重新加載腳本內容並丟失執行狀態。 – collapsar 2013-05-08 11:15:43

感謝您的建議，我會把整個腳本放在一個響應中，我只是不知道這是否是不必要的混亂。 – seniorjono 2013-05-08 11:35:58

使用jQuery，它會讓你的生活更輕鬆，因爲選擇器意味着你不必重複這麼多的代碼。

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

分配所有td元素在一個類中運行duSky()功能 - 我們也將採取劇本出來td，因爲我們打算從jQuery的document.ready功能運行：

<td class='dusky'></td>

接下來，我們做一個功能，每td與duSky()輸出分配：

<script> 
// This function takes every table cell with dusky class and inserts output of duSky() into it 
$(document).ready(function refresh(){ 
    $('.dusky).each(function(){ 
     this.html = duSky(); 
    }) 
}) 
</script>

最後，我們將其刷新每5秒：

<script> 
// Make our refresh script run every 5 seconds 
setInterval(refresh, 5000); 
</script>

注：我不能對此進行測試我在哪裏，代碼可能不是100％正確的，但是這是在正確的線路。如果你改變它並且有幫助，請給我正確的代碼，以便我可以編輯這篇文章，併爲未來的讀者提供一個更輕鬆的方式。

來源

2013-05-08 11:55:51

非常感謝。我即將嘗試這一點。你不知道你有多少幫助我，如果這個工程。如果它不，我仍然欣賞你付出的努力:) – seniorjono 2013-05-08 12:50:53

沒關係，誤讀它。：）謝謝！ – seniorjono 2013-05-08 12:54:48

對不起是一個完整的noobie，但我會把「」我現在把腳本語言或將我必須把它放在下面。或者只是用它來代替腳本語言。 – seniorjono 2013-05-08 13:01:00

表刷新，每秒

回答

相關問題