CODEWITHSUNDEEP
jqueryflipclock
Max
Max

Reputation: 86

FlipClock JS: Start personalized countdown starting from a specific date

I'm using FlipClock.js to do a 30-hour countdown and, when it reaches zero, add one to another counter and the countdown will restart. Currently I was able to arm both the counter and the countdown, using smaller time periods to test if they work. The problem is that both are restarted each time the browser refreshes. How can I define a start date for both clocks?

The next code counts down one minute instead of thirty minutes and the counter adds one every three seconds instead of every thirty hours.

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

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

    $(document).ready(function() {
        clock1 = new FlipClock($('.clock1'), 60, {
            clockFace: 'MinuteCounter',
            autoStart: true,
            countdown: true,
            callbacks: {
                stop: function() {
                    clock.setTime(61);
                    clock.start();
                }
            }
        });

    });
    </script>

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

    $(document).ready(function() {

        clock2 = $('.clock2').FlipClock({
            clockFace: 'Counter',
            autoStart: false,
        });

        setInterval(function(){
                clock2.increment();
        }, 3000);

    });

</script>

</body>

I appreciate your help in advance.

Upvotes: 0

Views: 506

Answers (0)

Related Questions