Note that there are some explanatory texts on larger screens.

plurals
  1. POCreating Timer for an auction website
    primarykey
    data
    text
    <p>I am trying to create a timer for an auction website. </p> <p>Each product has a specific end date called <code>TargetDate</code>, which is entered in <code>TimerInput.php</code> file.<br> These values are then posted into <code>TimerOutput.php</code> file which will display the product followed by the timer countdown to finish date. </p> <p>Each time the <code>counter &gt; 15</code> and the user click on bid button, the timer continue countdown normally.<br> But when the <code>counter &lt; 15</code>, each time clicking bid causes the timer to reset to 15 by extending the <code>TargetDate</code> by the specific value related to when the button was pressed. </p> <p>First, the Bid button wasn't working, so instead the function is called by refreshing the page.<br> When the timer is under 15, refreshing the page causes the <code>TargetDate</code> to be extended as it should be and the timer is reset to 15.<br> But the problem is when the first <code>TargetDate</code> entered originally in <code>TimerInput.php</code> file is reached, the bid is over, although showing different time during execution of code shows that the date is being updated. </p> <p>I have tried to works by executing the code in <code>PHP</code> alone and displaying using <code>Javascript</code>.<br> Then I have tried to execute code by <code>Javascript</code> and finally I have tried to write the date into external file and read it again but with no result. </p> <p>Thanks for any help in advance. </p> <p>Here is my code: </p> <p><strong>TimerOutput.php:</strong> </p> <pre><code>&lt;?php // target date entered by user $TargetDate = $month."/".$day."/".$year." ".$hour.":".$minute.":".$second." ".$hourclock; // change target date to unix timestamp format $UnixTargetDate = strtotime($month."/".$day."/".$year." ".$hourHC.":".$minute.":".$second); // unix timestamp right now $unixtime = strtotime("now"); } ?&gt; &lt;script language="JavaScript"&gt; //TargetDate = "7/30/2012 13:32"; ForeColor = "navy"; CountActive = true; CountStepper = -1; LeadingZero = true; DisplayFormat = "%%H%%:%%M%%:%%S%%"; FinishMessage = "Sold at: " // extract timer variables inputs var unixNow = parseInt("&lt;?php echo $unixtime?&gt;"); var unixTarget = parseInt("&lt;?php echo $UnixTargetDate?&gt;"); function AdditionalSecond() { if ((unixTarget - unixNow)&gt;0 &amp;&amp; (unixTarget - unixNow)&lt;15) { // reset timer to 15s // update target date unixTarget = unixTarget + 15 - (unixTarget - unixNow); } else if ((unixTarget - unixNow)&gt;15) { // do nothing continue countdown normally unixTarget=unixTarget; } else { // display that item is sold when time is up FinishMessage } } // call function AdditionalSecond() to be executed AdditionalSecond(); // create a new javascript Date object based on the timestamp // multiplied by 1000 so that the argument is in milliseconds, not seconds var date = new Date(unixTarget*1000); // month part from the timestamp var months = date.getMonth()+1; // day part from the timestamp var days = date.getDate(); // year part from the timestamp var years = date.getFullYear(); // hours part from the timestamp var hours = date.getHours(); // minutes part from the timestamp var minutes = date.getMinutes(); // seconds part from the timestamp var seconds = date.getSeconds(); // will display time in 10:30:23 format TargetDate = months + '/' + days + '/' + years + ' ' + hours + ':' + minutes + ':' + seconds; &lt;/script&gt; &lt;div id="countTimer" name="countTimer" style="margin-left:100px;"&gt; &lt;script language="JavaScript" src="countdown.js"&gt;&lt;/script&gt; &lt;/div&gt; &lt;div id = "soldtime" style = "margin-left:100px;"&gt; &lt;span id="timedispspan"&gt;&lt;/span&gt; &lt;/div&gt; &lt;div id = "bottom" style = "margin-left:100px;"&gt; &lt;form name="BidForm" id="BidForm" onsubmit="return false"&gt; &lt;input type="button" value="Bid" onclick="AddSecond();" style = "width:100px;height:30px;"&gt; &lt;/form&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><strong>countdown.js:</strong></p> <pre><code>function calcage(secs, num1, num2) { s = ((Math.floor(secs/num1))%num2).toString(); if (LeadingZero &amp;&amp; s.length &lt; 2) s = "0" + s; return "&lt;b&gt;" + s + "&lt;/b&gt;"; } function refreshDiv(){ document.getElementById("cntdwn").innerHTML = DisplayStr; } function CountBack(secs) { if (secs &lt; 0) { document.getElementById("cntdwn").innerHTML = FinishMessage; return; } 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)); document.getElementById("cntdwn").innerHTML = DisplayStr; if (CountActive) setTimeout("CountBack(" + (secs+CountStepper) + ")", SetTimeOutPeriod); } function putspan(backcolor, forecolor) { document.write("&lt;span id='cntdwn' style='background-color:" + backcolor + "; color:" + forecolor + "'&gt;&lt;/span&gt;"); } if (typeof(BackColor)=="undefined") BackColor = "white"; if (typeof(ForeColor)=="undefined") ForeColor= "black"; if (typeof(TargetDate)=="undefined") TargetDate = "12/31/2012 5:00 AM"; if (typeof(DisplayFormat)=="undefined") DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds."; if (typeof(CountActive)=="undefined") CountActive = true; if (typeof(FinishMessage)=="undefined") FinishMessage = ""; if (typeof(CountStepper)!="number") CountStepper = -1; if (typeof(LeadingZero)=="undefined") LeadingZero = true; CountStepper = Math.ceil(CountStepper); if (CountStepper == 0) CountActive = false; var SetTimeOutPeriod = (Math.abs(CountStepper)-1)*1000 + 990; putspan(BackColor, ForeColor); var dthen = new Date(TargetDate); var dnow = new Date(); if(CountStepper&gt;0) ddiff = new Date(dnow-dthen); else ddiff = new Date(dthen-dnow); gsecs = Math.floor(ddiff.valueOf()/1000); CountBack(gsecs); </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload