使用PHP和Javascript进行多次拍卖倒计时_Javascript_Php_Mysql_Countdown

使用PHP和Javascript进行多次拍卖倒计时

javascript php mysql

使用PHP和Javascript进行多次拍卖倒计时,javascript,php,mysql,countdown,Javascript,Php,Mysql,Countdown,我目前正陷入一个问题，不知道如何解决它。我是新的php和javascript编码，所以请纠正我，如果有一个更简单的方法来做到这一点我正在制作一个足球运动员拍卖网站。它就像易趣，只是它是玩家而不是物品。基本上，你把球员出售，将有一个倒计时计时器我的问题是，我试图让一个倒计时计时器为多个玩家工作。我已经做了一个成功的倒计时功能，它只对一个玩家起作用，但是当我尝试对多个玩家起作用时，它并没有达到预期的效果。它只更新最后一个播放器这是一个玩家的输出 Player Name: Rooney Hour

我目前正陷入一个问题，不知道如何解决它。我是新的php和javascript编码，所以请纠正我，如果有一个更简单的方法来做到这一点

我正在制作一个足球运动员拍卖网站。它就像易趣，只是它是玩家而不是物品。基本上，你把球员出售，将有一个倒计时计时器

我的问题是，我试图让一个倒计时计时器为多个玩家工作。我已经做了一个成功的倒计时功能，它只对一个玩家起作用，但是当我尝试对多个玩家起作用时，它并没有达到预期的效果。它只更新最后一个播放器

这是一个玩家的输出

Player Name: Rooney
Hours:20 Minutes:16 Seconds:56

这是两个或更多玩家的输出

Player Name: Messi

Player Name: Beckham

Player Name: Rooney
Hours:20 Minutes:16 Seconds:56

我会解释到目前为止我得到了什么

包含玩家姓名和结束时间的数据库。一个用于连接数据库的php文件。最后是一个文件，其中包含我的倒计时脚本和我正在测试的地方

数据库结构

|Player Name|------------|End date/time|---------
   Messi               July 31 2015 05:00:00 PM
  Ronaldo              July 31 2015 10:00:00 PM

注意，结束日期时间是一个字符串，格式如上所示，因此我可以使用strotime函数检索剩余时间

这就是我正常身体的工作方式。我使用PHP和MySQL选择上面的表。然后我循环打印出每个玩家的名字。在打印每个球员姓名的过程中，我调用计时器函数来获取倒计时时间。此函数接受两个参数。首先是结束日期和时间。第二个参数是唯一id（div标记）。我从数据库中获取结束日期/时间，并使用数组创建一个唯一的id标记

我的意图是创建一个函数，该函数为玩家获取结束日期和唯一id，然后像编辑一样对其进行编辑

document.getElementById(uniqueID).innerHTML =...

因为这是编辑一个div内内容的唯一方法，我知道了，我正在一个循环中创建多个div

以下是带有一些注释的主脚本

//Connecting to database
<?php
    include 'connect.php';
?>

<!doctype html>

<html>

<head>
<?php
//array used to create unique id for our divs
$ids = array("one","two","three","four","five","six","seven","eight","nine");
$i =0;

function timer($date, $id){
//changing time to london(uk) time.
date_default_timezone_set("Europe/London");
//converting the string from database into time form
$endtime = strtotime($date);
//Returns the current time
$idtemp = $id;

?>
<script>
//convert server time to milliseconds 
var server_current = <?php echo time(); ?> * 1000;
var server_end_time = <?php echo $endtime; ?> * 1000;
var client_current_time = new Date().getTime();

//server end time - server current time + client current time
var finish_time = server_end_time - server_current + client_current_time; 

var timer;

var uniqueID = <?php echo json_encode($idtemp); ?> ;

function countdown()
{
    var now = new Date();
    var left = finish_time - now;

    //Following code convert the remaining milliseconds into hours, minutes and days.
    //milliseconds conversion
    //1000-second 60,000-minute 
    //3,600,000-hour  86,400,400-hour
    var hour = Math.floor( (left % 86000000 ) / 3600000 );
    var minute = Math.floor( (left % 3600000) / 60000 );
    var second = Math.floor( (left % 60000) / 1000 );

    document.getElementById(uniqueID).innerHTML = "Hours:"+hour+" Minutes:"+minute+" Seconds:"+second;
}
timer = setInterval(countdown, 1000);
</script>

<?php }?>
</head>

