Question

我有一个网站here

如您所见，计时器仅在第一个产品上运行。有人能给我一个关于如何让其他2个产品也有定时器的想法吗？另外，我在使用#bid的ajax部分遇到问题，如何让每个产品都有自己的#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>

Answer 1

从班级

更改元素ID

$("#bid").click(function(){

});

进入

$(".bid").click(function(){

 //$(this).val() and what ever for current bid

});

我建议您使用jquery countdown插件。

Answer 2

您需要使用code loops来实现目标。

便士拍卖计时器

2 个答案: