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.
Results 1 to 7 of 7

Thread: JS clock

  1. #1
    New Coder
    Join Date
    Dec 2010
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    JS clock

    Hello. I am trying to stop and then start my clock, but something goes wrong
    Code:
    <script type="text/javascript">
    
    function start_clock(){
        
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    // add a zero in front of numbers<10
    m = checkTime(m);
    s = checkTime(s);
    document.getElementById('clck').innerHTML = h+":"+m+":"+s;
    t=setTimeout('start_clock()');
    }
    
    function checkTime(i)
    {
    if (i<10)
      {
      i="0" + i;
      }
    return i;
    }
    
        var intval=""
        function start_Int(){
            if(intval==""){
              intval=window.setInterval("start_clock()",1000)
          }else{
              stop_Int()
          }
        }
    
        function stop_Int(){
            if(intval!=""){
              window.clearInterval(intval)
              intval=""
              myTimer.innerHTML="Interval Stopped"
          }
        }
    
        
    </script>
    
    
    <h1>A live clock in JavaScript</h1>
    </head>
    <body onload="start_clock()">
    
    <p>The time according to your PC is </p>
    
    <span id="clck">Interval Stopped</span>
        <br><br><br>
        <input type="button" value="Start" onclick="start_Int()">
        <input type="button" value="Stop" onclick="stop_Int()">
    Any help will be appreciated.

  • #2
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Your clock display function uses calls setTimeout to set-up the next call, but you're calling setInterval to start it. It needs to be one or the other not both.
    There's no need to check the status of the interval value before calling clearInterval.
    It makes more sense for the function that starts the clock to be separate from the one that displays it.
    Code:
    <html>
    <head>
    <title> stopwatch </title>
    <script type="text/javascript">
    
    var intVal = null;
    
    function show_clock()
    {    
     var today = new Date();
     var h = today.getHours();
     var m = today.getMinutes();
     var s = today.getSeconds();
    
     m = ( m < 10 ? '0' : '' ) + m;
    
     s = ( s < 10 ? '0' : '' ) + s;
    
     document.getElementById('clck').innerHTML = h + ":" +m+ ":" +s;
    }
    
    function start_Int()
    {
     intVal = setInterval( show_clock, 995 );
    }
    
    function stop_Int()
    {
     clearInterval( intVal );
    
     document.getElementById('clck').innerHTML = "Interval Stopped";
    }
    
        
    </script>
    
    
    <h1>A live clock in JavaScript</h1>
    </head>
    <body onload="start_Int()">
    
    <p>The time according to your PC is </p>
    
    <span id="clck"></span>
        <br><br><br>
        <input type="button" value="Start" onclick="start_Int()">
        <input type="button" value="Stop" onclick="stop_Int()">
    </body>
    </html>

  • #3
    Regular Coder Krupski's Avatar
    Join Date
    Dec 2010
    Location
    United States of America
    Posts
    505
    Thanks
    39
    Thanked 47 Times in 46 Posts
    Quote Originally Posted by Painfall View Post
    Hello. I am trying to stop and then start my clock, but something goes wrong
    Here's an incredibly simple live JS clock that will show you the basic concept of what you should do:

    Code:
    <html>
    <head>
    <title>Clock</title>
    <script type="text/javascript">
    function clock()
    {
        var d = new Date();
        var hour = d.getHours();
        var mins = d.getMinutes();
        var secs = d.getSeconds();
        var str = hour + ':' + mins + ':' + secs;
        var e = document.getElementById('clock');
        e.innerHTML = str;
        setTimeout('clock()', 1000);
    }
    </script>
    </head>
    <body>
    <span id="clock"></span>
    <script type="text/javascript">
    clock();
    </script>
    </body>
    </html>
    Near the bottom, the line clock(); "kick-starts" the clock by calling it once. After that, the clock calls itself again and again every 1000 milliseconds (1 second) to provide live update.

    Lastly, if you want to really format your time nicely and easily, check out "Date Format" by Steven Levithan (LINK).

    Good luck!

    -- Roger
    "Anything that is complex is not useful and anything that is useful is simple. This has been my whole life's motto." -- Mikhail T. Kalashnikov

  • #4
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by Krupski View Post
    Here's an incredibly simple live JS clock that will show you the basic concept of what you should do:
    That adds nothing to what the OP had initially and doesn't address the question.

  • #5
    Regular Coder Krupski's Avatar
    Join Date
    Dec 2010
    Location
    United States of America
    Posts
    505
    Thanks
    39
    Thanked 47 Times in 46 Posts
    Quote Originally Posted by Logic Ali View Post
    That adds nothing to what the OP had initially and doesn't address the question.
    Code:
    <html>
    <head>
    <title>Clock</title>
    <script type="text/javascript">
    var c = false;
    function clock() {
        var d = new Date();
        var hour = twoDigits(String(d.getHours()));
        var mins = twoDigits(String(d.getMinutes()));
        var secs = twoDigits(String(d.getSeconds()));
        var str = hour + ':' + mins + ':' + secs;
        var e = document.getElementById('clock');
        e.innerHTML = str;
    }
    function twoDigits(text) {
        while(text.length < 2) { text = '0' + text; }
        return text;
    }
    </script>
    </head>
    <body>
    Clock:
    <input type="button" value="Start" onclick="c=setInterval('clock()',1000);" />
    <input type="button" value="Stop" onclick="clearInterval(c);" />
    <br /><br />
    <span style="font-size:24px;" id="clock">------</span>
    </body>
    </html>
    "Anything that is complex is not useful and anything that is useful is simple. This has been my whole life's motto." -- Mikhail T. Kalashnikov

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,596
    Thanks
    78
    Thanked 4,387 Times in 4,352 Posts
    You have lost all your paragraphs???
    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
    Regular Coder Krupski's Avatar
    Join Date
    Dec 2010
    Location
    United States of America
    Posts
    505
    Thanks
    39
    Thanked 47 Times in 46 Posts
    Quote Originally Posted by Old Pedant View Post
    You have lost all your paragraphs???
    No, I'm lost inside a paragraph!

    It's a little joke about TinyMCE (the WYSIWYG editor). The guy who wrote it is fanatical about outputting "proper" HTML. One of the things it does is make every line a paragraph. Hitting enter genetates <p>&nbsp;</p> and every line is surrounded with <p> tags.

    This is all fine and dandy, except that when people (like me) want to use it for a message board's user input (usually to replace a textarea), things work much better when new lines are <br />.

    In order to use the editor with a message board, it's output has to be intercepted, the <p> tags stripped out and the proper <br /> tags put in.

    It's tricky because the editor sometimes wants to grab the text back and add the <p> tags back in, which can result in double spaced text (because of <p></p> plus <br />).

    The key is to find the right place to intercept the data stream.

    So, in "honor" (?) of my battles with TinyMCE, it's cryptic documentation and it's propensity to change EVERYTHING into what IT thinks is proper, I put the <p></p> thing in my profile location.

    Actually, I'm in New York State, USA (north-east corner of the Country).

    So there you have it!

    -- Roger
    "Anything that is complex is not useful and anything that is useful is simple. This has been my whole life's motto." -- Mikhail T. Kalashnikov


  •  

    Posting Permissions

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