CountDown计时器PHP / JavaScript

Question

您好我有一个用于倒计时的JavaScript，它正在选择时间形式的MySQL并且它正常运行（Chrome，Firefox），但在（IE和Safari）它正在返回＆＃34; NaNd NaNh NaNm的NaN＆＃34;

我已在下面附上我的代码。

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

请检查我是否遗漏了一些东西。谢谢你的回复。

Answer 1

请仔细检查'单引号，将第一个参数的双引号用作第二个参数。

createCountDown("form<?php echo $row['id'];?>", "<?php echo $row['time_to_expire'] ;?>")

这是工作示例

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>

Answer 2

修改

Internet Explorer和Safari在格式不正确的日期不能容忍。

从PHP传递到JavaScript Date()的日期：2017-09-30 00:00:00 “格式错误”。 它来自PHP Date("Y-m-d H:i:s");，这是非常常用的......

JavaScript方面的修正是：date = date.replace(" ","T");

它也可以在PHP端修复：$date = Date("Y-m-d\TH:i:s");
或者，如果日期来自数据库：

$date = str_replace(" ","T",$row['time_to_expire']);
createCountDown("form<?php echo $row['id'];?>", "<?php $date;?>")

结果日期字符串是2017-09-30T00:00:00，符合ISO 8601。

问题是一个角色！
我会记得那个。 ;）

Answer 3

使用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);
            }
       }