floraachy/shopxo
1
0
Fork 0
mirror of https://gitee.com/zongzhige/shopxo.git synced 2024-12-02 20:10:30 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

新增动画数数

Browse Source
This commit is contained in:
gongfuxiang 2019-02-23 09:40:32 +08:00
parent 5a82819a1e
commit ba92f00d5b
3 changed files with 103 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
application/admin/view/default/index/init.html
View File

@ -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>

3
application/admin/view/default/public/footer.html
View File

@ -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>

88
public/static/common/lib/animation-count-to/animation.count.to.js Normal file
View File

@ -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);
});
});