倒数计时器,setDate出现问题

时间:2018-07-18 04:18:48

标签: javascript jquery html css countdowntimer

我目前正在通过图书馆使用具体的倒数计时器-flipclockjs。现在,在使用间隔时,我可以使其正常工作并倒计时,但是在尝试使用setDate等时,我一直失败,并且根本无法工作。

如果这是一个nooby问题,对于这些事情还是相对较新的,我深表歉意。非常感谢您的帮助!

这是我的代码:

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

1 个答案:

答案 0 :(得分:1)

您可以启动一个日期,然后获取与该日期和当前日期的秒数差,然后启动FlipClock并传递diff值。

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>