代码点火器中的flipclock.js答案

【问题标题】：flipclock.js in codeigniter代码点火器中的flipclock.js
【发布时间】：2016-10-27 18:25:48
【问题描述】：

我想在我的网站上设置一个类似这样的计时器：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”

有人可以帮我吗？

【问题讨论】：

看看this 解决方案是否适合您。
首先检查你的js文件链接是否正常

标签： javascript codeigniter flipclock

【解决方案1】：

这是有效的：

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>

【讨论】：

【解决方案2】：

确保调用 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
.....

【讨论】：

【解决方案3】：

未捕获的类型错误：$(...).FlipClock 不是函数

当我使用以下内容时，我收到了类似的错误消息：

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

以下方法终于奏效了：

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

参考：http://flipclockjs.com/#basic-example

【讨论】：