javascript - codeigniter 中的 Flipclock.js

标签 javascript codeigniter flipclock

我想在我的网站上安装一个计时器,如下所示: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”

请问有人可以帮助我吗?

最佳答案

这正在工作:

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>

关于javascript - codeigniter 中的 Flipclock.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32030579/

相关文章:

javascript - Javascript 中的二进制搜索

javascript - 将后端数据加载到 Backbone 模型的典型方法

javascript - jQuery 在 html 文件中不起作用(JS LINT 错误,例如 '$' 在定义之前被使用)

mysql - 代码查询

php - 在 PHP/Codeigniter 中使用 node.js 和 socket.io 的实时评论系统

javascript - 修改FlipClock,使刷新页面时计时器不会重置

javascript - 如何从 JAVASCRIPT 中的字符串中删除括号?

php - 代码点火器和搜索引擎优化

javascript - 在所有屏幕尺寸上自动居中 Flipclock.js 对象