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可能重复。这个问题是关于计时器的,但是从轨道的角度来看。

最佳答案

您想要做的是创建一个容器,该容器将显示您的文本并使用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);


我没有测试代码,但是它应该可以工作,或者至少给出基本的思路。如果遇到错误,请发表评论。

快乐的编码。

附言雅各布的答案更短,更重要。请先尝试一下,如果需要进一步操作,请回到这里。

09-10 11:56
查看更多