Jquery 函数没有显示,怎么回事?

标签 jquery html

我正在尝试让这个 Jquery 计数功能正常工作,但它没有为我显示,有人可以告诉我我做错了什么吗?

我正在使用由“mhuggins”( https://github.com/mhuggins/jquery-countTo ) 创建的函数,所以我还没有自己制作它,只是想让它工作。

countup.js

    (function($) {
    $.fn.countTo = function(options) {
        // merge the default plugin settings with the custom options
        options = $.extend({}, $.fn.countTo.defaults, options || {});

        // how many times to update the value, and how much to increment the value on each update
        var loops = Math.ceil(options.speed / options.refreshInterval),
            increment = (options.to - options.from) / loops;

        return $(this).each(function() {
            var _this = this,
                loopCount = 0,
                value = options.from,
                interval = setInterval(updateTimer, options.refreshInterval);

            function updateTimer() {
                value += increment;
                loopCount++;
                $(_this).html(value.toFixed(options.decimals));

                if (typeof(options.onUpdate) == 'function') {
                    options.onUpdate.call(_this, value);
                }

                if (loopCount >= loops) {
                    clearInterval(interval);
                    value = options.to;

                    if (typeof(options.onComplete) == 'function') {
                        options.onComplete.call(_this, value);
                    }
                }
            }
        });
    };

    $.fn.countTo.defaults = {
        from: 0,  // the number the element should start at
        to: 100,  // the number the element should end at
        speed: 1000,  // how long it should take to count between the target numbers
        refreshInterval: 100,  // how often the element should be updated
        decimals: 0,  // the number of decimal places to show
        onUpdate: null,  // callback method for every time the element is updated,
        onComplete: null,  // callback method for when the element finishes updating
    };
})(jQuery);

然后我尝试在这个 html 页面中使用它

test.html

<html>
<head>
<script type="text/javascript" src="scripts/jquery-1.6.2.js"></script>
<script type="text/javascript" src="scripts/countup.js"></script>
<script type="text/javascript"><!--
    $('.timer').countTo({from: 0, to: 500});
//--></script>
</head>

<body>
<span class="timer"></span>
</body>
</html>

当我启动页面时,没有任何反应。该脚本正在为其他人工作,所以显然是我做错了。我对此很陌生,所以这并不奇怪。

谢谢!

最佳答案

看起来您缺少 document.ready(function() {//计时器代码 });

关于Jquery 函数没有显示,怎么回事?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11393320/

相关文章:

javascript - 将鼠标悬停在选择框上时,Jquery 悬停功能会失灵

jquery - 对 YouTube oembed 调用的 JSONp 请求的响应给出 "invalid label"错误

html - Battlelog 如何从浏览器启动游戏?

html - CSS 径向渐变使 FireFox 崩溃

jquery - 通过访问变量重构类似的函数

javascript - 使用自己的文本更新所有 span 元素的内容

javascript - 查找并替换字符串中的 <?php & ?>

javascript - 限制容器内可放置拖动项目的数量

javascript - 如何在 IE8 及以上版本中使用 History.back()

javascript - 当窗口小于 448px 宽时,CSS 导致表单变得不可用