PHP/Javascript Daily Countdown Timer

smd75jr · May 6, 2012

Hi,

This is my first post so dont kill me if i did somthing wrong.

Im trying to make a simple php/javascript page that will display the time remaining in each period every day (we have 4 periods per day). I found a nice javascript library from www.hashemian.com and am using the example that he linked to to do multiple countdown timers on one page.

The problem i am having is that the only way i can think of to make it so that it counts down to a dynamic date is to specify that date as a variable and then combine it with the string that specifys the rest of the date/time combo for the target date/time.

The current live version is at smd75jr.com/test/index2.php

The first timer is just a test that im using to make sure i havent completely broken it.

THe second timer is the one im trying to troubleshoot, it is currently set for 11:59 PM EST "today". (see code below)

Any help would be greatly appreciated!!

This is my code:

<html>
<head>
<title>Multiple Countdown Clocks</title>
</head>
<body>
<div id="clock1">[clock1]</div>
<div id="clock2">[clock2]</div>
</body>
<script language="JavaScript">


StartCountDown("clock1","06/27/2012 9:33 PM -0400")
StartCountDown("clock2","periodTest")
TodaysDate()



//var today = new Date()
//var todayMonth = today.getMonth() + 1
//var todayDay = today.getDate()
//var todayYear = today.getFullYear()
//var todayDate = (todayMonth + "/" + todayDay + "/" + todayYear)

var periodTest = (todayDate + " 11:59 PM -0400")


var periodA1 = (todayDate + " 8:53 AM -0400")
var periodA2 = (todayDate + " 10:26 AM -0400")
var periodA31 = (todayDate + " 12:32 PM -0400")
var periodLunch1 = (todayDate + " 11:00 AM -0400")
var periodLunch2 = (todayDate + " 12:32 PM -0400")
var periodA32 = (todayDate + " 11:59 AM -0400")
var periodA4 = (todayDate + " 2:05 PM -0400")



//function Periods(todayDate, periodA1, periodA2, periodA31, periodA32, periodA4, periodB1, periodB2, periodB31, periodB32, periodB4, periodLunch1, periodLunch2, periodSchoolStart, periodSchoolEnd)
//	{
//		var today = new Date()
//		var todayMonth = today.getMonth() + 1
//		var todayDay = today.getDate()
//		var todayYear = today.getFullYear()
//		var todayDate = (todayMonth + "/" + todayDay + "/" + todayYear)
//		
//		var periodA1 = (todayDate + " 21:25 PM -0400")		
//	}




function TodaysDate(todayDate)
{
	var today = new Date()
	var todayMonth = today.getMonth() + 1
	var todayDay = today.getDate()
	var todayYear = today.getFullYear()
	var todayDate = (todayMonth + "/" + todayDay + "/" + todayYear)
}

  
  /*
  	Author:		Robert Hashemian (http://www.hashemian.com/)
  	Modified by:	Munsifali Rashid (http://www.munit.co.uk/)
  	Modified by:	Tilesh Khatri
  */
  
  function StartCountDown(myDiv,myTargetDate)
  {
    var dthen	= new Date(myTargetDate);
    var dnow	= new Date();
    ddiff		= new Date(dthen-dnow);
    gsecs		= Math.floor(ddiff.valueOf()/1000);
    CountBack(myDiv,gsecs);
  }
  
  function Calcage(secs, num1, num2)
  {
    s = ((Math.floor(secs/num1))%num2).toString();
    if (s.length < 2) 
    {	
      s = "0" + s;
    }
    return (s);
  }
  
  function CountBack(myDiv, secs)
  {
    var DisplayStr;
    var DisplayFormat = "%%D%% Days %%H%%:%%M%%:%%S%%";
    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));
    if(secs > 0)
    {	
      document.getElementById(myDiv).innerHTML = DisplayStr;
      setTimeout("CountBack('" + myDiv + "'," + (secs-1) + ");", 990);
    }
    else
    {
      document.getElementById(myDiv).innerHTML = "Period Over";
    }
  }

</script>
</html>

Sign In

PHP/Javascript Daily Countdown Timer

Recommended Posts

smd75jr

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information