rails 应用中最简单的可见计时器

Question

我正在尝试做一个可以精确显示剩余时间（以分钟和秒为单位）的前端计时器。

即使用户离开网站甚至关闭浏览器，此计时器也应该计时。

虽然我想到了做后端部分的简单方法，但我不知道如何做前端，因为我不懂 JS 或 jQuery。我可以使用宝石，但他们中的大多数人都在使用大炮来杀死苍蝇。不需要安排，因为我不需要回调。

我想做的只是简单的计时器，我在其中传递 rails 变量和完成时间，倒计时并在达到 0 时停止。

这里是 what I found so far，但是我如何将 rails 变量传递给 JS/jQuery？

@编辑可能重复的内容。这个问题是关于计时器的，但是从rails的角度来看。

Answer 1

有很多方法可以将数据从 back-end 传递到 Rails 中的 front-end。

首先，有可能实际向服务器执行请求以取回一些数据。在你的情况下，我认为这是矫枉过正。

另一种选择是通过 DOM 在您的视图中添加信息。一种经常使用的模式是向元素添加数据属性。这里有一些参考资料可以帮助您在 jquery or plain javascript.

中入门

您可以像这样将数据传递给 ERB 模板中的元素

<div id="timer" data-startdate="<%= get_date %>"></div>

然后让 front-end 读取这个值并适当地开始倒计时。

另一种选择是将 javascript 变量公开给您的 window 对象，方法是将其包含在 ERB 模板的脚本中

<script>var startDate = '<%= get_date %>';</script>

然后front-end就可以访问window.startDate.

祝你好运！

Answer 2

您找到的 js 计时器会很好用。将 RoR 变量传递到 js 的最简单方法是使用标准控制器 (.rb) -> 视图 (.html.erb) 通信通道。

在视图中：

<% <statement> %> - for conditionals and other pieces of non displayed code
<%= <statement> %> - for displaying variables etc.
<%# <statement> %> - easy way to comment ruby code

你想做的事情的例子可以是：

让我们有一个控制器site_controller.rb:

class SiteController < ApplicationController
  def index
    @time_variable = 5.hours
  end
end

现在我们可以为此创建视图 (site/index.html.erb)：（让 startTimer(duration, display) 已经被定义）

<div id='time'></div>
<script>
  window.onload = function () {
    var timer = <%= @time_variable.to_i %>;
    display = document.querySelector('#time');
    startTimer(fiveMinutes, display);
  };
</script>

希望这对您有所帮助。

Answer 3

您要做的是创建一个容器来显示您的文本并使用 javascript 更新其内容。要告诉 (client-side) javascript 它应该倒计时的时间，您可以创建一个包含该值的隐藏字段，并使用 jQuery 读出它。（注意：传递值也可以通过 AJAX+embedded ruby 在 JS-file 中实现，但更难理解，并在 [=62= 中创建一个隐藏字段] 应该可以更快地完成您的工作！）

正在检索隐藏字段的内容（a.k.a。倒计时即将结束的时刻）：

var end_time = $('hidden-field').text();

#hidden-field {
  display:none;
}

<span id='hidden-field'><%= time %></span>

（注意：由于 rails 与 jQuery 一起使用，因此使用它可以省去很多麻烦。但是，通常为此包含 jQuery-library 将被视为 "cannon to kill a fly"。此外，使请务必在 jQuery 调用中使用正确的 CSS-Selecter。）

您也可以简单地将此添加到您的 html.erb 以分配一个变量：

<script type='text/javascript'>var end_time = <%= time %> ;</script>

根据您的时间格式（日期时间与 unix 时间戳与...），然后让 Javascript 进行计算。由于 rails 通常在数据库中保存 Daytime-elements，这应该有效：

var time_left = Math.abs(new Date(end_time) - new Date());

要插入您的页面，请执行以下操作：

$('#result').text(time_left);

#result {
  // Some styling here
}

<p id='result'></p>

要使其从那时起自动运行，请将最后两个组合成一个函数，例如

var time_left;
function getTimeLeft() {
  time_left = Math.abs(new Date(end_time) - new Date());
  $('#result').text(time_left);
}

最后一次调用将每秒运行您的函数

setInterval(getTimeLeft, 1000);

我没有测试代码，但它应该可以工作，或者至少给出了您如何可以做到的基本思路。如果您运行有错误，请评论。

编码愉快。

P.S。雅各布的回答更简短，更切题。先尝试一下，如果需要更进一步，请返回这里。

rails 应用中最简单的可见计时器

Simplest visible timer in rails app

javascript

jquery

ruby-on-rails

countdown

countdowntimer