How would I refresh just a portion of JavaScript code and not the entire page?
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. 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
2 answers
solution1
4 2011-05-13 15:57:51
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 :
setInterval(function()
{
timewrite();
}, 3000);
Effectively, this sets up a recurring call to timewrite every 3 seconds.
solution2
1 2011-05-13 15:57:08
根据需要使用setTimeout（）或setInterval（）重新运行代码。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.