为拍卖网站创建计时器

时间:2012-08-08 09:42:17

标签: php javascript countdowntimer

我正在尝试为拍卖网站创建一个计时器。

每个产品都有一个名为TargetDate的特定结束日期,该日期在TimerInput.php文件中输入 然后将这些值发布到TimerOutput.php文件中,该文件将显示产品,然后是计时器倒计时以完成日期。

每次counter > 15和用户点击出价按钮时,计时器都会正常继续倒计时 但是当counter < 15时,每次单击出价都会导致计时器重置为15,方法是将TargetDate扩展为与按下按钮时相关的特定值。

首先,Bid按钮不起作用,因此通过刷新页面来调用该函数 当计时器小于15时,刷新页面会导致TargetDate按原样延长,计时器重置为15。 但问题是,当达到最初在TargetDate文件中输入的第一个TimerInput.php时,出价已经结束,尽管在执行代码期间显示不同的时间表明日期正在更新。

我试图通过单独执行PHP中的代码并使用Javascript进行显示来实现工作 然后我尝试按Javascript执行代码,最后我尝试将日期写入外部文件并再次读取但没有结果。

提前感谢您的帮助。

这是我的代码:

TimerOutput.php:

<?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");
}


?>

<script language="JavaScript">
//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("<?php echo $unixtime?>");
    var unixTarget = parseInt("<?php echo $UnixTargetDate?>");


function AdditionalSecond()
{

    if ((unixTarget - unixNow)>0 && (unixTarget - unixNow)<15)
    {
        // reset timer to 15s
        // update target date
        unixTarget = unixTarget + 15 - (unixTarget - unixNow);

    }
    else if ((unixTarget - unixNow)>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;

</script>
<div id="countTimer" name="countTimer" style="margin-left:100px;">
<script language="JavaScript" src="countdown.js"></script>
</div>
<div id = "soldtime" style = "margin-left:100px;">
<span id="timedispspan"></span>
</div>
<div id = "bottom" style = "margin-left:100px;">
<form name="BidForm" id="BidForm" onsubmit="return false">
<input type="button" value="Bid" onclick="AddSecond();" style = "width:100px;height:30px;">
</form>
</div>
</body>
</html>

countdown.js:

function calcage(secs, num1, num2) {
  s = ((Math.floor(secs/num1))%num2).toString();
  if (LeadingZero && s.length < 2)
    s = "0" + s;
  return "<b>" + s + "</b>";
}

function refreshDiv(){    
        document.getElementById("cntdwn").innerHTML = DisplayStr;  
    }

function CountBack(secs) {
  if (secs < 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("<span id='cntdwn' style='background-color:" + backcolor + 
                "; color:" + forecolor + "'></span>");
}

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>0)
  ddiff = new Date(dnow-dthen);
else
  ddiff = new Date(dthen-dnow);

gsecs = Math.floor(ddiff.valueOf()/1000);
CountBack(gsecs);

0 个答案:

没有答案