Reverse counter FlipClock with PHP-MySQL

Question

I want to use flipclock for the reverse counter. The timer should start from hh:mm:ss (eg, 19:40:46) to 00:00:00.

Below is the code

var clock;

$(document).ready(function() {

    // Grab the current date
    var currentDate = new Date();

    // Set some date in the future. In this case, it's always Jan 1
    var futureDate  = new Date(currentDate.getFullYear() + 1, 0, 1);

    // Calculate the difference in seconds between the future and current date
    var diff = futureDate.getTime() / 1000 - currentDate.getTime() / 1000;

    // Instantiate a coutdown FlipClock
    clock = $('.dw_clock').FlipClock(diff, {
        clockFace: 'DailyCounter',
        countdown: true,
        showSeconds: true
    }); 
});

I don't want the date. Also, the time values should get fetched from MySQL and are different for different users when they log in. From PHP-MySQL, I have:

function timeToPlay(&$smarty){

    $sqlStr = "select timediff('24:00:00', time(taken_on)) as timeRemaining,
            hour(timediff('24:00:00', time(taken_on))) as hour,
            minute(timediff('24:00:00', time(taken_on))) as minute,
            second(timediff('24:00:00', time(taken_on))) as second
        FROM profile_sicc_exer_score where user_id=".$_SESSION['user_id']."
        order by id desc limit 1";

    $sqlQuery = mysql_query($sqlStr) or die(mysql_error()."<hr>".$sqlStr);

    if ( mysql_num_rows($sqlQuery) ) {

        $timeToPlayNext = mysql_fetch_assoc($sqlQuery);

        $smarty->assign("timeRemaining",$timeToPlayNext['timeRemaining']);
        $smarty->assign("hour",$timeToPlayNext['hour']);
        $smarty->assign("minute",$timeToPlayNext['minute']);
        $smarty->assign("second",$timeToPlayNext['second']);

    }
}

From the above code, I get the values of (example)

1. $timeRemaining = 19:40:46
2. $hour = 19
3. $minute = 40
4. $second = 46

How do I use the values in the above Flipclock code which is javascript/jquery...

Answer 1

For flipClock, you have to change the clockFace to "HourlyCounter", so it doesn't show the date.

After that, having the php variables, you can "echo" them into the javascript code, for example, at the end of the webpage, you can put:

<script>
clock.setTime(<?php echo $hour*3600+$minute*60+$second; ?>);
</script>

You can always put it in an "onload" function or something like that, but it should work fine with that.

You didn't left any details about the actual html page where the counter is showing, so I can't help you further this.

Good luck!