0 
<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)部分，但我不明白如何让表格在过去的每一秒内刷新。

PS如果你还没有猜到我在编码方面很糟糕，但希望能变得更好。

4

1 回答 1

1

使用 jQuery，它会让你的生活更轻松，因为选择器意味着你不必重复那么多代码。

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

将所有td元素分配给duSky()一个类中的运行函数——我们还将把脚本td从 jQuerydocument.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-08T11:55:51.913 回答