Question

我在rails应用程序中使用数字倒计时插件（url：https://github.com/Reflejo/jquery-countdown）。我在资源/ javascript中放置了jquery.countdown.js文件，并在application.js中使用了// = require jquery.countdown，并将digits.png放在assets文件夹中。我使用以下代码

<body>    
<script>
$('.counter').countdown({
image: "url('/assets/digits.png')",
format: "mm:ss",
endTime: new Date(2014,1,2,18,05),
timerEnd: function() { alert('end!!'); }
});
</script>
<div class="counter"></div>
</body>

application.js代码是

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require jquery.countdown
//= require_tree .

问题是我可以在倒计时结束后收到提示，但无法在前端看到/加载时钟计时器。任何人都可以帮我解决问题。

Answer 1

以下适用于我。将倒计时功能放在$（function（）{}）;

中

这意味着一旦加载了DOM，你就要求jQuery将倒计时绑定到div类“counter”。

另外，请勿在倒计时功能的images参数中指定url（）。实际上只需将digits.png粘贴到公共文件夹中，然后从倒计时功能中删除images选项。让电脑为你工作!!

<script>
$(function(){
    $('.counter').countdown({
    images: "digits.png",
    format: 'hh:mm:ss',
    endTime: "12:32:55",
    timerEnd: function() { alert('end!!'); }
  });
});
</script>

Answer 2

您需要在require_tree .

之前提出要求

Answer 3

当您使用这样的插件时，建议将其放在vendor目录中，因此在此插件中有3个文件夹：css，img和{{1}首先下载这些文件夹然后在每个文件夹中获取你想要的文件，例如在js文件夹中有js和jquery.countdown.js，这两个文件是相同的，只是第二个文件是压缩的，而且更多方便生产使用，第一个没有压缩，你可以在开发中使用它有一个可读代码，如果你想看看插件如何工作...，所以使用其中之一。对于jquery.countdown.min.js，有一个名为css的文件，请不要忘记复制您想要的图像media.css文件夹

第二步：将js文件放在img下，将/vendor/assets/javascript放在media.css下，暂时可以将您需要的图像放在media.css中，或者将其放在您的身上在vendor/assets/stylesheets下执行，只需在拨打/assets/images/

时使用正确的路径引用它

最后一步是在application.js和application.css中要求你的js和css文件：

的application.js

$('.counter').countdown()

application.css

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require jquery.countdown
//= require_tree .

也不要忘记将你的脚本放在$（function（）{//你的脚本}中）以确保在将..... //= require media ....元素应用到$('.counter')之前加载.countdown()元素，因为@ beck03076说

无法在轨道中显示倒计时器

3 个答案: