时间戳

首页 > 解决方案 > 使用倒计时日期保存当前进度 - 进度条引导程序 4

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

问题描述

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

  1. 当在管理员上插入日期时，我接受它，然后在 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)

  2. 放置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% 的百分比除以时间的剩余秒数。
知道怎么做吗？谢谢

标签： javascripthtmljqueryruby-on-railsbootstrap-4

解决方案

假设 countdown_date 是期限值，deadline_created_at_time 是创建期限时的时间戳，在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

推荐阅读