www.webdeveloper.com
Results 1 to 2 of 2

Thread: Count down to certain time any day

  1. #1
    Join Date
    Nov 2009
    Posts
    1

    Count down to certain time any day

    Firstly, I'm a complete novice (except for cut and paste ) when it comes to JavaScript.
    I got this timer elsewhere and it works well but, I need it to count down to a specific time of the day whatever day I open the page. I.e. if the target time is 19:00 and I open the page at 15:10 the count down must start from 3 hrs 50 min 00 sec.

    As it is it counts down to TargetDate = "12/31/2020 5:00 AM."
    That must be replaced by some clever script that uses today's date (or no date at all) and the "time target"

    Please help!

    Script from hashemian.com
    <script language="JavaScript">
    TargetDate = "12/31/2020 5:00 AM";
    BackColor = "palegreen";
    ForeColor = "navy";
    CountActive = true;
    CountStepper = -1;
    LeadingZero = true;
    DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
    FinishMessage = "It is finally here!";
    </script>
    <script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"></script>

    The countdown.js looks like this.
    /*
    Author: Robert Hashemian
    http://www.hashemian.com/

    You can use this code in any manner so long as the author's
    name, Web address and this disclaimer is kept intact.
    ********************************************************
    Usage Sample:

    <script language="JavaScript">
    TargetDate = "12/31/2020 5:00 AM";
    BackColor = "palegreen";
    ForeColor = "navy";
    CountActive = true;
    CountStepper = -1;
    LeadingZero = true;
    DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
    FinishMessage = "It is finally here!";
    </script>
    <script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"></script>
    */

    function calcage(secs, num1, num2) {
    s = ((Math.floor(secs/num1))%num2).toString();
    if (LeadingZero && s.length < 2)
    s = "0" + s;
    return "<b>" + s + "</b>";
    }

    function CountBack(secs) {
    if (secs < 0) {
    document.getElementById("cntdwn").innerHTML = FinishMessage;
    return;
    }
    DisplayStr = DisplayFormat.replace(/%%D%%/g, calcage(secs,86400,100000));
    DisplayStr = DisplayStr.replace(/%%H%%/g, calcage(secs,3600,24));
    DisplayStr = DisplayStr.replace(/%%M%%/g, calcage(secs,60,60));
    DisplayStr = DisplayStr.replace(/%%S%%/g, calcage(secs,1,60));

    document.getElementById("cntdwn").innerHTML = DisplayStr;
    if (CountActive)
    setTimeout("CountBack(" + (secs+CountStepper) + ")", SetTimeOutPeriod);
    }

    function putspan(backcolor, forecolor) {
    document.write("<span id='cntdwn' style='background-color:" + backcolor +
    "; color:" + forecolor + "'></span>");
    }

    if (typeof(BackColor)=="undefined")
    BackColor = "white";
    if (typeof(ForeColor)=="undefined")
    ForeColor= "black";
    if (typeof(TargetDate)=="undefined")
    TargetDate = "12/31/2020 5:00 AM";
    if (typeof(DisplayFormat)=="undefined")
    DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
    if (typeof(CountActive)=="undefined")
    CountActive = true;
    if (typeof(FinishMessage)=="undefined")
    FinishMessage = "";
    if (typeof(CountStepper)!="number")
    CountStepper = -1;
    if (typeof(LeadingZero)=="undefined")
    LeadingZero = true;


    CountStepper = Math.ceil(CountStepper);
    if (CountStepper == 0)
    CountActive = false;
    var SetTimeOutPeriod = (Math.abs(CountStepper)-1)*1000 + 990;
    putspan(BackColor, ForeColor);
    var dthen = new Date(TargetDate);
    var dnow = new Date();
    if(CountStepper>0)
    ddiff = new Date(dnow-dthen);
    else
    ddiff = new Date(dthen-dnow);
    gsecs = Math.floor(ddiff.valueOf()/1000);
    CountBack(gsecs);

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,434

    Lightbulb Consider this ...

    Will this get you started in the right direction?
    Code:
    <html>
    <head>
    <title>Countdown to Defined Time</title>
    <script type="text/javascript">
    // From: http://www.webdeveloper.com/forum/showthread.php?t=215504
    // Modified for: http://www.webdeveloper.com/forum/showthread.php?t=220174
    
    var definedTime = new Date('Dec 31, 2009 05:00');	// military time to countdown TO
    
    function ShowTimes() {
    
      var now = new Date();
      var hrs = definedTime.getHours()-now.getHours();
      if (hrs < 0) { hrs += 24; }
      var mins = 59-now.getMinutes();
      var secs = 59-now.getSeconds();
      var str = '';
          str =	now.toString();
          str += '<br>Time until 5:00 am';
          str += '<br>0 days '+hrs+' hours '+mins+' minutes '+secs+' seconds';
      document.getElementById('countdownToMidnight').innerHTML = str;
    }
    
    var _cntDown;
    function StopTimes() { clearInterval(_cntDown); }
    
    </script>
    </head>
    <body onload="_cntDown=setInterval('ShowTimes()',1000)">
    <div id="countdownToMidnight"></div>
    <button onclick="StopTimes()">Stop</button>
    </body>
    </html>
    Change the defined time to match your needs.
    Since you don't care about the date itself, it can be set to any valid value.

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