Countdown Timer Using Javascript And Php

karthikjayraj · March 18, 2011

Hi,

I am in need of a functionality for a system where in there is PHP mysql system having a table "bid" which has columns(bid_

product, "createtime")

basically if the user does not bid for the product within 20 hours the bid will close for this i need to display a timer which keeps

counting till 5+ hours or so of the createtime, After a tiring search for timers i finally found a .Js which would work just fine for

static values

Within the .js script when i tried to pass values from my database the timer does not change on itself but each time i have to refresh the

page to check the time left.

Please have a look at the code and let me know what could be wrong

testingtime.php


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Vott</title>
<script type="text/javascript" src="js/testtime.js"></script>
<style>
p.timer{font-size:15px; color:#43C6DB; border: 2px solid #fc0;width: 100px; position: absolute; top: 350px; left: 375px;}
</style>


</head>

<body>
<table style="background-color: #CCC" width="100%" border="0" cellpadding="12">
 <tr>
   <td width="78%"><h1>My Logo Image</h1></td>
 </tr>
</table>

<span class="bids">

	<p class="timer"><b>bid Closes in :</br>
	<span id="timeleft"> <script>timeleft('<?php print($bid['createtime']); ?>')</script>
	</span></b></p></span></br></br>

	</body>
	</html>

The Javascript code

var eventtext = "Left"; // text that appears next to the time left
var endtext = "bids Closed!!"; // text that appears when the target has been reached

function timeleft(mydate){

// Split timestamp into [ Y, M, D, h, m, s ]
var t = mydate.split(/[- :]/);
// Apply each element to the Date function
var date = new Date(t[0], t[1]-1, t[2], t[3], t[4], t[5]);

// -> Wed Jun 09 2010 13:12:01 GMT+0100 (GMT Daylight Time)

var year = date.getYear();			// in what year will your target be reached?
var month = date.getMonth();			// value between 0 and 11 (0=january,1=february,...,11=december)
var day = date.getDate();				// between 1 and 31
var hour =date.getHours();				// between 0 and 24
var minute = date.getMinutes();			// between 0 and 60
var second = date.getSeconds();			// between 0 and 60
var end = new Date(year,month,day,hour,minute,second);
end.setMinutes(end.getMinutes() + 50);
var now = new Date();
if(now.getYear() < 1900)
	yr = now.getYear() + 1900;
var sec = end.getSeconds() - now.getSeconds();
var min = end.getMinutes() - now.getMinutes();
var hr = end.getHours() - now.getHours();
var dy = end.getDate() - now.getDate();
var mnth = end.getMonth() - now.getMonth();
var yr = year - yr;
var daysinmnth = 32 - new Date(now.getYear(),now.getMonth(), 32).getDate();
if(sec < 0){
	sec = (sec+60)%60;
	min--;
}
if(min < 0){
	min = (min+60)%60;
	hr--;	
}
if(hr < 0){
	hr = (hr+24)%24;
	dy--;	
}
if(dy < 0){
	dy = (dy+daysinmnth)%daysinmnth;
	mnth--;	
}
if(mnth < 0){
	mnth = (mnth+12)%12;
	yr--;
}	
var sectext = " Seconds ";
var mintext = " Minutes, and ";
var hrtext = " Hours, ";
var dytext = " Days, ";
var mnthtext = " Months, ";
var yrtext = " Years, ";
if (yr == 1)
	yrtext = " Year, ";
if (mnth == 1)
	mnthtext = " Month, ";
if (dy == 1)
	dytext = " Day, ";
if (hr == 1)
	hrtext = " Hour, ";
if (min == 1)
	mintext = " Minute, and ";
if (sec == 1)
	sectext = " second ";
if(now >= end){
	document.getElementById("timeleft").innerHTML = endtext;
	clearTimeout(timerID);
}
else{
//alert(now.getHours()+1);
document.getElementById("timeleft").innerHTML =min + ":" + sec;
//document.getElementById("timeleft").innerHTML = dy + dytext + hr + ":" + min + ":" + sec;
}
timerID = setTimeout("timeleft()", 1000); 
}
window.onload = timeleft;

Larry · March 18, 2011

What format will $bid['createtime'] be in? Is that the same as the format that works when hardcoded into the script?

Sign In

Countdown Timer Using Javascript And Php

Recommended Posts

karthikjayraj

Link to comment

Share on other sites

Larry

Link to comment

Share on other sites

Browse

Activity