使用来自jQuery的值运行MySQL计数器

Question

我有jQuery计数器，它把数字从一个固定号码移到另一个固定号码。但是我想要创建一个计数器，它以数字结尾，来自MySQL数据库。

计数器功能代码：

现在，它从99950开始值，结束值为100000，但我想更改结束值。它应该是我从mysql中获取的值。

<script type="text/javascript">

(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);

jQuery(function($) {
        $('.timer').countTo({
            from: 99950,
            to: 100000,
            speed: 2000,
            refreshInterval: 50,
            onComplete: function(value) {
                console.debug(this);
            }
        });
    });


</script>

HTML代码：

<h2><span class="timer" style="color:#F44336;font-weight:700; font-size:20px;"></span></h2>

Answer 1

您需要一种服务器端语言来获取从mysql提取的数据。例如，如果您使用PHP作为服务器端语言，在这种情况下，您可以简单地使用：

<?php 
 mysql_connect('host','username','password') or die();
 mysql_select_db('your_database_name') or die();
 $query='SELECT `min_count`, `max_count` FROM 'your_table_name`;
 $row=mysql_query($query);
 while($rs=mysql_fetch_array($row)){
  $from=$rs[0];
  $to=$rs[1];
 }
?>
<script type="text/javascript">

(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);

jQuery(function($) {
        $('.timer').countTo({
            from: <?php echo "$from"; ?>,
            to: <?php echo "$to"; ?>,
            speed: 2000,
            refreshInterval: 50,
            onComplete: function(value) {
                console.debug(this);
            }
        });
    });

Answer 2

您的意思是，要将sql查询发送到计数器吗？为此，您可以使用Ajax，使用sql查询创建一个php文件，并使用AJAX从脚本中调用它。

Answer 3

jQuery代码：

$.ajax({
    type: "POST",
    dataType: "json",
    url: 'endpoint to php script',
    success: function(data) { 
        $('.timer').countTo({
            from: data.startFrom,
            to: data.endOn,
            speed: 2000,
            refreshInterval: 50,
            onComplete: function(value) {
                console.debug(this);
            }
        });
    },
    error: function(error) {
        console.log(error);
    }
});

PHP代码：

<?php
//I assume you know how connect to your database and get data
header("Content-Type: application/json", true);

$result = array(
        'startFrom' => 1000,
        'endOn' => 9000
    ); 

echo json_encode($result);

我认为这是清楚的，并解释这代码是不需要的