我想使用keith woods倒计时器jquery插件(http://keith-wood.name/countdown.html)来显示拍卖的时间,但我遇到了麻烦。
当用户搜索时,php检索多个搜索结果,并将结束时间的时间戳存储为varchar。
while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
$numrows++;
$ID = $row['ID'];
$img = $row['img'];
$desc = $row['description'];
$name = $row['name'];
$owner = $row['owner'];
$cprice = $row['cprice'];
$iprice = $row['iprice'];
$incprice = $row['incprice'];
$etime = $row['etime'];
$nextBid = $cprice + $incprice;
$stmt2 = $pdo->prepare("SELECT * FROM user WHERE username = :username");
$stmt2->bindParam(":username", $owner,PDO::PARAM_STR);
$stmt2->execute();
$thisuser = $stmt2->fetch(PDO::FETCH_ASSOC);
$location = $thisuser['location'];
echo'
<tr class="resultindex">
<td class="imgCol"><a href="displayAuct.php?id='.$ID.'"><img src="'.$img.'" alt="'.$name.'" /></a></td>
<td class="infoCol">
<div class="nameDiv">
<a class="nameLink" href="displayAuct.php?id='.$ID.'">'.$name.'</a><br/>
</div>
<div class="descDiv">
<span class="priceLabel2">'.$desc.'</span>
</div>
<div class="userdiv">
<span class="fromuser">Location: </span><br/>
<span class="location">'.$location.'</span>
</div>
</td>
<td style="width:1px; background-color:#330066;" ></td>
<td class="priceCol">
<div class="currentp"><span class="priceLabel">Current Bid: </span><br/><span class="price1">$'.$cprice.'</span></div>
<div class="instantp"><span class="priceLabel2">Instant Sale: </span><br/><span class="price2">$'.$iprice.'</span></div>
<div style="height:5px;"></div>
<div class="incp"><span class="priceLabel2">Next Bid:</span><br/><span class="price2">$'.$nextBid.'</span></div>
</td>
<td style="width:1px; background-color:#330066;"></td>
<td class="timerCol">
<div id="timeRow">
<span class="timeleft">Time Left: </span>
</div>
<div id="countdownRow"></div>
</td>
</tr>
';
}
在代码的底部,我希望基于该特定项目的倒数计时器显示在countdownRow div中。
我不知道如何用javascript处理这个问题,我想出了:
var timestamp = <?php echo $etime; ?> * 1000;
var endTime = new Date();
endTime.setTime(timestamp);
$(document).ready(function(e){
$(".cdtimer").load(function(){
$(".cdtimer").countdown({until: endTime});
});
});
但这似乎不起作用。任何人都知道我需要在这做什么?
答案 0 :(得分:0)
第一句话:html中的id属性必须是唯一的。所以每一行都需要一个唯一的ID。
将每行的$etime
添加到单独的div中,以便在html中提供所有可用的结束时间。
使用jquery查找所有timerCol
列并为每个结果启动一个新计时器。
$(".timerCol .timeLeft").each(function() {
endtime = $(this).find(".timeRowValue").val();
$(this).countdown({until: endTime});
};