Question

<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)部分，但我不明白如何让每一秒都能刷新表格。

如果你没有猜到我在编码方面很糟糕，但希望变得更好，那就等了。

Answer 1

使用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％正确，但这是在正确的行。如果你改变它并且它有帮助，请给我正确的代码，这样我就可以编辑帖子，让未来的读者更轻松。

表刷新，每秒

1 个答案: