countdown timer using Javascript and php

writer66online · March 18, 2011

Hi Folks,

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;

Sign In

countdown timer using Javascript and php

Recommended Posts

writer66online

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information