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

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 个解决方案

解决方案1
4 2011-05-13 15:57:51

解决方案2
1 2011-05-13 15:57:08

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

问题描述

2 个解决方案

解决方案1 4 2011-05-13 15:57:51

解决方案2 1 2011-05-13 15:57:08

解决方案1
4 2011-05-13 15:57:51

解决方案2
1 2011-05-13 15:57:08