[英]CountDown timer PHP/JavaScript
Hi I have a JavaScript for countdown which is selecting time form MySQL and it is working fine on (Chrome, Firefox), but on (IE and Safari) it is returning "NaNd NaNh NaNm NaNs". 嗨,我有一个用于倒计时的JavaScript,它正在选择时间形式的MySQL并且它正常工作(Chrome,Firefox),但在(IE和Safari)它返回“NaNd NaNh NaNm NaNs”。
I have attached my code below. 我在下面附上了我的代码。
<?php
$con = mysqli_connect("localhost", "root", "", "timer") or die("Error Could
not connect to the database Sir." . mysqli_error($con));
$query = mysqli_query($con, "SELECT * FROM counter WHERE id = 1") or
die(mysqli_error($con));
$row = mysqli_fetch_array($query)or die(mysqli_error($con));
?>
<div id="form<?php echo $row['id'];?>" style="color:green" class="form-
group">
</div>
<Script>
function createCountDown(elementId, date){
console.log(date);
// Set the date we're counting down to
var countDownDate = new Date(date).getTime();
console.log(countDownDate);
// Update the count down every 1 second
var x = setInterval(function(){
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = (countDownDate) - (now);
//Hint on converting from object to the string.
//var distance = Date.parse(countDownDate) - Date.parse(now);
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
//console.log(days);
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 *
60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result in the element with id="demo"
document.getElementById(elementId).innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is finished, write some text
if (distance < 0)
{
clearInterval(x);
document.getElementById(elementId).innerHTML = "ORDER EXPIRED";
}
}, 1000);
}
createCountDown("form<?php echo $row['id'];?>", "<?php echo
$row['time_to_expire'] ;?>")
</Script>
Please check if i am missing something again. 请检查我是否遗漏了一些东西。 thank you for all the replies. 谢谢你的回复。
Check carefully '
single quotes here, Use double quotes for first parameter as second param. 仔细检查'
单引号,使用双引号作为第二个参数的第一个参数。
createCountDown("form<?php echo $row['id'];?>", "<?php echo $row['time_to_expire'] ;?>")
Here is working example 这是一个有效的例子
function createCountDown(elementId, date) { // Set the date we're counting down to var countDownDate = new Date(date).getTime(); //console.log(countDownDate.getTime()); // Update the count down every 1 second var x = setInterval(function() { // Get todays date and time var now = new Date().getTime(); // Find the distance between now an the count down date var distance = (countDownDate) - (now); //Hint on converting from object to the string. //var distance = Date.parse(countDownDate) - Date.parse(now); // Time calculations for days, hours, minutes and seconds var days = Math.floor(distance / (1000 * 60 * 60 * 24)); var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000); // Display the result in the element with id="demo" document.getElementById(elementId).innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s "; // If the count down is finished, write some text if (distance < 0) { clearInterval(x); document.getElementById(elementId).innerHTML = "ORDER EXPIRED"; } }, 1000); } createCountDown('form1', "08-09-2017 12:10:00Z"); createCountDown('form2', "08-09-2018 12:10:00Z");
<div id="form1"></div> <div id="form2"></div>
EDIT 编辑
The date passed from PHP to JavaScript Date()
: 2017-09-30 00:00:00
was "malformed" . 从PHP传递到JavaScript的Date()
: 2017-09-30 00:00:00
“格式错误” 。 It came from PHP Date("Ymd H:i:s");
它来自PHP Date("Ymd H:i:s");
which is VERY commonly used... 这是非常常用的......
The fix on JavaScript side is: date = date.replace(" ","T");
JavaScript方面的修正是: date = date.replace(" ","T");
It also could be fixed on PHP side with: $date = Date("Ymd\\TH:i:s");
它也可以在PHP端修复: $date = Date("Ymd\\TH:i:s");
Or if the date comes form a database: 或者,如果日期来自数据库:
$date = str_replace(" ","T",$row['time_to_expire']);
createCountDown("form<?php echo $row['id'];?>", "<?php $date;?>")
The resulting date string is then 2017-09-30T00:00:00
, which is ISO 8601 compliant. 生成的日期字符串为2017-09-30T00:00:00
,符合ISO 8601标准。
The issue was abvout ONE character! 问题是至少一个角色!
I'll remember that one. 我会记得那一个。 ;) ;)
Use moment.js and try below code for timer 使用moment.js并尝试下面的代码用于计时器
var eventTime = moment("target time").unix(),
currentTime = moment().unix(),
diffTime = eventTime - currentTime,
duration = moment.duration(diffTime * 1000, "milliseconds"),
interval = 1000;
if (diffTime > 0) {
var timer = setInterval(function () {
duration = moment.duration(duration.asMilliseconds() - interval, 'milliseconds');
var h = moment.duration(duration).hours(),
m = moment.duration(duration).minutes(),
s = moment.duration(duration).seconds();
// show how many hours, minutes and seconds are left
var temp = '<div><span>' + h + '</span> hr </div> <div><span>'
+ m + '</span> min </div> <div><span>' + s +
'</span> sec </div>';
$(elementId).html(temp);
if ((h == 0 && m == 0 && s == 0) || (s < 0)) {
clearInterval(timer);
}, interval);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.