objectivehtml / FlipClock

http://flipclockjs.com/
MIT License
2.74k stars 954 forks source link

Set & Show total time, click button and start countdown. #88

Closed gh4dp closed 10 years ago

gh4dp commented 10 years ago

Hi, Just found this out and glad I tried. But I want to show total time and start count down upon a press of a button. I created a button and expected to start the timer when clicked - though it starts on its own and immediately.

How can I make it start only when button is pressed? Please help.

Here is my code:


<html>
    <head>
        <link rel="stylesheet" href="/css/flipclock.css">

        <style type="text/css">
            .clock {
                zoom: 0.25;
                -moz-transform: scale(0.5)
            }
        </style>
    </head>

    <body>

        <div class="clock"></div>

        <p>
        <button onclick="startTimer()">Start Clock!</button>

        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script src="/js/flipclock.min.js"></script>

        <script type="text/javascript">
            var clock = $('.clock').FlipClock(90*60, {
                autostart: false,
                countdown: true
            });

            function startTimer() {
                clock.start();          
            }
        </script>

    </body>
</html>
objectivehtml commented 10 years ago

I know it's been a while on this issue, just replying here for others. Refer to the countdown-start-callback.html in the repo for an example. That should work for what you need.