Closed. This question needs to be more focused。它当前不接受答案。
想改善这个问题吗?更新问题,使其仅通过editing this post专注于一个问题。
3年前关闭。
我正在尝试做前端计时器,以精确显示剩余时间(以分钟和秒为单位)。
即使用户离开站点或什至关闭浏览器,该计时器也应该计数。
尽管我想到了做后端部分的简单方法,但是我不知道如何做它的前端部分,因为我不了解JS或jQuery。
我可以使用宝石,但是大多数都使用大炮杀死苍蝇。无需调度,因为我不需要回调。
我想要做的只是一个简单的计时器,在该计时器中,我会随着完成的时间传递rails变量,并在达到0时递减计数并停止。
这是what I found so far,但是如何将rails变量传递给JS / jQuery?
@Edit可能重复。这个问题是关于计时器的,但是从轨道的角度来看。
(注意:由于jQuery附带了rails,因此使用它可以节省很多麻烦。但是,通常包括jQuery-library都被视为“杀死苍蝇的大炮”。此外,请确保使用正确的CSS选择器在jQuery调用中。)
您也可以将其简单地添加到html.erb中以分配变量:
然后根据时间的格式(datetime vs unix timestamp vs ...),让Javascript执行数学运算。由于Rails通常将Daytime-elements保存在数据库中,因此应该可以:
要将其插入页面,请执行以下操作:
为了使它从那时起自动工作,请将最后两个结合到类似
最后一个调用将每秒运行一次函数
我没有测试代码,但是它应该可以工作,或者至少给出基本的思路。如果遇到错误,请发表评论。
快乐的编码。
附言雅各布的答案更短,更重要。请先尝试一下,如果需要进一步操作,请回到这里。
想改善这个问题吗?更新问题,使其仅通过editing this post专注于一个问题。
3年前关闭。
我正在尝试做前端计时器,以精确显示剩余时间(以分钟和秒为单位)。
即使用户离开站点或什至关闭浏览器,该计时器也应该计数。
尽管我想到了做后端部分的简单方法,但是我不知道如何做它的前端部分,因为我不了解JS或jQuery。
我可以使用宝石,但是大多数都使用大炮杀死苍蝇。无需调度,因为我不需要回调。
我想要做的只是一个简单的计时器,在该计时器中,我会随着完成的时间传递rails变量,并在达到0时递减计数并停止。
这是what I found so far,但是如何将rails变量传递给JS / jQuery?
@Edit可能重复。这个问题是关于计时器的,但是从轨道的角度来看。
最佳答案
您想要做的是创建一个容器,该容器将显示您的文本并使用javascript更新其内容。为了告诉(客户端)JavaScript何时倒计时,您可以创建一个包含该值的隐藏字段,然后使用jQuery读出该字段。 (注意:传递值也可以通过JS文件中的AJAX +嵌入式ruby进行归档,但是要理解起来要困难得多,并且在html.erb中创建隐藏字段应该可以更快地完成工作!)
检索隐藏字段的内容(也就是倒计时导致的时间):
var end_time = $('hidden-field').text();
#hidden-field {
display:none;
}
<span id='hidden-field'><%= time %></span>
(注意:由于jQuery附带了rails,因此使用它可以节省很多麻烦。但是,通常包括jQuery-library都被视为“杀死苍蝇的大炮”。此外,请确保使用正确的CSS选择器在jQuery调用中。)
您也可以将其简单地添加到html.erb中以分配变量:
<script type='text/javascript'>var end_time = <%= time %> ;</script>
然后根据时间的格式(datetime vs unix timestamp vs ...),让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);
我没有测试代码,但是它应该可以工作,或者至少给出基本的思路。如果遇到错误,请发表评论。
快乐的编码。
附言雅各布的答案更短,更重要。请先尝试一下,如果需要进一步操作,请回到这里。