forked from ZHOUYUANN/like
-
Notifications
You must be signed in to change notification settings - Fork 0
/
like.js
108 lines (99 loc) · 3.38 KB
/
like.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
(function (window) {
var Like = function (param) {
this.element = param.element
this.value = param.value
this.click = param.click
this.callback = param.callback || function() {}
this.init()
}
Like.prototype = {
init: function () {
if (!this.element) return
if (!this.value) return console.error('必须传入 value 值')
var valueStr = this.value.toString()
var valueArr = valueStr.split('')
var html = ''
for (var i = 0; i < valueArr.length; i++) {
html += '<div class="num"><span>' + valueArr[i] + '</span></div>'
}
this.element.querySelector('.count').innerHTML = html
this.click && this.addEvent(this.element, 'click', this.toggle.bind(this))
},
updateValue: function (newValue) {
var nums = this.element.querySelectorAll('.count .num');
var newValueStr = newValue.toString();
var oldValueStr = this.value.toString();
var oldValue = this.value;
if (oldValue !== newValue) {
var oldNum = oldValueStr.split('');
var newNum = newValueStr.split('');
var h = '', len = 0;
if (oldNum.length < newNum.length) {
oldNum.push('')
len = oldNum.length - 1
this.element.querySelector('.count').insertAdjacentHTML('beforeEnd', '<div class="num"><span></span></div>')
} else if (oldNum.length > newNum.length) {
newNum.push('')
len = newNum.length - 1
setTimeout(function () {
nums[nums.length - 1].remove()
}, 300)
} else {
len = oldNum.length - 1
}
// 保证所有的数字滚动
for (var i = len; i >= 0; i--) {
if (oldNum[i] !== newNum[i]) {
// 通过前后的数字判断是否是向上滚动还是向下滚动
if (oldValue < newValue) {
h = '<span class="upupin">' + oldNum[i] + '</span>' +
'<span class="upup">' + newNum[i] + '</span>'
} else {
h = '<span class="down">' + newNum[i] + '</span>' +
'<span class="downin">' + oldNum[i] + '</span>'
}
this.element.querySelectorAll('.count .num')[i].innerHTML = h
}
}
this.value = newValueStr
}
},
toggle: function(e) {
var elm = e.target
if (elm.classList.contains('heart')) {
if (elm.getAttribute('data-flag') === '0') {
elm.querySelector('.fa-heart-o').classList.remove('active')
elm.querySelector('.fa-heart').classList.add('active')
elm.setAttribute('data-flag', '1')
this.addNum()
} else {
elm.querySelector('.fa-heart-o').classList.add('active')
elm.querySelector('.fa-heart').classList.remove('active')
elm.setAttribute('data-flag', '0')
this.reduceNum()
}
this.callback(this.value)
}
},
addNum: function() {
var value = this.value
value++
this.updateValue(value)
},
reduceNum: function() {
var value = this.value
value--
this.updateValue(value)
},
addEvent: function (elm, type, fn) {
if (window.attachEvent) {
elm.attachEvent("on" + type, fn);
} else if (window.addEventListener) {
elm.addEventListener(type, fn, false);
} else {
elm["on" + type] = fn;
}
}
}
window.Like = Like
})(window)