使用倒计时日期保存当前进度 - 进度条引导程序 4

Posted 2023-05-09

【中文标题】使用倒计时日期保存当前进度 - 进度条引导程序 4

【英文标题】：Save the current progression with countdown date - progress bar bootstrap 4

【发布时间】：2021-06-27 04:42:42

【问题描述】：

我想使用进度条引导程序 4 创建动态倒计时日期进度 我们可以设置百分比以使用宽度样式在标签上显示进度，但输入将使用日期格式（它将在管理员中插入）。所以这就是我所做的：

当在管理员上插入日期时，我接受它，然后在 JS 上我进行计算以获取秒数，即 “（在管理员上插入的截止日期）-（现在的当前日期时间）” = 我将从这里获得剩余时间的动态（以秒为单位）

    var countTime = #(properties.countdown_date.to_datetime.strftime('%a, %d %b %Y %H:%M:%S').to_time - Time.now.to_datetime.strftime('%a, %d %b %Y %H:%M:%S').to_time).to_i

properties.countdown_date = 是在admin上插入的调用截止日期的方法，格式示例为：DD-MM-YY H:M:S (31-03-2021 14:15:00)

将countTime 放入宽度样式

<div class="progress" style="height: 1.3rem">
  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="25" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar">
  </div>
</div>

$(".progress-bar").css("width", countTime+"%");

但我意识到百分比仍然是秒数，所以我需要将其再次转换为从 100% 开始的百分比除以时间的剩余秒数。 知道怎么做吗？谢谢

【问题讨论】：

您需要三个 date_time 值来生成百分比值。开始时间、当前时间、倒计时日期。

countdown_date 已经存在，即var countTime.. countTime 是从开始时间 - 当前时间.. 的计算结果以秒为单位

您的倒计时开始时间存储在哪里？

从管理员插入，将使用方法properties.countdown_date.. 调用，格式为：DD-MM-YY H:M:S.. example= 31-03-2021 14: 15:00

我已经得到了倒计时的剩余时间，但它仍然以秒为单位。我需要转换为除以 100% 的百分比值。所以当countTime 达到 0 秒时，它将变为 100%

【参考方案1】：

假设countdown_date是deadline值，deadline_created_at_time是deadline创建时的时间戳，在ActiveSupport::TimeWithZone

然后

total_time_in_sec = countdown_date.to_i - deadline_created_at_time.to_i
time_past = Time.now.to_i - deadline_created_at_time.to_i
percentage = time_past/total_time_in_sec.to_f*100