【发布时间】：2013-05-02 14:00:57
【问题描述】：
<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 标签并且我正在使用重新加载功能，我也无法刷新表格。我希望你能帮我找到解决办法。
此外，该网站无法识别 document.tableDiv.reload(true) 部分，但我不明白如何让表格在过去的每一秒内刷新。
P.S 如果你没有猜到我在编码方面很糟糕，但希望能变得更好。
【问题讨论】：
-
为什么在每个表格单元格中都调用函数“duSky()”？
-
afaik，
reload仅在document对象上定义（您需要一个源来重新加载它，对吧？）。但是，总体而言，该设计令人怀疑：您在哪里定义timeLeft？如何在没有句柄的情况下取消间隔函数？你的区间函数不是没有终止条件吗？请注意，在重新加载的情况下，您也会重新加载脚本内容并丢失执行状态。 -
感谢您的建议，我会将整个脚本放入回复中，我只是不知道这是否是不必要的混乱。
-
将整个脚本添加到文档中。对于那个很抱歉。在这方面真的需要帮助。非常感谢您的宝贵时间。
标签： javascript html html-table refresh