<body>
<h3>Auction House </h3>

<?php
//select table from database
$result = mysql_query("SELECT * FROM `current auction`");

while($row = mysql_fetch_array($result)){

    echo 'Player Name: '. $row['PlayerName'];
    $timeleft = $row['Time'];
    echo '<div id="c">';
    $temp = $ids[$i];
?>
    <script>
    //Change the div id to the next element in array
    document.getElementById("c").setAttribute("id",<?php echo json_encode($temp); ?>);
    </script>

<?php
    $i = $i +1;
    echo $temp;
    timer($timeleft, $temp);
    echo '</div>';
    echo "<br />";
}
?>


</body>
</html>

//连接到数据库
//将服务器时间转换为毫秒
var服务器_当前=*1000；
var服务器\u结束\u时间=*1000；
var client_current_time=new Date（）.getTime（）；
//服务器结束时间-服务器当前时间+客户端当前时间
var finish\u time=服务器端时间-服务器端当前时间+客户端当前时间；
无功定时器；
var uniqueID=；
函数倒计时（）
{
var now=新日期（）；
var left=完成时间-现在；
//下面的代码将剩余的毫秒转换为小时、分钟和天。
//毫秒转换
//1000秒60000分钟
//3600000小时86400400小时
var小时=数学下限（（左%86000000）/3600000）；
var分钟=数学楼层（（左%3600000）/60000）；
第二个变量=数学下限（（左%60000）/1000）；
document.getElementById（uniqueID）.innerHTML=“小时：”+hour+“分钟：”+Minutes+“秒：”+Seconds；
}
定时器=设置间隔（倒计时，1000）；
拍卖行
//将div id更改为数组中的下一个元素
document.getElementById（“c”）.setAttribute（“id”）；

我不知道为什么它不起作用

感谢您解决方案不起作用的几个问题：

PHP评估其所有组成部分，以呈现浏览器可以读取的HTML文档，因此，在javascript接管并更改id属性（从while循环）之前，这一切都完成了

话虽如此，页面上只能有1个同名的HTML

id

，根据浏览器的不同，第一个id是真实的，或者最后一个是真实的。由于您正在创建多个

，因此仅将js应用于真正的

id=“c”

最后但并非最不重要的一点是，您设置了一个全局变量

timer

，该变量在每次调用PHP函数

timer（）

时不断被覆盖，从而强制最后一个元素成为页面上唯一的计时器。将javascript部分转换为自动执行函数（将

计时器的作用域绑定到易失性状态）可以创建新实例而不会被覆盖
尝试这样做：
<?php include 'connect.php'; //Connecting to database ?>
<!DOCTYPE html>
<html>
    <head>
        <?php
        function timer($date, $id){
            date_default_timezone_set("Europe/London"); //changing time to london(uk) time.
            $endtime = strtotime($date); //converting the string from database into time form
            $idtemp = $id; //Returns the current time
            ?>
            <script>
            (function(){
                //convert server time to milliseconds 
                var server_current = <?php echo time(); ?> * 1000,
                    server_end_time = <?php echo $endtime; ?> * 1000,
                    client_current_time = new Date().getTime(),
                    finish_time = server_end_time - server_current + client_current_time, //server end time - server current time + client current time
                    timer,
                    uniqueID = '<?php echo json_encode($idtemp); ?>';

                function countdown(){
                    var now = new Date();
                    var left = finish_time - now;

                    //Following code convert the remaining milliseconds into hours, minutes and days.
                    //milliseconds conversion
                    //1000-second 60,000-minute 
                    //3,600,000-hour  86,400,400-hour
                    var hour = Math.floor( (left % 86000000 ) / 3600000 );
                    var minute = Math.floor( (left % 3600000) / 60000 );
                    var second = Math.floor( (left % 60000) / 1000 );

                    document.getElementById(uniqueID).innerHTML = "Hours:"+hour+" Minutes:"+minute+" Seconds:"+second;
                }
                timer = setInterval(countdown, 1000);
            })();
            </script>
        <?php } ?>
    </head>

    <body>
        <h3>Auction House </h3>
        <?php
        $ids = array("one", "two", "three", "four", "five", "six", "seven", "eight", "nine"); //array used to create unique id for our divs
        $i = 0;
        $result = mysql_query("SELECT * FROM `current auction`"); //select table from database
        while($row = mysql_fetch_array($result)){
            $timeleft = $row['Time'];
            $temp = $ids[$i++];
            timer($timeleft, $temp);
            echo 'Player Name: '.$row['PlayerName'].'<div id='.json_encode($temp).'>loading...</div><br />';
        }
        ?>
    </body>
