Search code examples
javascriptjqueryflipclock

Flipclock has an extra hour

It supposes that my clock should count to 00:00 HRS but it's doing at 01:00 HRS

any ideas?

this is my code

<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="countdown" style="margin:2em;"></div>
    <div class="message"></div>

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

    var currentDate = new Date();

    var birthDay = new Date(currentDate.getFullYear() + 1, 2, 13);

    var diff = birthDay.getTime() / 1000 - currentDate.getTime() / 1000;


    clock = $('#countdown').FlipClock(diff, {
        countdown: true,
        clockFace: 'DailyCounter',
        language: 'es',
        showSeconds: true
    });
    </script>
    
    </body>
</html>

ps. birthDay is on 13 - Mar - 2021

Thanx a lot!

You could see this example:

https://github.com/objectivehtml/FlipClock/blob/master/examples/base.html

Solution

  • In the above snippet you are showing the count down time. It calculates the remaining time from current date to a given date in days, hours, minutes, and seconds.

    See the following example where we are displaying remaining date, time and hour of tomorrow. It is 12:31 PM here and 11 hours 28 minutes remaining to tomorrow.

    <!DOCTYPE html>
<html>
<head>
  <title>FlipClock Example</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.7/flipclock.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.7/flipclock.min.js"></script>
</head>
<body>
  <div id="countdown"></div>
  <script type="text/javascript">
    $(document).ready(function(){
    var clock;
    var currentDate = new Date();
    var birthDay = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate()+1);
    console.log(currentDate);
    console.log(birthDay);
    var diff = birthDay.getTime() / 1000 - currentDate.getTime() / 1000;
    clock = $('#countdown').FlipClock(diff, {
        countdown: true,
        clockFace: 'DailyCounter',
        language: 'es',
        showSeconds: true
    });
  });
  </script>

</body>
</html>

    Output:

    flipclock example