繁体   English   中英

PHP-MySQL反向计数器FlipClock

[英]Reverse counter FlipClock with PHP-MySQL

我想将flipclock用于反向计数器。 计时器应从hh:mm:ss(例如19:40:46)开始到00:00:00。

下面是代码

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
    }); 
});

我不要约会 另外,时间值应该从MySQL获取,并且对于不同的用户来说,登录时的时间值是不同的。从PHP-MySQL,我有:

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']);

    }
}

从上面的代码中,我得到了(示例)的值

  1. $ timeRemaining = 19:40:46
  2. $小时= 19
  3. 每分钟= 40
  4. $ second = 46

如何使用上述Flipclock代码中的javascript / jquery中的值...

对于flipClock,您必须将clockFace更改为“ HourlyCounter”,因此它不显示日期。

之后,有了php变量,您可以将它们“回显”到javascript代码中,例如,在网页末尾,您可以输入:

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

您始终可以将其放在“ onload”函数或类似的函数中,但应该可以正常工作。

您没有留下关于计数器所显示的实际html页面的任何详细信息,所以我无法帮助您进一步进行此操作。

祝好运!

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM