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

Question

I am trying to figure out how I can get just this code to refresh without the whole page refreshing. 我试图弄清楚如何在不刷新整个页面的情况下刷新此代码。

Here is how it works. 下面是它的工作原理。

Page is opened. 页面已打开。
User is prompted to pick blue, green, or red. 提示用户选择蓝色，绿色或红色。
Code looks at date, and then determines the hour. 代码查看日期，然后确定小时。
Code is used to pick an image that represents the first digit of the hour. 代码用于选择代表小时首位数字的图像。 It also chooses the correct color of the image. 它还选择正确的图像颜色。

I'd like this code to refresh and display a new image as the time changes rather that having to reload the page to get the most current time. 我希望这段代码在时间变化时刷新并显示新图像，而不必重新加载页面以获取最新时间。

If I make the entire page refresh to keep the clock updating every second, then I am prompted everytime to pick a color. 如果我刷新整个页面以使时钟每秒更新一次，那么每次都会提示我选择一种颜色。 I do want that to happen when the page is refreshed though, so I am looking to just refresh the portion of the page that the clock portion runs in. 我确实希望在刷新页面时发生这种情况，所以我希望只刷新运行时钟部分的页面部分。

I have abbreviated the code so that only the first image shows. 我已将代码缩写为仅显示第一个图像。 There are minutes and seconds as well, but they all do pretty much the same thing as far as how they are determined and are displayed. 也有分钟和秒，但是就如何确定和显示它们而言，它们几乎都做相同的事情。

I have altered the code here to use images from a URL instead of the local folder that the file is kept in so that you can copy/paste it into your preffered HTML editor if you wish. 我在这里更改了代码，以使用URL中的图像而不是文件所在的本地文件夹，以便您可以根据需要将其复制/粘贴到首选的HTML编辑器中。 I used TinyURL to shorten the URL in the interest of space. 我出于空间原因使用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>

Thanks in advance for your help. 在此先感谢您的帮助。

I would wonder if setTimeout and/or setInterval would not be effective beause the variables are keeping their values? 我想知道setTimeout和/或setInterval是否会因为变量保持其值而无效？ As in, are the"d" and "h" variables looing at the time once, taking on those values, and then not changing them unless the page is refreshed? 像这样，“ d”和“ h”变量是否一次在一次刷新，采用这些值，然后除非更改页面就不更改它们？ Do I need to put the variables in a function or something like that, so that they can be refreshed, or will they automatically update as the time changes? 我是否需要将变量放入函数或类似的函数中，以便可以刷新它们，或者它们会随着时间的变化自动更新？ I am relatively new to JavaScript by the way, in case you were wondering. 顺便说一下，如果您想知道的话，我对JavaScript还是比较陌生的。

Here is a link to the entire code if that will help. 如果有帮助的话，这里是整个代码的链接。 I do realize that it is not the most efficient way to accomplish what I am doing, but I am new to JavaScript, and also, this is a project that needs to contain several different programming concepts. 我确实意识到这不是完成我正在做的事的最有效方法，但是我对JavaScript还是陌生的，而且，这是一个项目，需要包含几个不同的编程概念。 I have it commented pretty well. 我的评论很好。 http://cid-7cc3864d98261b77.office.live.com/browse.aspx/Shared%20Files?uc=1 http://cid-7cc3864d98261b77.office.live.com/browse.aspx/Shared%20Files?uc=1

Answer 1

What you need to do is just put your method into a timeout so it updates at a later time (you seem to have already extracted the info to a method called timewrite : 您需要做的就是将您的方法置于超时状态，以便在以后的时间进行更新（您似乎已将信息提取到名为timewrite的方法中：

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

Effectively, this sets up a recurring call to timewrite every 3 seconds. 有效地，这设置了一个定期调用，每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