我正在尝试为拍卖网站创建一个计时器。
每个产品都有一个特定的结束日期,称为TargetDate
,它被输入到TimerInput.php
文件中。
然后将这些值发布到TimerOutput.php
文件中,该文件将显示产品,然后是计时器倒计时到完成日期。
每次counter > 15
用户点击出价按钮,定时器继续正常倒计时。
但是,当counter < 15
, 每次点击 bid 时,通过将 扩展TargetDate
与按下按钮时相关的特定值,导致计时器重置为 15。
首先,出价按钮不起作用,因此通过刷新页面来调用该函数。
当计时器低于 15 时,刷新页面会导致按TargetDate
原样延长并将计时器重置为 15。
但问题是当到达最初TargetDate
进入TimerInput.php
文件的第一个时,投标结束,虽然显示不同的时间在执行代码期间显示日期正在更新。
我试图通过PHP
单独执行代码并使用Javascript
.
然后我尝试执行代码Javascript
,最后我尝试将日期写入外部文件并再次读取但没有结果。
感谢您提前提供任何帮助。
这是我的代码:
定时器输出.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>
倒计时.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);