1

JavaScriptフリップカウンターを実装したい。必要なすべてのファイルを含め、この記事のようにコードを追加しました - http://cnanney.com/journal/code/apple-style-counter-revisited/#demo .

ページにhtmlを追加しました：

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

私のapplication.jsにjavscriptを追加しました：

  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。

4

2 に答える 2

2

これをあなたに追加しますapplication.js

$(function(){
    var myCounter = new flipCounter("counter", {inc: 23, pace: 500});
});
于 2012-08-21T08:55:55.603 に答える
0

すべてが機能するように見えます。

自己匿名呼び出し関数内に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" />
于 2012-08-21T08:55:48.397 に答える