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;
Countdown Timer Using Javascript And Php
in PHP 6 and MySQL 5 for Dynamic Web Sites: Visual QuickPro Guide (3rd Edition)
Posted
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;