如何只刷新 JavaScript 代码的一部分而不是整个页面？
我试图弄清楚如何在不刷新整个页面的情况下刷新此代码。
这是它的工作原理。
- 页面已打开。
- 系统会提示用户选择蓝色、绿色或红色。
- 代码查看日期，然后确定小时。
- 代码用于选择代表小时第一位数字的图像。它还会选择图像的正确颜色。
我希望这段代码随着时间的变化刷新并显示新图像，而不是必须重新加载页面才能获取最新时间。
如果我刷新整个页面以保持时钟每秒更新，那么每次都会提示我选择一种颜色。我确实希望在刷新页面时发生这种情况，所以我希望只刷新时钟部分运行的页面部分。
我已经缩写了代码，以便仅显示第一个图像。也有分钟和秒，但就如何确定和显示而言，它们的作用几乎相同。
我已更改此处的代码，以使用 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
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. I used TinyURL to shorten the URL in the interest of space.
<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? 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? 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.
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. I have it commented pretty well.
http://cid-7cc3864d98261b77.office.live.com/browse.aspx/Shared%20Files?uc=1
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您需要做的只是将您的方法置于超时状态，以便稍后更新（您似乎已经将信息提取到名为
timewrite的方法中：实际上，这设置了一个重复调用每 3 秒写入一次。
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:Effectively, this sets up a recurring call to timewrite every 3 seconds.
根据需要使用 setTimeout() 或 setInterval() 重新运行代码。
Use setTimeout() or setInterval() to re-run your code as necessary.