Javascript 无法在rails中显示倒计时计时器_Javascript_Jquery_Ruby On Rails_Asset Pipeline_Countdowntimer

Javascript 无法在rails中显示倒计时计时器

javascript jquery ruby-on-rails

Javascript 无法在rails中显示倒计时计时器,javascript,jquery,ruby-on-rails,asset-pipeline,countdowntimer,Javascript,Jquery,Ruby On Rails,Asset Pipeline,Countdowntimer,我正在rails应用程序中使用数字倒计时插件（url:）。我已将jquery.countdown.js文件放在assets/javascript中，并在application.js中使用了//=require jquery.countdown，并将digits.png放在assets文件夹中。我正在使用以下代码 <body> <script> $('.counter').countdown({ image: "url('/assets/digits.png')",

我正在rails应用程序中使用数字倒计时插件（url:）。我已将jquery.countdown.js文件放在assets/javascript中，并在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>

问题是，我能够在倒计时结束后获得警报，但无法查看/加载前端的计时器。有人能帮我解决这个问题吗。

你需要在

require\u树之前要求它。

以下内容对我有用。将倒计时函数放在$（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>


$（函数（）{
$（'.counter'）。倒计时({
图片：“digits.png”，
格式：“hh:mm:ss”，
结束时间：“12:32:55”，
timerEnd:function（）{alert（'end！！'）；}
});
});

当您使用这样的插件时，建议将其放在

供应商

目录中，因此在该插件中有3个文件夹：

css

、

img

和

js

，首先下载这些文件夹，然后在每个文件夹中获取您想要的文件，例如，在js文件夹中有

jquery.countdown.js

和

jquery.countdown.min.js

，这两个文件是相同的，只是第二个文件被压缩，更便于生产使用，第一个文件没有压缩，如果你想了解插件的工作原理，可以在开发中使用它来获得可读的代码。。。，因此，使用其中一个。对于

css

有一个名为

media.css

的文件，不要忘记复制您想要的图像，它也在

img

文件夹中

第二步：将js文件放在

/vendor/assets/javascript

下，将

media.css

放在

vendor/assets/stylesheets

下，此时您可以将所需的图像放在media.css中，或者将其放在

/assets/images/

下，只需在调用

时使用正确的路径引用即可$（“.counter”）.countdown（）

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

application.js

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

application.css

.....
//= require media
....

另外，不要忘记将脚本放在$（function（）{//your script}）中，以确保在应用

.countdown（）之前加载了$（'.counter'）
元素

函数，正如@beck03076所说的那样

显示你的应用程序。添加了jsapplication.js代码。你在使用资产管道吗？是的，我在使用资产管道。取出turbolinks，看看会发生什么。如果它在移除turbolinks后工作，那么你可能不需要为我工作。但是它显示了两个半冷。顺便问一下，我可以知道你在哪里有ke吗js文件以及您在application.js文件中引用它的方式。将倒计时js放在app/assets/javascripts中，并从application中删除此行“/=require jquery.countdown”。jsI已经在示例项目（）上测试了您的方法，在这种情况下，它无法找到倒计时方法，因为.js文件未加载。PS：在product controller的索引页中实现了倒计时计时器。我想知道我在哪里出错。

.....
//= require media
....