</html>


（功能（）{
//将服务器时间转换为毫秒
var服务器_当前=*1000，
服务器\u结束\u时间=*1000，
客户端\当前\时间=新日期（）.getTime（），
finish\u time=server\u end\u time-server\u current+client\u current\u time，//server end time-server current time+client current time
计时器，
唯一性=“”；
函数倒计时（）{
var now=新日期（）；
var left=完成时间-现在；
//下面的代码将剩余的毫秒转换为小时、分钟和天。
//毫秒转换
//1000秒60000分钟
//3600000小时86400400小时
var小时=数学下限（（左%86000000）/3600000）；
var分钟=数学楼层（（左%3600000）/60000）；
第二个变量=数学下限（（左%60000）/1000）；
document.getElementById（uniqueID）.innerHTML=“小时：”+hour+“分钟：”+Minutes+“秒：”+Seconds；
}
定时器=设置间隔（倒计时，1000）；
})();
拍卖行

另外：
请小心！mysql.*
函数由于许多非常好的原因被弃用，并且在PHP 7发布后将被完全删除，您应该在有时间的时候阅读一下：
只是为了解决解决解决方案不起作用的几个问题：
PHP评估其所有组成部分，以呈现浏览器可以读取的HTML文档，因此，在javascript接管并更改id属性（从while循环）之前，这一切都完成了
尽管如此
<html>
<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
<div class="container">
<h3>Auction House </h3>

<table id="table-auctions" class="table table-bordered table-hover table-striped">
    <tr>
        <th>Name</th>
        <th>Expiring</th>
    </tr>

</table>

</div> <!-- /container -->

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
    $(function() {
        var times = [
            {
                'id': '1',
                'name': 'Messi',
                'end': new Date('July 31, 2015 13:00:00'),
            },
            {
                'id': '2',
                'name': 'Ronaldo',
                'end': new Date('August 1, 2015 10:00:00'),
            },
            {
                'id': '3',
                'player': 'JJ',
                'end': new Date('August 7, 2015 13:00:00'),
            },
        ];

        // Initialize the table values
        $.each(times, function( key, value ) {
            $('#table-auctions').append('<tr><td>'+value.name+'</td><td><span id="player-'+value.id+'-expiration" class="label label-primary">Loading...</span></td></tr>');
        });


        function countdown()
        {
            var now = new Date();
            console.log('updating time');

            $.each(times, function( key, value ) {
                var left = value.end - now;
                var days = Math.floor( left / (1000 * 60 * 60 * 24) );
                var hours = Math.floor( (left % (1000 * 60 * 60 * 24) ) / (1000 * 60 * 60) );
                var minutes = Math.floor( (left % (1000 * 60 * 60)) / (1000 * 60) );
                var seconds = Math.floor( (left % (1000 * 60)) / 1000 );

                displayTime = '';
                if (days > 0) {
                    displayTime = "Days: " + days;
                }
                displayTime = displayTime + " Hours: " + hours + " Minutes: " + minutes + " Seconds: " + seconds;

                $('#player-'+value.id+'-expiration').text(displayTime)
            });

        }
        timer = setInterval(countdown, 1000);        

    });
</script>
</body>
</html>