时间戳

首页 > 解决方案 > 倒数计时器，setDate 有问题

javascript - 倒数计时器，setDate 有问题

问题描述

我目前正在通过库使用倒数计时器，具体来说 - flipclockjs。现在我可以让它在使用间隔时正常工作和倒计时，但是在尝试使用时setDate，我一直失败并且它根本不起作用。

如果这是一个令人讨厌的问题，我深表歉意，对于这类事情来说还是比较新的。非常感谢任何帮助，谢谢！

这是我的代码：

<html>
<head>
    <link rel="stylesheet" href="../compiled/flipclock.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="../compiled/flipclock.js"></script>
</head>
<body>

<div class="clock" style="margin:2em;"></div>
<div class="message"></div>

<script type="text/javascript">
    var clock;

    $(document).ready(function() {
        var clock;
        clock = $('.clock').FlipClock({
            clockFace: 'DailyCounter',
            autoStart: false,
            callbacks: {
                stop: function() {
                    $('.message').html('The clock has stopped!')
                }
            }
        });

        clock.setTime(220880);
        clock.setCountdown(true);
        clock.start();
    });
</script>

</body>

标签： javascriptjqueryhtmlcsscountdowntimer

解决方案

您可以启动一个日期，然后从该日期和当前日期获取以秒为单位的差异，然后启动 FlipClock 传递差异值。

var clock = $('.clock').FlipClock( diff ,{...});

$(document).ready(function() {
      var d = new Date();
      d.setDate(d.getDate()+2);
      var curd = new Date();
      var diff = (d.getTime() - curd.getTime()) / 1000; //divide by 1000 to transform miliseconds in seconds
  
      var clock = $('.clock').FlipClock(diff,{
          clockFace: 'DailyCounter',
          autoStart: true,
          countdown: true,
          callbacks: {
              stop: function() {
                  $('.message').html('The clock has stopped!')
              }
          }
      });
  });
<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.css">

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.js"></script>
</head>
<body>
<div class="clock" style="margin:2em;"></div>
<div class="message"></div>
</body>

推荐阅读