新增动画数数

application/admin/view/default/index/init.html

@@ -13,56 +13,56 @@
 				<li>
 					<div class="li-content">
 						<p class="name">用户总量</p>
-						<p class="total">{{$user.total_count}}</p>
+						<p class="total animation-count-to" data-to="{{$user.total_count}}" data-speed="1500">0</p>
 						<div class="yesterday">
 							<span>昨日</span>
-							<span>{{$user.yesterday_count}}</span>
+							<span class="animation-count-to" data-to="{{$user.yesterday_count}}" data-speed="1500">0</span>
 						</div>
 						<div class="today">
 							<span>今日</span>
-							<span>{{$user.today_count}}</span>
+							<span class="animation-count-to" data-to="{{$user.today_count}}" data-speed="1500">0</span>
 						</div>
 					</div>
 				</li>
 				<li>
 					<div class="li-content">
 						<p class="name">订单总量</p>
-						<p class="total">{{$order_number.total_count}}</p>
+						<p class="total animation-count-to" data-to="{{$order_number.total_count}}" data-speed="1500">0</p>
 						<div class="yesterday">
 							<span>昨日</span>
-							<span>{{$order_number.yesterday_count}}</span>
+							<span class="animation-count-to" data-to="{{$order_number.yesterday_count}}" data-speed="1500">0</span>
 						</div>
 						<div class="today">
 							<span>今日</span>
-							<span>{{$order_number.today_count}}</span>
+							<span class="animation-count-to" data-to="{{$order_number.today_count}}" data-speed="1500">0</span>
 						</div>
 					</div>
 				</li>
 				<li>
 					<div class="li-content">
 						<p class="name">成交总量</p>
-						<p class="total">{{$order_complete_number.total_count}}</p>
+						<p class="total animation-count-to" data-to="{{$order_complete_number.total_count}}" data-speed="1500">0</p>
 						<div class="yesterday">
 							<span>昨日</span>
-							<span>{{$order_complete_number.yesterday_count}}</span>
+							<span class="animation-count-to" data-to="{{$order_complete_number.yesterday_count}}" data-speed="1500">0</span>
 						</div>
 						<div class="today">
 							<span>今日</span>
-							<span>{{$order_complete_number.today_count}}</span>
+							<span class="animation-count-to" data-to="{{$order_complete_number.today_count}}" data-speed="1500">0</span>
 						</div>
 					</div>
 				</li>
 				<li>
 					<div class="li-content">
 						<p class="name">收入总计</p>
-						<p class="total">{{$order_complete_money.total_count}}</p>
+						<p class="total animation-count-to" data-to="{{$order_complete_money.total_count}}" data-speed="1500" data-decimals="2">0.00</p>
 						<div class="yesterday">
 							<span>昨日</span>
-							<span>{{$order_complete_money.yesterday_count}}</span>
+							<span class="animation-count-to" data-to="{{$order_complete_money.yesterday_count}}" data-speed="1500" data-decimals="2">0.00</span>
 						</div>
 						<div class="today">
 							<span>今日</span>
-							<span>{{$order_complete_money.today_count}}</span>
+							<span class="animation-count-to" data-to="{{$order_complete_money.today_count}}" data-speed="1500" data-decimals="2">0.00</span>
 						</div>
 					</div>
 				</li>

application/admin/view/default/public/footer.html

@@ -19,6 +19,9 @@
 <!-- 元素拖拽排序插件 -->
 <script type='text/javascript' src="{{$Think.__MY_ROOT_PUBLIC__}}static/common/lib/dragsort/jquery.dragsort-0.5.2.min.js"></script>
 
+<!-- 动画数数 -->
+<script type='text/javascript' src="{{$Think.__MY_ROOT_PUBLIC__}}static/common/lib/animation-count-to/animation.count.to.js"></script>
+
 <!-- amazeui插件 -->
 <script type='text/javascript' src="{{$Think.__MY_ROOT_PUBLIC__}}static/common/lib/amazeui-switch/amazeui.switch.min.js"></script>
 <script type='text/javascript' src="{{$Think.__MY_ROOT_PUBLIC__}}static/common/lib/amazeui-chosen/amazeui.chosen.min.js"></script>

public/static/common/lib/animation-count-to/animation.count.to.js

@@ -0,0 +1,88 @@
+$(function()
+{
+    $.fn.animation_count_to = function (options)
+    {
+        options = options || {};
+        return $(this).each(function () {
+            // set options for current element
+            var settings = $.extend({}, $.fn.animation_count_to.defaults, {
+                from:            $(this).data('from'),
+                to:              $(this).data('to'),
+                speed:           $(this).data('speed'),
+                refreshInterval: $(this).data('refresh-interval'),
+                decimals:        $(this).data('decimals')
+            }, options);
+            
+            // how many times to update the value, and how much to increment the value on each update
+            var loops = Math.ceil(settings.speed / settings.refreshInterval),
+                increment = (settings.to - settings.from) / loops;
+            
+            // references & variables that will change with each update
+            var self = this,
+                $self = $(this),
+                loopCount = 0,
+                value = settings.from,
+                data = $self.data('animation_count_to') || {};
+            
+            $self.data('animation_count_to', data);
+            
+            // if an existing interval can be found, clear it first
+            if (data.interval) {
+                clearInterval(data.interval);
+            }
+            data.interval = setInterval(updateTimer, settings.refreshInterval);
+            
+            // initialize the element with the starting value
+            render(value);
+            
+            function updateTimer() {
+                value += increment;
+                loopCount++;
+                
+                render(value);
+                
+                if (typeof(settings.onUpdate) == 'function') {
+                    settings.onUpdate.call(self, value);
+                }
+                
+                if (loopCount >= loops) {
+                    // remove the interval
+                    $self.removeData('animation_count_to');
+                    clearInterval(data.interval);
+                    value = settings.to;
+                    
+                    if (typeof(settings.onComplete) == 'function') {
+                        settings.onComplete.call(self, value);
+                    }
+                }
+            }
+            
+            function render(value) {
+                var formattedValue = settings.formatter.call(self, value, settings);
+                $self.html(formattedValue);
+            }
+        });
+    };
+        
+    $.fn.animation_count_to.defaults = {
+        from: 0,               // the number the element should start at
+        to: 0,                 // 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
+        formatter: formatter,  // handler for formatting the value before rendering
+        onUpdate: null,        // callback method for every time the element is updated
+        onComplete: null       // callback method for when the element finishes updating
+    };
+
+    function formatter(value, settings) {
+        return value.toFixed(settings.decimals);
+    }
+
+    // start all the timers
+    $('.animation-count-to').each(function(options) {
+        var $this = $(this);
+        options = $.extend({}, options || {}, $this.data('animation_count_to_options') || {});
+        $this.animation_count_to(options);
+    });
+});