Question

我试图找出如何在不刷新整个页面的情况下刷新此代码。

以下是它的工作原理。

页面已打开。
提示用户选择蓝色，绿色或红色。
代码查看日期，然后确定小时。
代码用于选择代表小时第一位数字的图像。它还会选择正确的图像颜色。

我希望此代码能够刷新并显示新图像，因为时间会发生变化，而不必重新加载页面以获得最新时间。

如果我刷新整个页面以保持时钟每秒更新一次，那么每次都会提示我选择一种颜色。我确实希望在刷新页面时发生这种情况，所以我希望只刷新时钟部分运行的页面部分。

我缩写了代码，只显示第一张图片。还有几分钟和几秒钟，但就它们的确定和显示方式而言，它们几乎完全相同。

我在这里更改了代码以使用来自URL的图像而不是保存文件的本地文件夹，以便您可以根据需要将其复制/粘贴到优先的HTML编辑器中。为了空间利益，我使用TinyURL来缩短URL。

    <html>
     <head>
     <script type="text/javascript">
     /*The following two variables are used to determine the hour.*/
     var d = new Date();
     var h = d.getHours();

     /*The following variable is used to pick either 1 or "blank" for 
    the first hour digit and display the corresponding image*/
     var h1
     if(h>=1&&h<=9)
     {
     h1=new Array();
     h1[0]=document.createElement('img');
     h1[0].src= "http://tinyurl.com/3qqsggj ";
     h1[1]=document.createElement('img');
     h1[1].src= "http://tinyurl.com/3n75atp ";
     h1[2]=document.createElement('img');
     h1[2].src= "http://tinyurl.com/3tcha7o ";
     } 
    else if(h>=13&&h<=21)
     {
     h1=new Array();
     h1[0]=document.createElement('img');
     h1[0].src= "http://tinyurl.com/3qqsggj ";
     h1[1]=document.createElement('img');
     h1[1].src= "http://tinyurl.com/3n75atp ";
     h1[2]=document.createElement('img');
     h1[2].src= "http://tinyurl.com/3tcha7o ";
     } 
    else
     { 
    h1=new Array();
     h1[0]=document.createElement('img');
     h1[0].src= "http://tinyurl.com/3s8wt8q ";
     h1[1]=document.createElement('img');
     h1[1].src= "http://tinyurl.com/3rz42gw ";
     h1[2]=document.createElement('img');
     h1[2].src= "http://tinyurl.com/3egvtho ";
     }

     /*The following function is used to take variable h1 and place 
    the image that corresponds to it into the table in the body*/
     function timewrite()
     {
     document.getElementById("hour1").appendChild(h1[colnum]);
     }

     </script>
     </head>
     <!--Body runs function timewrite() upon loading-->
     <body onload="timewrite()"> 
     <table border="5" bordercolor="black">
     <tr>
     <td>
     <span id="hour1"> <!--Here is where the h1 image goes--> </span>
     </td>
     </tr>
     </table>
     <script type="text/javascript">

     /*The following variable is used to determine whether the image
     for blue, green, or red should be shown.*/
     var col=prompt("Please enter blue, green, or red.");
     col=col.toLowerCase()

     /*The following variable converts variable col into a number
     so that it can easily be used to pick the correct h1 array 
    portion in the timewrite() function*/
     var colnum
     if(col=="blue")
     colnum=0;
     else if(col=="green")
     colnum=1;
     else if(col=="red")
     colnum=2;
     else
     colnum=1;
     </script>
     </body>
     </html>

提前感谢您的帮助。

我想知道setTimeout和/或setInterval是否因为变量保持其值而无效？就像在那里，“d”和“h”变量是一次性的，取消这些值，然后不更改它们，除非页面被刷新？我是否需要将变量放在函数或类似的东西中，以便可以刷新它们，还是随着时间的变化自动更新？顺便提一句，我对JavaScript相对较新，如果你想知道的话。

以下是整个代码的链接，如果有帮助的话。我做意识到它不是完成我正在做的事情的最有效方式，但我是JavaScript新手，而且，这是一个需要包含几个不同编程概念的项目。我评论得很好。 http://cid-7cc3864d98261b77.office.live.com/browse.aspx/Shared%20Files?uc=1

Answer 1

您需要做的只是将您的方法置于超时状态，以便稍后更新（您似乎已将信息提取到名为timewrite的方法中：

setInterval(function()
{
    timewrite();
}, 3000);

实际上，这会每隔3秒设置一次定时调用timewrite。

Answer 2

使用setTimeout()或setInterval（）根据需要重新运行代码。

我如何只刷新一部分JavaScript代码而不是整个页面？

2 个答案: