I have added some PHP code to JS for countdown timer

suresh9696 · April 25, 2014

I have added some PHP code to JS for countdown timer. I have set the End Time Successfully but could n't set the Start Time can any one here Help me out.

As we know JavaScript take system date/Time by Default. i need to get that from server.

So here is the Code

<?php

date_default_timezone_set("Asia/Calcutta");

$start_date = date('D M d Y H:i:s O');

echo $start_date;

echo "<br>"."Fri Apr 25 2014 16:26:06 GMT+0530 (India Standard Time)";

$since_start = new DateTime('2014-04-26 10:25:00');

$ey = $since_start->format('Y');

$emon = $since_start->format('m');

$ed = $since_start->format('d');

$eh = $since_start->format('H');

$emins = $since_start->format('i');

$esecs = $since_start->format('s');

/*$sy = $start_date->format('Y');

$smon = $start_date->format('m');

$sd = $start_date->format('d');

$sh = $start_date->format('H');

$smins = $start_date->format('i');

$ssecs = $start_date->format('s');

echo $esecs;*/

?>

<html>

<head>

.background {

border-style: none;

width: 62px;

height: 58px;

}

.numbers {

border-style: none;

background-color: transparent;

padding: 0px;

margin: 0px;

width: 62px;

height: 42px;

text-align: center;

font-family: Arial;

font-size: 34px;

font-weight: normal; /* options are normal, bold, bolder, lighter */

color: #FFFFFF; /* change color using the hexadecimal color codes for HTML */

}

.title { /* the styles below will affect the title under the numbers, i.e., “Days”, “Hours”, etc. */

border: none;

padding: 0px;

margin: 0px 3px;

width: 62px;

text-align: center;

font-family: Arial;

font-size: 10px;

font-weight: normal; /* options are normal, bold, bolder, lighter */

color: #999999; /* change color using the hexadecimal color codes for HTML */

background-color: #000000;

}

#form { /* the styles below will affect the outer border of the countdown timer */

width: 400px;

height: 80px;

border-style: ridge; /* options are none, dotted, dashed, solid, double, groove, ridge, inset, outset */

border-width: 2px;

border-color: #666666; /* change color using the hexadecimal color codes for HTML */

background-color: #000000;

padding: 5px;

margin: 0px auto;

position: relative; /* leave as "relative" to keep timer centered on your page, or change to "absolute" then change the values of the "top" and "left" properties to position the timer */

top: 0px; /* change to position the timer */

left: 0px; /* change to position the timer; delete this property and it's value to keep timer centered on page */

}

.line {

border-style: none;

width: 62px;

height: 2px;

z-index: 15;

}

</style>

/*

Count down until any date script-

By JavaScript Kit (www.javascriptkit.com)

Over 200+ free scripts here!

Modified by Robert M. Kuhnhenn, D.O.

on 5/30/2006 to count down to a specific date AND time,

and on 1/10/2010 to include time zone offset.

*/

/* Change the items below to create your countdown target date and announcement once the target date and time are reached. */

var current="Winter is here!"; //—>enter what you want the script to display when the target date and time are reached, limit to 20 characters

var year=<?php echo $ey; ?>; //—>Enter the count down target date YEAR

var month=<?php echo $emon; ?>; //—>Enter the count down target date MONTH

var day=<?php echo $ed; ?>; //—>Enter the count down target date DAY

var hour=<?php echo $eh; ?>; //—>Enter the count down target date HOUR (24 hour clock)

var minute=<?php echo $emins; ?>; //—>Enter the count down target date MINUTE

var tz= +5; //—>Offset for your timezone in hours from UTC (see http://wwp.greenwichmeantime.com/index.htm to find the timezone offset for your location)

//—> DO NOT CHANGE THE CODE BELOW! <—

var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");

function countdown(yr,m,d,hr,min){

theyear=yr;

themonth=m;

theday=d;

thehour=hr;

theminute=min;

var today=new Date();//System Time

var todayy=today.getYear();

if (todayy < 1000) {

todayy+=1900; }

var todaym=today.getMonth();

var todayd=today.getDate();

var todayh=today.getHours();

var todaymin=today.getMinutes();

var todaysec=today.getSeconds();

var todaystring1=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec;

var todaystring=Date.parse(todaystring1)+(tz*1000*60*60);

var futurestring1=(montharray[m-1]+" "+d+", "+yr+" "+hr+":"+min);

var futurestring=Date.parse(futurestring1)-(today.getTimezoneOffset()*(1000*60));

var dd=futurestring-todaystring;

var dday=Math.floor(dd/(60*60*1000*24)*1);

var dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1);

var dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1);

var dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);

if(dday<=0&&dhour<=0&&dmin<=0&&dsec<=0){

document.getElementById('count2').innerHTML=current;

document.getElementById('count2').style.display="inline";

document.getElementById('count2').style.width="390px";

document.getElementById('dday').style.display="none";

document.getElementById('dhour').style.display="none";

document.getElementById('dmin').style.display="none";

document.getElementById('dsec').style.display="none";

document.getElementById('days').style.display="none";

document.getElementById('hours').style.display="none";

document.getElementById('minutes').style.display="none";

document.getElementById('seconds').style.display="none";

return;

}

else {

document.getElementById('count2').style.display="none";

document.getElementById('dday').innerHTML=dday;

document.getElementById('dhour').innerHTML=dhour;

document.getElementById('dmin').innerHTML=dmin;

document.getElementById('dsec').innerHTML=dsec;

setTimeout("countdown(theyear,themonth,theday,thehour,theminute)",1000);

}

</script>

</head>

<div class="title" id="hours" style="position: absolute; left: 138px; top: 73px;" >Hours</div>

<div class="title" id="minutes" style="position: absolute; left: 210px; top: 73px;" >Minutes</div>

<div class="title" id="seconds" style="position: absolute; left: 282px; top: 73px;" >Seconds</div>

</div>

</body>

</html>

countdown-time.php

Strider64 · April 25, 2014

I created a countdown timer using PHP, AJAX and JQuery, I'm sure you could modify it to your needs if you want. It's up to you.

countDownTimer.zip

Sign In

I have added some PHP code to JS for countdown timer

Recommended Posts

suresh9696

Link to comment

Share on other sites

Strider64

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information