无法实现 JavaScript 翻转计数器答案

【问题标题】：Can't implement JavaScript flip counter无法实现 JavaScript 翻转计数器
【发布时间】：2012-08-21 08:23:52
【问题描述】：

我想实现 javascript 翻转计数器。我包含了所有需要的文件并添加了本文中的代码 - http://cnanney.com/journal/code/apple-style-counter-revisited/#demo。

我在我的页面中添加了 html：

<div id="counter" class="flip-counter"></div>

并将 javscript 添加到我的 application.js：

  var myCounter = new flipCounter("counter", {inc: 23, pace: 500});

这是我包含的文件（js 和 css）：

      <link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
      <link href="/assets/counter.css?body=1" media="all" rel="stylesheet" type="text/css" />

      <link href="/assets/jquery-ui-1.8.22.custom.css?body=1" media="all" rel="stylesheet" type="text/css" />
      <script src="/assets/jquery.js?body=1" type="text/javascript"></script>
      <script src="/assets/jquery-ui.js?body=1" type="text/javascript"></script>
      <script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
      <script src="/assets/jquery-flipcounter.js?body=1" type="text/javascript"></script>
      <script src="/assets/jquery-ui-1.8.22.custom.min.js?body=1" type="text/javascript"> </script>
      <script src="/assets/application.js?body=1" type="text/javascript"></script>

我还会在这里写下演示页面包含的文件：

     <!-- My flip counter script, REQUIRED -->
<script type="text/javascript" src="js/flipcounter.js"></script>
<!-- Style sheet for the counter, REQUIRED -->
<link rel="stylesheet" type="text/css" href="css/counter.css" />
<!-- NOT REQUIRED FOR COUNTER TO FUNCTION, JUST FOR DEMO PURPOSES -->
<!-- jQuery from Google CDN, NOT REQUIRED for the counter itself -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- jQueryUI from Google CDN, used only for the fancy demo controls, NOT REQUIRED for the counter itself -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
<!-- Style sheet for the jQueryUI controls, NOT REQUIRED for the counter itself -->
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/vader/jquery-ui.css" />
<!-- Style sheet for the demo page, NOT REQUIRED for the counter itself -->
<link rel="stylesheet" type="text/css" href="css/demo.css" />

这是带有工作计数器的 rar 存档：https://dl.dropbox.com/u/86122402/cnanney-apple-style-flip-counter-13fd00129a41.rar.

【问题讨论】：

console.log 中是否有任何错误？
很难判断你错在哪里，因为这里没有实际的代码。你能做一个jsFiddle吗？
我在演示文件夹中创建了完全空的 html 页面。添加了所需的文件，并在控制台Uncaught SyntaxError: Unexpected end of input test.html:77 GET file://platform.linkedin.com/in.js test.html:14 中获取这些错误
那你有另一个问题..与另一个 js 库相关的东西
那是我的错误。我修复了它并获得了新的 - TypeError: div is null div.insertBefore(newDigit, div.firstChild);

标签： javascript html counter

【解决方案1】：

将此添加到您的application.js

$(function(){
    var myCounter = new flipCounter("counter", {inc: 23, pace: 500});
});

【讨论】：

【解决方案2】：

一切看起来应该可以工作。

尝试在自匿名调用函数中添加 JavaScript。

$(function(){
    var myCounter = new flipCounter("counter", { inc:123, pace:600});
});

还要确保所有包含的文件都指向正确的位置。

替换为以下内容进行测试。

<script type="text/javascript" src="js/flipcounter.js"></script>
<link rel="stylesheet" type="text/css" href="css/counter.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/vader/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />

【讨论】：