www.webdeveloper.com
Results 1 to 8 of 8

Thread: Javascript Countdown from 15 Specific delays between each number.

  1. #1
    Join Date
    May 2014
    Posts
    4

    Javascript Countdown from 15 Specific delays between each number.

    I have little javascript knowledge. I can work with it but not create it.

    My needs:

    Numeric countdown from 15.
    Must be able to set a specific delay between each number.

    ex. 1 second delay between 14 and 13. Half second delay between 13 and 12.

    I always seem to ask questions that are simple for those who know what they are doing, so be gentle

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,443
    What are the rest of your requirements?
    Does the delay continue to be halved for remaining numbers?
    What event starts the countdown sequence?
    Countdown to what other number? Zero?
    What is supposed to happen when the countdown completes? Alert message?

  3. #3
    Join Date
    May 2014
    Posts
    4
    Thanks for your questions.

    Does the delay continue to be halved for remaining numbers?

    They delay does not continue to be halved, each one must be unique. Ex, 1 second delay between 14 and 13. Half second delay between 13 and 12. 2 second delay between 12 and 11. 4 second delay between 11 and 10. etc.

    What event starts the countdown sequence?

    Page load starts the countdown sequence.

    Countdown to what other number? Zero?

    The countdown number must also be dynamic, example the ability to stop at 4, 3, 2 etc.

    What is supposed to happen when the countdown completes? Alert message?

    When the countdown completes the countdown number will change to a block of text replacing the number, ex. once it hits 4 it displays "complete".

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,443

    Question

    More questions:

    1. What are the delays for each of intervals desired? Are they constant?
    For example:
    Code:
    15 ? sec delay?
    14 1 sec
    13 1/2 sec delay
    12 2 sec delay
    11 4 sec delay
    10 ? sec delay?
    9 ? sec
    8 ? sec
    ... ? sec
    
    rest of etc. sequence?
    2. How is the final (random) countdown value determined? etc.

    etc. is not a number.



    It does no one any good to start programming anything until all the parameters and limits of the script are determined. My thoughts are running along the lines of creating an array of the intervals and using the setTimeout() function to display the decreasing values 15 to the end point.

  5. #5
    Join Date
    May 2014
    Posts
    4
    Quote Originally Posted by JMRKER View Post
    More questions:

    1. What are the delays for each of intervals desired? Are they constant?
    For example:
    Code:
    15 ? sec delay?
    14 1 sec
    13 1/2 sec delay
    12 2 sec delay
    11 4 sec delay
    10 ? sec delay?
    9 ? sec
    8 ? sec
    ... ? sec
    
    rest of etc. sequence?
    2. How is the final (random) countdown value determined? etc.

    etc. is not a number.



    It does no one any good to start programming anything until all the parameters and limits of the script are determined. My thoughts are running along the lines of creating an array of the intervals and using the setTimeout() function to display the decreasing values 15 to the end point.
    I would like the times to be editable. So any second delay is fine. As long as I can change the time on each it is fine; this works:

    15 - 4
    14 - 1
    13 - 1/2
    12 - 2
    11 - 3
    10 - 1
    9 - 1
    8 -2
    7 - 3
    6 - 2
    5 - 1
    4 - 4
    3 - 1
    2 - 2
    1 - 1

    The final countdown value is not random, it would be pre determined by setting a variable. For this example, lets use 3, the script stops at 3.

    Your help is greatly appreciated.

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,443
    Adjust as needed...

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    
    <title> HTML5 page </title>
    <style>
     #countdown { font-size:4em; color:#ff0000; }
    </style>
    </head>
    <body>
    <div id="countdown"></div>
    
    <script type="text/javascript">
    //      countdown: 15,  14,  13,  12,  11,  10,   9,   8,   7,   6,   5,   4,   3,   2,   1,   0
    var intervals = [4000,1000, 500,2000,3000,1000,1000,2000,3000,2000,1000,4000,1000,2000,1000,  10];
    var countdown = 0;
    var endcount = 3;
    function countDisplay() {
       countdown++;
       if (countdown < intervals.length-endcount) {
        document.getElementById('countdown').innerHTML = intervals.length-countdown;
        setTimeout(countDisplay,intervals[countdown]);
      } else document.getElementById('countdown').innerHTML = 'Complete';
    }
    window.onload = function() { countDisplay(); }
    </script>
    
    </body>
    </html>
    Good Luck!

  7. #7
    Join Date
    May 2014
    Posts
    4
    Thank you very much! Works great! You sure do know your javascript

    Thanks again.

  8. #8
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,443
    Quote Originally Posted by TheHTMLMan View Post
    Thank you very much! Works great! You sure do know your javascript

    Thanks again.
    You're most welcome.
    Happy to help when I get full information.
    Good Luck!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles