您将如何根据相对时间制作倒数计时器/进度条？答案

【问题标题】：How would you make a countdown timer / progress bar based on relative times?您将如何根据相对时间制作倒数计时器/进度条？
【发布时间】：2020-04-23 04:10:14
【问题描述】：

我正在尝试为当天制作一个相对倒数计时器（用户输入 - 默认为上午 8 点到下午 6 点）：

$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 点。

我得到上述结果后的意图是计算start 到end 之间的 30 分钟间隔 -> 0800 到 1800 = 10h * 2 = 20

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

然后从mb_countdown_timer()填充进度条：

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

任何帮助将不胜感激！

【问题讨论】：

标签： javascript php jquery time

【解决方案1】：

我不确定 mb_percent = ( ( mb_time_elapsed / mb_time_today ) );是正确的。 mb_time_today 不应该等于 mb_time_end-mb_start

【讨论】：

【解决方案2】：

首先，需要设置时区 - 这是问题一！其次，我误解了 JS 与 PHP 的输出，这导致 JS 以毫秒为单位，而 PHP 以秒为单位 - 所以必须将毫秒转换为秒。对于秒数部分，我在这里有一个问题：How would you loop every 30 minutes 我在顶部输出了计时器栏。

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

【讨论】：