1 

<?php
session_start();
header('Content-Type: application/json');
$start="Start";
$finish="Finish";

$pdo = new PDO("mysql:host=localhost;dbname=test","root","");
$stmt = $pdo->prepare("SELECT DATE_FORMAT(Start,'%Y/%m/%d %H:%i:%s') AS Now, DATE_FORMAT(Finish,'%Y/%m/%d %H:%i:%s') AS endTime FROM xxx WHERE UserEmail ='".$_SESSION['userlogin']."'");
$stmt->execute(array($start));
foreach($stmt->fetchAll() as $row){
 $data[] = $row;


echo json_encode($data);
}

?>

php输出：

[{"现在":"​​2021/06/07 19:42:58","0":"2021/06/07 19:42:58","endTime":"2021/06/08 19:42: 58","1":"2021/06/08 19:42:58"}]

Moment.js 方法

$.ajax({
    method: "POST",
    url: "timepush.php",
    data: {Now:Now,endTime:endTime},
    datatype: 'JSON'
    success: function(response){ 

        var countDownDate = moment(endTime);    
            
            var x = setInterval(function() {
        diff = countDownDate.diff(moment());
    
        if (diff <= 0) {
          clearInterval(x);
          $('.countdown').text("EXPIRED");
          $(':input[type="submit"]').prop('disabled', false);
        } else
          $('.countdown').text(moment.utc(diff).format("HH:mm:ss"));
          $(':input[type="submit"]').prop('disabled', true);
      }, 1000);
            
            
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://momentjs.com/downloads/moment.min.js"></script>

<div class="col-12">
   <input type="submit" name="submit" class="btn btn-success btn-sm btn-block" value="Send" onclick="response();">                                
</div>

<div id="countdown">

jQuery Ajax 方法：

$.ajax({
    method: "POST",
    url: "timepush.php",
    data: {Now: Now,endTime: endTime},
    datatype: 'JSON'
    success: function(response){ 

            
            now = (Date.parse(now) / 1000);

            endTime = (Date.parse(endTime) / 1000);
            var timeLeft = endTime - now;

            var days = Math.floor(timeLeft / 86400); 
            var hours = Math.floor((timeLeft - (days * 86400)) / 3600);
            var minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600 )) / 60);
            var seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));
  
            if (hours < "10") { hours = "0" + hours; }
            if (minutes < "10") { minutes = "0" + minutes; }
            if (seconds < "10") { seconds = "0" + seconds; }

            $("#days").html(days + "<span>:</span>");
            $("#hours").html(hours + "<span>:</span>");
            $("#minutes").html(minutes + "<span>:</span>");
            $("#seconds").html(seconds);        
            
            if(seconds > 0){
            $(':input[type="submit"]').prop('disabled', true);
            }else{
            $(':input[type="submit"]').prop('disabled', false);
            }
    }
});


    setInterval(function() { response(); }, 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://momentjs.com/downloads/moment.min.js"></script>

<div class="col-12">
   <input type="submit" name="submit" class="btn btn-success btn-sm btn-block" value="Send" onclick="response();">
</div>

<div id="timer">
<div id="days"></div>
<div id="hours"></div>
<div id="minutes"></div>
<div id="seconds"></div>
</div>

我已经以 json 格式推送了 mysql 日期时间并将 (-) 更改为 (/)，但我无法在倒数计时器上运行。我尝试了 moment.js 和 jquery ajax 方法，但它没有出现。我做错了什么？Moment js 或 Jquery ajax 没关系。

4

1 回答 1

0

问题是错误地使用 jquery 来获取计数器 div 的 dom（<div id="countdown">你也忘记了结束标签</div>）。

您必须在查询选择器中使用主题标签而不是点，就像那样，$('#countdown').text('something');而不是$('.countdown').text('something');

const endTime = moment().add(15, 'seconds'); // Just for try
const countDownDate = moment(endTime);

const interval = setInterval(function() {
  diff = countDownDate.diff(moment());

  if (moment().isSameOrAfter(countDownDate)) {
    clearInterval(interval);
    $('#countdown').text("EXPIRED");
    $(':input[type="submit"]').prop('disabled', false);
  } else
    $('#countdown').text(moment.utc(diff).format("HH:mm:ss"));
  $(':input[type="submit"]').prop('disabled', true);

}, 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://momentjs.com/downloads/moment.min.js"></script>

<div class="col-12">
  <input type="submit" name="submit" class="btn btn-success btn-sm btn-block" value="Send" onclick="response();">
</div>

<div id="countdown"></div>

于 2021-06-09T13:00:14.070 回答