您如何根据相对时间制作倒数计时器/进度条?

问题描述

我正在尝试为当天设置一个相对倒计时计时器(用户输入-默认为上午8点至下午6点):

I'm trying to make a relative countdown timer for the day (user input - defaults 8am to 6pm):

$mb_time_start      = strtotime( 'today 0800' );
$mb_time_end        = strtotime( 'today 1800' );
$mb_time_elapsed    = ( $mb_time_end - $mb_time_start );

function mb_countdown_timer() {

    var mb_time_start   = <?= $mb_time_start; ?>,
        mb_time_end     = <?= $mb_time_end; ?>,
        mb_time_now     = new Date(),

        mb_time_today   = <?= $mb_time_end; ?>,
        mb_time_elapsed = mb_time_now - mb_time_start,

        mb_percent      = ( ( mb_time_elapsed / mb_time_today )  );

        console.log( mb_percent );
}

但是，此时日志显示为998.9775919881246，这是不正确的-即使在编写此日志时甚至是晚上7点.

However at the moment the log is coming up as 998.9775919881246 which is incorrect - even for 7pm while writing this.

获得上述建议后，我的意图是计算start至end-> 0800至1800 = 10h * 2 = 20

My intention after I can get the above is to have the calculation of 30 minute intervals between start to end -> 0800 to 1800 = 10h * 2 = 20

8am               12pm                                      6pm
-------------------------------------------------------------
|  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  | 
-------------------------------------------------------------

然后从mb_countdown_timer()填充进度栏:

8am                    12pm                                      6pm
------------------------------------------------------------------
| * | * | * | * | * |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  | 
------------------------------------------------------------------

任何帮助将不胜感激！

推荐答案

首先，需要设置时区-这是问题之一！其次，我误解了JS vs PHP输出，导致JS以毫秒为单位，而PHP为秒-因此必须将毫秒转换为秒.对于秒部分，我在这里有一个问题:您如何每30分钟循环一次我在上面的顶部显示了计时器栏.

First off, needed to set the timezone - that was issue one! Secondly, I misinterpreted the JS vs PHP outputs, which resulted in the JS being in milliseconds while PHP was seconds - so had to convert milliseconds to seconds. For the seconds part I had the question here: How would you loop every 30 minutes where I outputted the timer bar on top.

date_default_timezone_set( get_option('timezone_string') ); // Australia/Melbourne` 
$mb_time_start      = strtotime( 'today 0800' );
$mb_time_end        = strtotime( 'today 1800' );
$mb_time_total      = ( $mb_time_end - $mb_time_start ); // 36000

function mb_countdown_timer() {

    // get the start time
    var mb_time_start = <?= $mb_time_start; ?>,

    // get the end time
        mb_time_end   = <?= $mb_time_end; ?>,

    // get the seconds total (end - start)
        mb_time_total = <?= $mb_time_total; ?>,

    // get the time now
        mb_time_now = new Date(),

    // milliseconds to seconds
        mb_time_now = Math.floor( mb_time_now / 1000 ),

    // elapsed time from start time
        mb_time_elapsed = mb_time_now - mb_time_start,

    // convert to percentage
        mb_time_percent     = ( ( mb_time_elapsed / mb_time_total ) * 100 ),

    // check the % is neither >100 or <0
        mb_time_percent     = ( (mb_time_percent > 100 || mb_time_percent < 0) ? 0 : mb_time_percent );

    // add the positioning via css
    $(".mb-marker").css("left", mb_time_percent + "%");

    // run at 1 minute
    setTimeout(mb_countdown_timer, 1000 * 60);

}

// run continuously 
setInterval( mb_countdown_timer(), (1000 * 60) );

这篇关于您如何根据相对时间制作倒数计时器/进度条?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！