1

我想在我的网站上有一个像这样的计时器：flipClock.js。我下载了代码并测试了 base.html 文件。一切正常。

现在我复制了代码并将 css 和 js 文件包含在我的 codeigniter 项目中，如下所示：

<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 回答