Moment js / Jquery ajax倒数计时器与mysql

Posted 2023-05-08

【中文标题】Moment js / Jquery ajax倒数计时器与mysql

【英文标题】：Moment js / Jquery ajax countdown timer with mysql

【发布时间】：2021-08-25 12:07:18

【问题描述】：

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

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

【参考方案1】：

问题是错误地使用 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>

【讨论】：

感谢您的支持。但是我从 ajax 以可接受的格式 (Y/m/d H:i:s) 获得了 mysql 完成时间或“endTime”，我该如何在其中使用它？