Results 1 to 3 of 3

Thread: countdown clock

  1. #1
    Join Date
    Oct 2015
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default countdown clock

    I am new to js and I am trying tutorials for a countdown clock with buttons to activate the functions. I have gotten it to start and countdown to 0 then alert a message and I got a clear button that clears it to 0 and a stop button to stop at whatever time before 0. My problem is I have not been able to get a button to work to resume the countdown at the time stopped. Was wondering if anyone can help out? Here is the code I have for the 3 buttons. How can I do a function for the time it is stopped at?

    Code:
    var running = false
    var endTime = null
    var timerID = null
    function startTimer() {
        running = true
        now = new Date()
        now = now.getTime()
        // change last multiple for the number of minutes
        endTime = now + (1000 * 30 * 1)
        showCountDown()
    }
    function showCountDown() {
        var now = new Date()
        now = now.getTime()
        if (endTime - now <= 0) {
            stopTimer()
    
    alert("Time is up. Get back to work!.")
        } else {
            var delta = new Date(endTime - now)
            var theMin = delta.getMinutes()
            var theSec = delta.getSeconds()
            var theTime = theMin
            theTime += ((theSec < 10) ? ":0" : ":") + theSec
            document.forms[0].timerDisplay.value = theTime
            if (running) {
                timerID = setTimeout("showCountDown()",1000)
            }
        }
    }
    function stopTimer() {
        clearTimeout(timerID)
        running = false
        document.forms[0].timerDisplay.value = "0:00"
    }
    
    function stopTimertwo() {
        clearTimeout(timerID)
        running = false
        document.forms[0].timerDisplay.value = theTime
    }
    Code:
    <html>
    <head>
    <title>Countdown clock</title>
    
    <script type = "text/javascript" src="clock.js"></script>
    
    </head>
    
    <body>
    
    <FORM>
    <INPUT TYPE="button" NAME="startTime" VALUE="Start/Reset"
     onClick="startTimer()">
     <INPUT TYPE="button" NAME="stopTime" VALUE="Stop Timer"
     onClick="stopTimertwo()">
    <INPUT TYPE="button" NAME="clearTime" VALUE="Clear Timer"
     onClick="stopTimer()">
    <INPUT TYPE="text" NAME="timerDisplay" VALUE="0:30">
    </FORM>
    
    </body>
    </html>
    Last edited by Beverleyh; 10-29-2015 at 05:49 PM. Reason: formatting

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    I have not been able to get a button to work to resume the countdown at the time stopped
    What have you tried so far?

    My thoughts - I would turn stopTimertwo() into a toggle.

    The first problem I see is that the theTime variable isn't available outside of the showCountDown() function, so try defining it at the start, outside all the functions instead, then it will be available from within stopTimertwo().

    The next problem I see is that you'd want to (re)use the startTimer() function to resume the timer, but to do that, you'll need to adapt it slightly so that the seconds from stopTimertwo() can be passed in to it as a variable (so that it resumes from the countdown time and not a fixed 30 seconds count). You'll pass the countdown time from the theTime variable except, 3rd problem, the formatting of theTime will be something like "0:14", so you'll need to run it through a function to convert it back to straight seconds. This looks promising http://stackoverflow.com/a/9640417

    Post back with what you've tried and I'll take a look later.

    ps - Don't forget to end your lines with semi-colons otherwise minifiers and such will mung your code.
    Last edited by Beverleyh; 10-29-2015 at 07:36 PM.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. #3
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    Code:
    <html>
    <head>
    <title>Countdown clock</title>
    
    <script type = "text/javascript">
    
    var endTime = null
    var timerID = null
    
    function startTimer(t) {
        var t=t||document.getElementById('timerDisplay').value||'0:30';
    
        t=t.split(':'); // split the value into minutes and seconds
        if (isFinite(t[0])*1&&isFinite(t[1])*1){ // check the format of t is correct
         t=t[0]*60+t[1]*1; // covert to seconds
         var now = new Date().getTime();
        // change last multiple for the number of minutes
         endTime = now + (1000 * t * 1);
         showCountDown();
        }
    }
    
    function showCountDown() {
        var now = new Date();
        now = now.getTime();
        if (endTime - now <= 0) {
            stopTimer();
    
    alert("Time is up. Get back to work!.");
        } else {
            var delta = new Date(endTime - now);
            var theMin = delta.getMinutes();
            var theSec = delta.getSeconds();
            var theTime = theMin;
            theTime += ((theSec < 10) ? ":0" : ":") + theSec;
            document.getElementById('timerDisplay').value = theTime;
            timerID = setTimeout(function(){ showCountDown(); },1000);
        }
    }
    function stopTimer() {
        clearTimeout(timerID);
        document.getElementById('timerDisplay').value = "0:00"
    }
    
    function stopTimertwo() {
        clearTimeout(timerID);
        running = false;
    //    document.forms[0].timerDisplay.value = theTime //  theTime is a local variabe only accessbable in function  showCountDown()
    }
    
    function setTimer(t) {
        clearTimeout(timerID);
        document.getElementById('timerDisplay').value = t;
    }
    
    </script>
    
    </head>
    
    <body>
    
    <FORM>
    <INPUT TYPE="button" NAME="startTime" VALUE="Start"
     onClick="startTimer()">
     <INPUT TYPE="button" NAME="stopTime" VALUE="Stop Timer"
     onClick="stopTimertwo()">
    <INPUT TYPE="button" NAME="clearTime" VALUE="Clear Timer"
     onClick="stopTimer()">
    <INPUT TYPE="button" NAME="setTime" VALUE="Set Timer"
     onClick="setTimer('0:45')">
    <INPUT TYPE="text" NAME="timerDisplay" id="timerDisplay" VALUE="0:30">
    </FORM>
    
    
    </body>
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Similar Threads

  1. Countdown clock
    By DrSkull in forum Flash
    Replies: 0
    Last Post: 08-24-2010, 11:19 AM
  2. Problem with countdown clock
    By taliets in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 11-21-2007, 10:07 PM
  3. Countdown clock
    By bleak in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 10-14-2005, 10:34 PM
  4. Countdown clock
    By bleak in forum HTML
    Replies: 0
    Last Post: 10-14-2005, 09:06 PM
  5. Countdown clock on website?
    By kevdmb in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 01-07-2005, 07:22 AM

Bookmarks

Posting Permissions

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