153 lines
3.4 KiB
JavaScript
153 lines
3.4 KiB
JavaScript
/**
|
||
*
|
||
* @authors yutent (yutent@doui.cc)
|
||
* @date 2016-08-19 10:38:25
|
||
*
|
||
*/
|
||
|
||
"use strict";
|
||
|
||
|
||
define(['avalon'], function(av){
|
||
|
||
|
||
|
||
av.component('do:count', {
|
||
$replace: true,
|
||
$template: '<ul class="do-ui-count"><li class="num-box" ms-repeat-obj="list" ms-class="split:obj.opt === 0"><span class="num" ms-repeat="obj.val">{{el}}</span></li></ul>',
|
||
maxLen: 8,
|
||
speed: 1,
|
||
update: av.noop,
|
||
list: [],
|
||
$list: [],
|
||
total: 0,
|
||
style: 2,
|
||
$construct: function(opt, a, b){
|
||
var vm = av.mix(a, b)
|
||
document.head.insertAdjacentHTML('afterBegin', '<style>' +
|
||
'.do-ui-count {width: 100%;height: 50px;text-align:center;}' +
|
||
'.do-ui-count li.num-box {overflow:hidden;display: inline-block;position: relative;width: 40px;height: 50px;margin:0 15px;line-height: 50px;background: #09f;font-size: 30px;}' +
|
||
'.do-ui-count li.num-box .num {display: block;width: 100%;height: 50px;margin-top: 0;transition: .3s ease-in-out}' +
|
||
'.do-ui-count li.num-box.split {width: auto;margin:0;background: none;}' +
|
||
'</style>')
|
||
|
||
vm.total = vm.total >> 0
|
||
vm.maxLen = vm.maxLen || 8
|
||
|
||
return av.mix(opt, vm)
|
||
},
|
||
$ready: function(vm, ele){
|
||
|
||
function updateList(val){
|
||
val = numberFormat(val, vm.maxLen)
|
||
|
||
vm.$list = []
|
||
vm.$list = val.split('')
|
||
if(vm.style === 2){
|
||
vm.$list = vm.$list.reverse()
|
||
val = vm.$list.join('').replace(/([\d,]{3})/g, '$1,')
|
||
val = val.replace(/^,|,$/g, '')
|
||
vm.$list = val.split('').reverse()
|
||
}
|
||
|
||
vm.$list.forEach(function(it, i){
|
||
|
||
if(it === ','){
|
||
if(!vm.list[i])
|
||
vm.list.push({opt: 0, val: [it]})
|
||
|
||
}else{
|
||
if(vm.list[i]){
|
||
if(it !== vm.list[i].last){
|
||
vm.list[i].last = it
|
||
vm.list[i].val.push(it)
|
||
var curr = ele.querySelectorAll('.num-box')[i]
|
||
curr.querySelector('.num').style.marginTop = vm.speed * 50 + 'px'
|
||
setTimeout(function(){
|
||
vm.list[i].val.shift()
|
||
}, 300)
|
||
}
|
||
}else{
|
||
vm.list.push({opt: 1, last: it, val: [it]})
|
||
}
|
||
}
|
||
|
||
})
|
||
}
|
||
|
||
updateList(vm.total)
|
||
|
||
vm.update = function(val){
|
||
if(val < 0) //确定滚动方向
|
||
vm.speed = 1
|
||
else
|
||
vm.speed = -1
|
||
|
||
|
||
vm.total = (vm.total - 0) + val
|
||
|
||
}
|
||
|
||
|
||
vm.$watch('total', function(n, o){
|
||
|
||
if(n === o)
|
||
return
|
||
|
||
updateList(n)
|
||
|
||
})
|
||
|
||
|
||
|
||
},
|
||
|
||
|
||
})
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
//数字长度补全（前面加0）
|
||
function numberFormat(num, len){
|
||
num += ''
|
||
if(num.length >= len)
|
||
return num
|
||
|
||
while(num.length < len)
|
||
num = '0' + num
|
||
return num
|
||
}
|
||
|
||
|
||
|
||
return av
|
||
|
||
|
||
|
||
|
||
|
||
}) |
JavaScript
95.2%
CSS
4.8%