我目前遇到问题但不确定如何解决。我是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。
这是带有一些注释的主要脚本
//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>
我不确定为什么它不起作用。
由于
答案 0 :(得分:4)
我今天感觉很慷慨,所以我让你很容易。这就是我想出的:
<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(这是查询数据库的最佳方式)。
答案 1 :(得分:2)
只是为了解决为什么你的解决方案无法正常工作的问题:
PHP评估其所有成分以呈现浏览器可以读取的HTML文档,因此在您的javascript可以接管并更改id属性(来自您的while循环)之前完成所有这些操作
话虽如此,你只能在页面上拥有1个同名的HTML id
,并且根据浏览器的不同,第一个id是真实的,或者最后一个是。由于您正在创建多个'<div id="c">'
,因此仅将您的js应用于真实的id="c"
。
最后但同样重要的是,您设置了一个全局变量timer
,每次调用PHP函数timer()
时都会被覆盖,强制最后一个元素成为页面上唯一的计时器。将您的javascript部分转换为自执行函数(将timer
的范围绑定到易失性状态)可以创建新实例而不会被覆盖
尝试这样做:
<?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?