如您所见，计时器仅在第一个产品上运行。有人可以告诉我如何让其他 2 个产品也有计时器吗？另外我在 ajax 部分遇到问题#bid，如何让每个产品都有自己的#bid？
<?php
include "connect.php";
$query= "select * from product";
$result= mysql_query($query);
while( $record= mysql_fetch_array($result) ){
$product_id= $record['product_id'];
$product_name= $record['product_name'];
$retail_price= $record['retail_price'];
$product_price= $record['product_price'];
echo '<div id="product">';
echo '<div>'.$product_name.'</div>';
echo '<img style="width: 90%;" src="images/'.$product_id.'.png"/>';
echo 'Retail Price';
echo '<div>'.$retail_price.'</div>';
echo 'Time Left';
$query= "select * from product where product_id='$product_id'";
$result2= mysql_query($query);
$record= mysql_fetch_object($result2);
$time= $record->end_time;
date_default_timezone_set('Asia/Singapore');
$unix_time= strtotime($time);
echo '<br/>
<div id="hoursBox" style="display: inline;"></div>:
<div id="minsBox" style="display: inline;"></div>:
<div id="secsBox" style="display: inline;"></div>
<br/>';
echo 'Current Price';
echo '<div>RM '.$product_price.'</div>';
echo '<input type="submit" id="bid" value="Bid"/>';
echo '</div>';
}
?>
<script type="text/javascript">
var end_time = <?php echo $unix_time; ?>;
$(document).ready(function(){
$("#bid").click(function(){
$.ajax({
url: 'increase_time.php',
type: 'post',
data: 'end_time='+end_time,
success: function(response){
end_time= response;
}
});
});
});
var stop= setInterval('countdown()',1000);
function countdown() {
var now = new Date();
var now_time= now.getTime()/1000;
now_time= Math.floor(now_time);
var sec = end_time- now_time;
if(sec<=0){
clearInterval(stop);
}
sec= Math.floor(sec);
var min = Math.floor(sec / 60);
var hour = Math.floor(min / 60);
hour %= 24;
min %= 60;
sec %= 60;
document.getElementById("hoursBox").innerHTML = hour;
document.getElementById("minsBox").innerHTML = min;
document.getElementById("secsBox").innerHTML = sec;
}
</script>
<script type="text/javascript">countdown();</script>