www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 18

Thread: Countdown Script Required

Hybrid View

  1. #1
    Join Date
    Dec 2012
    Location
    Central Coast, NSW, Australia
    Posts
    21

    Countdown Script Required

    Hi, this is my first post and Iím not sure what I am asking is possible but I require a script where users can;
    enter a value (V1) say 1000
    with a starting time (T1) say 3.35pm
    and date (D2) say 21/12/12
    then a lesser value (V2) say 750
    with a finishing time (T2) say 9.05pm
    and date (D2) say 25/12/12
    Once all of the info is entered V1 is then reduced over time (T1 & D1 minus T2 & D2) by the difference between V1 & V2.
    Example: Difference between V1 & V2 is 250.00, Difference between T1;D1 and T2;D2 is 4 days 6 Ĺ hours = 102.5 hours = 6150 minutes = 369000 seconds.
    Therefore 1000.00 needs to be reduced by 250.00 to 7500.00 in 369000 seconds.

    I would have liked to do it myself however I find Java Script completely foreign to me, I have been staring at it for many hours and have tried different things but only make it worse!

    Below is a 2006 script that is in this forum however the person that posted it doesnít appear to be around any longer. I donít know if itís of any help and I donít have the required skills to modify it to suit my needs.

    Thanks in Advance.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Language" content="en-us">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Currency Countdown</title>
    <script type="text/javascript">
    <!--//
    String.prototype.toNumber = function() {
    // convert number-formatted string into a numeric result
    var nbr = Number(this);
    return ((isNaN(nbr)) ? 0 : nbr);
    }
    Number.prototype.toCurrency = function() {
    // convert number into a currency-formatted string result
    var symb = (arguments.length>0) ? arguments[0] : "$,.";
    symb = ((typeof(symb)=="string" && symb.length==3) ? symb : "$,.").split("");
    var nbr = this.toString().toNumber().toString();
    dec = Math.floor((nbr*100+0.5)%100);
    nbr = Math.floor((nbr*100+0.5)/100).toString();
    if (dec < 10) dec = "0" + dec;
    for (var i = 0; i < Math.floor((nbr.length-(1+i))/3); i++) {
    nbr = nbr.substring(0,nbr.length-(4*i+3))+symb[1]+nbr.substring(nbr.length-(4*i+3));
    }
    return (symb[0] + nbr + symb[2] + dec);
    }
    var USAcurrency = "$,.";
    //-->
    </script>
    <script type="text/javascript">
    <!--//
    var begDate = new Date("03/30/2006");
    var amount = 19000.00;
    function CurrencyCountdown() {
    var minutes = Math.floor(((new Date()).getTime() - begDate.getTime()) / 1000 / 60);
    var amt = amount - (minutes * .01);
    document.getElementById("countdown").innerHTML = amt.toCurrency(USAcurrency);
    window.setTimeout("CurrencyCountdown()", 10000); // repeat every 10 seconds
    return true;
    }
    window.onload = CurrencyCountdown;
    //-->
    </script>
    </head>

    <body>
    <div id="countdown"></div>
    </body>
    </html>

  2. #2
    Join Date
    Dec 2012
    Posts
    54
    Are you wanting to actually perform this countdown as well? Or are you just looking to display how many seconds between each count back to the user?

  3. #3
    Join Date
    Dec 2012
    Location
    Central Coast, NSW, Australia
    Posts
    21
    Hi Lesshardtoofind, yes I would like the countdown to begin once the information is entered and the user clicks on a 'Submit' button. I am now thinking that a 'Starting Time' and 'Starting Date' will not be required as the actual real time and date when the user Submits their info can be used.

  4. #4
    Join Date
    Nov 2010
    Posts
    1,082
    something like this?
    Code:
    <html>
    <head>
    <style type="text/css">
    </style>
    </head>
    <body>
    <form>
    V1:<input id="v1">V2:<input id="v2"><br>
    Enter the end date:<br> 
    hours:<input id="hrs">minutes:<input id="min">day:<input id="day">month:<input id="mth">year:<input id="yr"><br> 
    <input type="button" onclick="countDown(this.form)" value="start">
    </form>
    <div id="counter"></div>
    <script>
    function countDown(frm){
    var step=frm.v1.value-frm.v2.value;
    var now=new Date();
    var end=new Date(Date.parse(frm.mth.value+ " "+frm.day.value+" "+frm.yr.value+" "+frm.hrs.value+":"+frm.min.value));
    var diff = Math.ceil((end - now)/1000);
    document.getElementById("counter").innerHTML=diff;
    var myint=setInterval(function(){diff=diff-step; document.getElementById("counter").innerHTML=diff; 
    if(diff<0){document.getElementById("counter").innerHTML="time's up!";clearInterval(myint)}},1000);
    }
    
    </script>
    </body>
    </html>

  5. #5
    Join Date
    Dec 2012
    Location
    Central Coast, NSW, Australia
    Posts
    21
    You amaze me with your JavaScript skills; I hope to learn it eventually. It looks as though it is exactly what I am after however it did not work for me, I got the "NaN" error. This is what I enetered in the form;
    V1: 500
    V2: 400
    hours: 11
    minutes: 33
    day: 31
    month: 12
    year: 2012

    I tried quite a few different combinations but with no luck. I have also '"stared" at the code but I'm not sure what to look for! Thanks again for your help.

  6. #6
    Join Date
    Nov 2010
    Posts
    1,082
    huh. Seems like IE doesn't like Date.parse (or doesn't like the way I use it, anyway...). Thanks for pointing that out.

    No biggie - just change that line to this:
    Code:
    var end=new Date(frm.yr.value,frm.mth.value-1,frm.day.value,frm.hrs.value,frm.min.value);
    Last edited by xelawho; 12-24-2012 at 07:47 AM.

  7. #7
    Join Date
    Nov 2010
    Posts
    1,082
    oh, I get it now... IE's Date.parse freaks out if you give it a number for the month - it wants a string... either Jan or January works...

  8. #8
    Join Date
    Dec 2012
    Location
    Central Coast, NSW, Australia
    Posts
    21
    Thanks it's working now using the numbers. Almost there; I may not have explained it clearly in my first post, however I would like V1 to drop (countdown) by the calculated seconds. I would like that count (V1 counting down to V2) to be displayed and not the seconds.

    Here it is again. I did notice I had a typo in the last line - "750" was "7500" in the example in the first post.
    enter a value (V1) say 1000
    with a starting time (T1) say 3.35pm
    and date (D2) say 21/12/12
    then a lesser value (V2) say 750
    with a finishing time (T2) say 9.05pm
    and date (D2) say 25/12/12
    Once all of the info is entered V1 is then reduced over time (T1 & D1 minus T2 & D2) by the difference between V1 & V2.
    Example: Difference between V1 & V2 is 250.00, Difference between T1;D1 and T2;D2 is 4 days 6 ÔŅĹ hours = 102.5 hours = 6150 minutes = 369000 seconds.
    Therefore 1000.00 needs to be reduced by 250.00 to 750.00 in 369000 seconds.

    So (in the example) the count would start at "1000" and finish (after 369000 seconds) at "750".

    I hope I have explained it more clearly this time.

    By the way MERRY CHRISTMAS & a HAPPY NEW YEAR.

  9. #9
    Join Date
    Dec 2012
    Location
    Central Coast, NSW, Australia
    Posts
    21
    Hi again. I also noticed that the seconds aren't counting down correctly.

  10. #10
    Join Date
    Dec 2012
    Location
    Central Coast, NSW, Australia
    Posts
    21
    Hi once again xelawho. I have just worked out that the seconds count down by the difference between 'V1' & 'V2'. If you enter 200 into V1 and 100 into V2 you will see what I mean; the seconds count down in increments of 100. I have had a play with the code but just made it worse! So once again thanks for your help with this.

  11. #11
    Join Date
    Nov 2010
    Posts
    1,082
    I think I get it now (I probably would have got it before, had I read your first post properly ). Try this one out (I put some values in the form fields for testing, so as not to have to fill them out every time you refresh the page, but they're easily removed):
    Code:
    <body>
    <form>
    V1:<input id="v1" value="1000">V2:<input id="v2" value="999"><br>
    Enter the end date:<br> 
    hours:<input id="hrs" value="12">minutes:<input id="min" value="33">day:<input id="day" value="26">month:<input id="mth" value="12">year:<input id="yr" value="2012"><br> 
    <input type="button" onclick="countDown(this.form)" value="start">
    </form>
    <div id="counter"></div>
    <script>
    function countDown(frm){
    var start=frm.v1.value;
    var now=new Date();
    var end=new Date(frm.yr.value,frm.mth.value-1,frm.day.value,frm.hrs.value,frm.min.value);
    var diff = (end - now)/1000;
    var step=(start-frm.v2.value)/diff;
    document.getElementById("counter").innerHTML=start;
    var myint=setInterval(function(){start=start-step; document.getElementById("counter").innerHTML=start; 
    if(start<frm.v2.value){document.getElementById("counter").innerHTML="time's up!";clearInterval(myint)}},1000);
    }
    </script>
    </body>
    happy boxing day, digger

  12. #12
    Join Date
    Dec 2012
    Location
    Central Coast, NSW, Australia
    Posts
    21
    BINGO!!! Thanks for the code I did remove the values without messing up your code. One more question for now; is it possible to reduce the number of digits after the decimal point to say one or two? If not I can live with it the way it is.

  13. #13
    Join Date
    Nov 2010
    Posts
    1,082
    you can use javascript's toFixed method:
    Code:
    document.getElementById("counter").innerHTML=start.toFixed(2);

  14. #14
    Join Date
    Dec 2012
    Location
    Central Coast, NSW, Australia
    Posts
    21
    I have replaced the original 'document.get..........' with the new code above but now the script wont start at all. I'll keep playing around with it whilst I'm waiting for your reply; I'm also looking at the 'w3schools' website codes for some assistance. By the way when ever I make a post it has to be approved by the moderator first which is time consuming. I guess this is normal, or only for 'newbies'?

  15. #15
    Join Date
    Nov 2010
    Posts
    1,082
    I suspect that it does start, but you are not seeing it tick over because the difference between 1000 and 999 is too small - try it with v2 as 500 or toFixed(5) and you will see it move.

    But then that makes me wonder if it does in fact do what you wanted it to do. Here's the full code, in case you deleted something in error...

    Code:
    <body>
    <form>
    V1:<input id="v1" value="1000">V2:<input id="v2" value="500"><br>
    Enter the end date:<br> 
    hours:<input id="hrs" value="12">minutes:<input id="min" value="33">day:<input id="day" value="28">month:<input id="mth" value="12">year:<input id="yr" value="2012"><br> 
    <input type="button" onclick="countDown(this.form)" value="start">
    </form>
    <div id="counter"></div>
    <script>
    function countDown(frm){
    var start=frm.v1.value;
    var now=new Date();
    var end=new Date(frm.yr.value,frm.mth.value-1,frm.day.value,frm.hrs.value,frm.min.value);
    var diff = (end - now)/1000;
    var step=(start-frm.v2.value)/diff;
    document.getElementById("counter").innerHTML=start;
    var myint=setInterval(function(){start=start-step; document.getElementById("counter").innerHTML=start.toFixed(2); 
    if(start<frm.v2.value){document.getElementById("counter").innerHTML="time's up!";clearInterval(myint)}},1000);
    }
    </script>
    </body>
    </body>
    as for moderation I have no idea - I think I read somewhere that 10 posts makes you "bona fide" but I dunno if that was here.

    fwiw, w3schools isn't much of a resource except for very basic stuff (and even then it will sometimes lead you astray) - a better one is the Mozilla reference:
    https://developer.mozilla.org/en/docs/JavaScript

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