【问题标题】:Multiple Auction Countdown using PHP and Javascript使用 PHP 和 Javascript 进行多次拍卖倒计时
【发布时间】:2015-10-22 07:51:56
【问题描述】:

我目前遇到一个问题,不知道如何解决。我是 php 和 javascript 编码的新手,如果有更简单的方法,请纠正我。

我正在制作一个足球运动员拍卖网站。它就像 ebay,除了它是播放器而不是物品。基本上你把球员卖掉,会有一个倒计时。

我的问题是我试图让一个倒数计时器为多个玩家工作。我已经制作了一个成功的倒计时功能,该功能仅适用于一个玩家,但是当我尝试对多个玩家执行此操作时,它并没有按预期工作。它只更新最后一个玩家。

这是一个玩家的输出。

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

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

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

我的意图是创建一个函数,该函数获取播放器的结束日期和唯一 id,然后像这样编辑它

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

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

这是带有一些 cmets 的主脚本

//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>

我不确定为什么它不起作用。

谢谢

【问题讨论】:

  • 您也许可以解决这个特定问题,但老实说,要正确地做到这一点,您很可能需要利用 nodeJS 之类的东西,这就是 eBay 所做的。只有这样才能将其扩展并在屏幕上实际显示准确的数据。
  • 感谢您的提示。会检查的。

标签: javascript php mysql countdown


【解决方案1】:

只是为了解决您的解决方案为什么不起作用的几件事:

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

话虽如此,您实际上只能在页面上拥有 1 个具有相同名称的 HTML id,并且根据浏览器的不同,第一个 id 是真实的,或者是最后一个。由于您要创建多个'&lt;div id="c"&gt;',因此它只会将您的js 应用于真正的id="c"

最后但并非最不重要的一点是,您设置了一个全局变量 timer,每次调用 PHP 函数 timer() 时它都会不断被覆盖,从而强制最后一个元素成为页面上的唯一计时器。将您的 javascript 部分转换为自执行函数(将 timer 的范围绑定到 volatile 状态)可以创建新实例而不会被覆盖

尝试这样做:

<?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>

还有:

请小心! mysql_* 函数已被弃用,原因有很多,并且在 PHP 7 发布后将被完全删除,您应该在有时间的时候阅读一下:Why shouldn't I use mysql_* functions in PHP?

【讨论】:

    【解决方案2】:

    我今天感觉很慷慨,所以我为你做了这件事。这是我想出的:

    <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>
    

    如果您只是将该代码复制并粘贴到它自己的 html 文件中,它本身就可以很好地工作,您会得到如下内容:

    剩下要做的就是将它绑定到数据库,最好的方法是在javascript的var times =部分插入一个foreach循环。

    请注意,您确实应该使用 PHP mysql_query 以外的其他东西,因为它允许各种令人头疼的问题,主要是 SQL 注入。 Here's a post about an easy way to implement PDO(这是查询数据库的当前正确方法)。

    【讨论】:

    • 谢谢!真的很有帮助!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-12-08
    • 2014-05-18
    相关资源
    最近更新 更多