Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    Jul 2010
    Posts
    19
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Help with setInterval

    Hi, I've been working on a clock script that will appear on a frame of my site.
    Originally, I had used the following to refresh the page every second to the script shows the updated time and seconds.
    Code:
    <meta HTTP-EQUIV="Refresh" url="WEBSITE HERE" CONTENT="1">
    This worked but unfortunately, there was the refresh "tick" sound every second, which became too annoying!

    I found the "setInterval" method and tried to apply it to my code.

    For the purpose of this thread,
    I've created another script similar to mine, but about 1/20 as long, though the result is the same.
    I would like it to re-run every second using setInterval, but it only runs once and then disappears.

    Code:
    <script type="text/javascript">
    <!--
    updateClock();
    setInterval ("updateClock()", 1000);
    function updateClock() 
    {
    var t = new Date();
    var seconds = t.getSeconds();
    document.write(seconds);		
    }
    // -->		
    </script>

    Any help would be appreciated!! Thanks.

  • #2
    New Coder
    Join Date
    Jul 2010
    Posts
    61
    Thanks
    0
    Thanked 21 Times in 21 Posts
    I don't know where you expect that text to appear, but document.write cannot be used in a loaded document.
    The easiest solution is to write to the .value property of a styled form element.

  • #3
    New Coder
    Join Date
    Jul 2010
    Posts
    19
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I am doing this with Dreamweaver on an HTML page.

    It seems to work fine without the "updateClock" function and "setInterval".

  • #4
    New Coder
    Join Date
    Jul 2010
    Posts
    61
    Thanks
    0
    Thanked 21 Times in 21 Posts
    Quote Originally Posted by bcarter755 View Post
    I am doing this with Dreamweaver on an HTML page.

    It seems to work fine without the "updateClock" function and "setInterval".
    That's because it runs once at build time, but it cannot work thereafter.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Seconds</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <script type="text/javascript">
    
    function updateClock() 
    {
     document.getElementById('secs').value = new Date().getSeconds();
    }
    
    setInterval( updateClock, 995 );
    
    </script>
    
    </head>
    <body>
    <p>
     <input id='secs' style='border:inset 4px #00f;background-color:#0df;color:#000;font-size:1.2em;width:30px;padding: 4px;text-align:center'>
    </body>
    </html>

  • #5
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by bcarter755 View Post
    Hi, I've been working on a clock script that will appear on a frame of my site.
    Originally, I had used the following to refresh the page every second to the script shows the updated time and seconds.
    Code:
    <meta HTTP-EQUIV="Refresh" url="WEBSITE HERE" CONTENT="1">
    This worked but unfortunately, there was the refresh "tick" sound every second, which became too annoying!

    I found the "setInterval" method and tried to apply it to my code.

    For the purpose of this thread,
    I've created another script similar to mine, but about 1/20 as long, though the result is the same.
    I would like it to re-run every second using setInterval, but it only runs once and then disappears.

    Code:
    <script type="text/javascript">
    <!--
    updateClock();
    setInterval ("updateClock()", 1000);
    function updateClock() 
    {
    var t = new Date();
    var seconds = t.getSeconds();
    document.write(seconds);		
    }
    // -->		
    </script>

    Any help would be appreciated!! Thanks.

    It's working the first time because of this:
    Code:
    <script type="text/javascript">
    <!--
    updateClock();
    setInterval ("updateClock()", 1000);
    function updateClock() 
    {
    var t = new Date();
    var seconds = t.getSeconds();
    document.write(seconds);		
    }
    // -->		
    </script>
    Thereafter you get no results because you have not used setInterval correctly (you need to use window.setInterval, not just setInterval). Try something like this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>Test Page</title>
    <script type="text/javascript">
    //<!--
    var tick_tock = "";
    function updateClock(){
    	var t = new Date();
    	var seconds = t.getSeconds();
    	document.getElementById('clock').innerHTML=seconds;
    }
    function start_clock(){
    	tick_tock = window.setInterval ("updateClock()", 1000);
    }
    function stop_clock(){
    	window.clearInterval(tick_tock);
    }
    //-->
    </script>
    </head>
    <body>
    <input type="button" value="Start" onclick="start_clock();" />
    <input type="button" value="Stop" onclick="stop_clock();" />
    <div id="clock"></div>
    </body>
    </html>
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,613
    Thanks
    80
    Thanked 4,634 Times in 4,596 Posts
    you need to use window.setInterval, not just setInterval).
    Not true.

    It's true that in actuality the function is a method on the window object, but it's always legal to omit the window object name, as that is understood as the base object of everything on a page.

    It *is* true, though, that he needs to use
    Code:
    	document.getElementById('clock').innerHTML=seconds;
    rather than document.write.

    So:
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function updateClock()
    {
        document.getElementById('clock').innerHTML = ( new Date() ).getSeconds();
    }
    </script>
    </head>
    <body onload="updateClock(); setInterval(updateClock,1000);">
    ...
    <div id="clock"></div><!-- or could be a span -->
    ...
    </body>
    </html>
    Incidentally, the use of //<!-- and // --> with JavaScript code is long long obsolete. If you see that in a published script, it's an indication that the script is probably old and maybe not reliable.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,613
    Thanks
    80
    Thanked 4,634 Times in 4,596 Posts
    Sorry, my code is a virtual clone of Phil's. His use of 995 for the setInterval will cause the occasional "lag" on the clock, but it will work.

    I added the immediate call in the <body onload> so that the clock is set as soon as the page appears.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,613
    Thanks
    80
    Thanked 4,634 Times in 4,596 Posts
    And just in case...

    Try this as the sole contents of an HTML page. Try it in any browser:
    Code:
    <script>
    if ( setInterval == window.setInterval ) alert("identical");
    </script>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    New Coder
    Join Date
    Jul 2010
    Posts
    19
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks guys...
    Please bear with me here, as I am still new to JavaScript!

    My real code (before I added "setInterval") looked like this:
    • To display the Date (ie. July 20, 2010)
    • the local time (with seconds)
    • UTC time (zulu)
    • and server time (2 hours behind zulu time)


    I understand that I should not be using "document.write" but am unsure of any other way to code it.

    I am looking to change this so it will update the clock every second.
    If you can do that for me, I would really appreciate it!

    The code currently works perfectly the first time. All we need to do it keep it updating!

    Once again,
    Thanks!!!

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>JavaScript Time/Date</title>
    </head>
    
    <body>
    
    <script type="text/javascript">
    updateClock();
    function updateClock() 
    {
    
    var m_names = new Array("January", "February", "March", 
    "April", "May", "June", "July", "August", "September", 
    "October", "November", "December");
    var d = new Date();
    var curr_date = d.getDate();
    var curr_month = d.getMonth();
    var curr_year = d.getFullYear();
    var t = new Date();
    var curr_hours = t.getHours();
    var curr_minutes = t.getMinutes();
    var curr_seconds = t.getSeconds();
    if (curr_minutes < 10)
    	{
    	curr_minutes = "0" + curr_minutes;
    	}
    if (curr_seconds < 10)
    	{
    	curr_seconds = "0" + curr_seconds;
    	}
    var curr_time;
    if (curr_hours < 12 && curr_hours != 0)
    	{
    	curr_time = "am";
    	}
    if (curr_hours == 0)
    	{
    	curr_hours = 12;
    	curr_time = "am";
    	}	
    if (curr_hours == 12)
    	{
    	curr_time = "pm";
    	}
    if (curr_hours > 12)
    	{
    	curr_hours = curr_hours - 12;
    	curr_time = "pm";
    	}
    var curr_z_hour = t.getUTCHours();
    if (curr_z_hour < 10)
    	{
    	curr_z_hour = "0" + curr_z_hour;
    	}
    var curr_z_minutes = t.getUTCMinutes();
    var curr_s_hour = curr_z_hour;
    var curr_s_minutes = curr_z_minutes;	
    if (curr_z_minutes < 10)
    	{
    	curr_z_minutes = "0" + curr_z_minutes;
    	curr_s_minutes = "0" + curr_s_minutes;
    	}
    var s_back;
    
    s_back = 2;
    
    if (curr_z_hour >= 02 )
    	{
    	curr_s_hour = curr_z_hour - s_back;
    	}
    if (curr_z_hour == 01 )
    	{
    	curr_s_hour = 23;
    	} 
    if (curr_z_hour == 00)
    	{
    	curr_s_hour = 22;
    	}
    if (curr_s_hour < 10)
    	{
    	curr_s_hour = "0" + curr_s_hour;
    	}
    	
    document.write(m_names[curr_month] + " " + curr_date + "," + " " + curr_year + " " + " " + "|" + " " + " " + curr_hours + ":" + curr_minutes + ":" + curr_seconds + curr_time
    		+ " " + " " + "|" + " " + " " + curr_z_hour + ":" + curr_z_minutes + " zulu" + " " + " " + "|" + " " + " " + curr_s_hour + ":" + curr_s_minutes + " server");	
    }	
    </script>
    
    
    
    </body>
    </html>

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,613
    Thanks
    80
    Thanked 4,634 Times in 4,596 Posts
    Yes? And how did what we all wrote not give you the answer??

    In place of
    Code:
    document.write(m_names[curr_month] + " " + curr_date + "," + " " + curr_year + " " + " " + "|" + " " + " " + curr_hours + ":" + curr_minutes + ":" + curr_seconds + curr_time
    		+ " " + " " + "|" + " " + " " + curr_z_hour + ":" + curr_z_minutes + " zulu" + " " + " " + "|" + " " + " " + curr_s_hour + ":" + curr_s_minutes + " server");
    you will need to do
    Code:
    document.getElementById("clock").innerHTML = 
         (m_names[curr_month] + " " + curr_date + "," + " " + curr_year + " " + " " + "|" + " " + " " + curr_hours + ":" + curr_minutes + ":" + curr_seconds + curr_time
    		+ " " + " " + "|" + " " + " " + curr_z_hour + ":" + curr_z_minutes + " zulu" + " " + " " + "|" + " " + " " + curr_s_hour + ":" + curr_s_minutes + " server");
    And instead of the line in the code that calls it directly:
    Code:
    updateClock();
    just do
    Code:
    <body onload="updateClock(); setInterval(updateClock,1000);">
    And, finally, you need a <span id="clock"> or <div id="clock">
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #11
    New Coder
    Join Date
    Jul 2010
    Posts
    19
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    And, finally, you need a <span id="clock"> or <div id="clock">
    Thank you!
    Except, how do I implement this?

    I know I would have to do something like </div> near the bottom, right?

    This is my first time writing in JavaScript! I'm just not sure where everything should go.

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,613
    Thanks
    80
    Thanked 4,634 Times in 4,596 Posts
    It really doesn't matter where you put things.

    The only important part is the <body> tag, where you need the onload as I showed you. (Even that can be changed, and should be if there is anything else also being activated at page load time.)

    The <script> tag can really go anywhere. Traditionally, it is put in the <head>...</head>, but many people are now opting to put it at the bottom of the page.

    The <div id="clock"> should simply be put wherever on the page you want the clock to appear. Same as any other <div> (or <span>).

    Just try it!
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #13
    New Coder
    Join Date
    Jul 2010
    Posts
    19
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Sorry, am I working with everything in <head>... </head> or <body>... </body>?
    I've tried everything and get no result.

    Again, I have had no prior experience with any of this.

    Thanks.

  • #14
    New Coder
    Join Date
    Jul 2010
    Posts
    19
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Currently, I have...

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>JavaScript Time/Date</title>
    </head>
    <body onload="updateClock(); setInterval(updateClock,1000);">
    
    
    <script type="text/javascript">
    <div id="clock">
    function updateClock() 
    {
    var m_names = new Array("January", "February", "March", 
    "April", "May", "June", "July", "August", "September", 
    "October", "November", "December");
    var d = new Date();
    var curr_date = d.getDate();
    var curr_month = d.getMonth();
    var curr_year = d.getFullYear();
    var t = new Date();
    var curr_hours = t.getHours();
    var curr_minutes = t.getMinutes();
    var curr_seconds = t.getSeconds();
    if (curr_minutes < 10)
    	{
    	curr_minutes = "0" + curr_minutes;
    	}
    if (curr_seconds < 10)
    	{
    	curr_seconds = "0" + curr_seconds;
    	}
    var curr_time;
    if (curr_hours < 12 && curr_hours != 0)
    	{
    	curr_time = "am";
    	}
    if (curr_hours == 0)
    	{
    	curr_hours = 12;
    	curr_time = "am";
    	}	
    if (curr_hours == 12)
    	{
    	curr_time = "pm";
    	}
    if (curr_hours > 12)
    	{
    	curr_hours = curr_hours - 12;
    	curr_time = "pm";
    	}
    var curr_z_hour = t.getUTCHours();
    if (curr_z_hour < 10)
    	{
    	curr_z_hour = "0" + curr_z_hour;
    	}
    var curr_z_minutes = t.getUTCMinutes();
    var curr_s_hour = curr_z_hour;
    var curr_s_minutes = curr_z_minutes;	
    if (curr_z_minutes < 10)
    	{
    	curr_z_minutes = "0" + curr_z_minutes;
    	curr_s_minutes = "0" + curr_s_minutes;
    	}
    var s_back;
    
    s_back = 2;
    
    if (curr_z_hour >= 02 )
    	{
    	curr_s_hour = curr_z_hour - s_back;
    	}
    if (curr_z_hour == 01 )
    	{
    	curr_s_hour = 23;
    	} 
    if (curr_z_hour == 00)
    	{
    	curr_s_hour = 22;
    	}
    if (curr_s_hour < 10)
    	{
    	curr_s_hour = "0" + curr_s_hour;
    	}
    	
    document.getElementById("clock").innerHTML = 
         (m_names[curr_month] + " " + curr_date + "," + " " + curr_year + " " + " " + "|" + " " + " " + curr_hours + ":" + curr_minutes + ":" + curr_seconds + curr_time
    		+ " " + " " + "|" + " " + " " + curr_z_hour + ":" + curr_z_minutes + " zulu" + " " + " " + "|" + " " + " " + curr_s_hour + ":" + curr_s_minutes + " server");
    	
    	
    }	
    
    </div>
    </script>
    
    
    
    </body>
    </html>

  • #15
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,613
    Thanks
    80
    Thanked 4,634 Times in 4,596 Posts
    You can *NOT* put HTML tags inside of <script>...</script>

    Move your <div> *OUT* of the <script> block.

    There is NO NEED at all for the <div> and the <script> to even be close to each other on the page.

    Again, I would *STRONGLY* suggest--until you start learning more things---that you stick with putting the <script> inside the <head>. And the <div> *MUST* of course go in the <body>.

    See my code example in post #6 in this thread.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  
    Page 1 of 2 12 LastLast

    LinkBacks (?)


    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •