1

私のウェブサイトに次のようなタイマーが必要です: flipClock.js。コードをダウンロードし、base.html ファイルをテストしました。すべてがうまくいきました。

次に、コードをコピーして、次のように codeigniter プロジェクトに css ファイルと js ファイルを含めました。

<head>
<link href="<?php echo base_url();?>css/flipclock.css" rel="stylesheet">
</head>

<body><div class="clock" style="margin:2em;"></div>
            <div class="message">
            </div>

    </div>
</body>
<script src="<?php echo base_url();?>js/jquery.js"></script>
<script src="<?php echo base_url();?>js/flipclock.min.js"></script>
<script type="text/javascript">
    var clock;

    $(document).ready(function() {
        var clock;

        clock = $('.clock').FlipClock({
            clockFace: 'DailyCounter',
            autoStart: false,
            callbacks: {
                stop: function() {
                   $('.message').html('The clock has stopped!')
                }
            }
        });

        clock.setTime(220880);
        clock.setCountdown(true);
        clock.start();

    });
</script>

今、ウェブページを読み込んでもタイマーが表示されません。コンソールに「Uncaught TypeError: $(...).FlipClock is not a function」というエラーが表示されます

誰か助けてください。

4

3 に答える 3

0

キャッチされていない TypeError: $(...).FlipClock は関数ではありません

以下を使用すると、同様のエラーメッセージが表示されました。

var clock = $('.myTime-Clock').FlipClock({ // ... your options here });

最後に、以下が機能しました：

var clock = new FlipClock($('.myTime-Clock'), {  });

参照: http://flipclockjs.com/#basic-example

于 2016-10-27T10:25:48.573 に答える
0

これは機能しています：

var clock;

$(document).ready(function() {
  var clock;

  clock = $('.clock').FlipClock({
    clockFace: 'DailyCounter',
    autoStart: false,
    callbacks: {
      stop: function() {
        $('.message').html('The clock has stopped!')
      }
    }
  });

  clock.setTime(220880);
  clock.setCountdown(true);
  clock.start();

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.rawgit.com/objectivehtml/FlipClock/master/src/flipclock/css/flipclock.css" rel="stylesheet" />
<script src="https://cdn.rawgit.com/objectivehtml/FlipClock/master/compiled/flipclock.min.js"></script>
<div class="clock" style="margin:2em;"></div>
<div class="message">
</div>

于 2015-08-16T07:01:26.420 に答える
0

JS ライブラリを呼び出すようにしてください

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

そしてあなたのコード<script src="<?php echo base_url();?>js/flipclock.min.js"></script>

したがってflipclock.min.js、アプリケーションフォルダーの外に配置する必要があります。

application
Js
   flipclock.min.js
Index.php
.....
于 2015-08-16T07:03:05.520 に答える