-
Notifications
You must be signed in to change notification settings - Fork 26
/
区块停留计数跨浏览器实现.html
132 lines (127 loc) · 4.24 KB
/
区块停留计数跨浏览器实现.html
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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset=utf-8>
<title>timeCounter</title>
</head>
<style>
.mod-spm[data-spmid='123']{
width: 100px;
height: 100px;
margin-right: auto;
margin-left: auto;
margin-bottom: 20px;
background-color: #fff;
border: 2px #000 solid;
}
.mod-spm[data-spmid='456']{
width: 100px;
height: 100px;
margin-right: auto;
margin-left: auto;
margin-bottom: 20px;
background-color: #fff;
border: 2px #000 solid;
}
.mod-spm[data-spmid='789']{
width: 100px;
height: 100px;
margin-right: auto;
margin-left: auto;
margin-bottom: 20px;
background-color: #fff;
border: 2px #000 solid;
}
</style>
<body>
<div class="mod-spm" data-spmid="123">
<div class="child_a"></div>
<div class="child_b"></div>
<div class="child_c"></div>
<div class="child_d"></div>
</div>
<div class="mod-spm" data-spmid="456">
<div class="child_a"></div>
<div class="child_b"></div>
<div class="child_c"></div>
<div class="child_d"></div>
</div>
<div class="mod-spm" data-spmid="789">
<div class="child_a"></div>
<div class="child_b"></div>
<div class="child_c"></div>
<div class="child_d"></div>
</div>
<script type="text/javascript">
var counter = 0,
counter1 = 0,
counter2 = 0,
counter3 = 0;
var timer = null;
function timerCounter(div,counter,num){
addEvent(div,'mouseenter',function(){
timer = setInterval(count,1000);
});
addEvent(div,'mouseleave',function(){
clearInterval(timer);
//这里设置null是很有必要的，为了重复计数
timer = null;
});
var span = document.createElement('span');
div.appendChild(span);
function count(){
counter++;
span.innerHTML = 'STAY：'+counter;
console.log('区块'+num+'上停留的时间为：'+counter);
}
return counter;
}
//跨浏览器的事件处理函数
var addEvent = function( obj, type, fn ) {
if (obj.addEventListener)
obj.addEventListener( type, fn, false );
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj.attachEvent( "on"+type, function() {
obj["e"+type+fn]();
} );
}
};
//解决getElementsByClassName在低版本ie中不支持的问题
var getElementsByClassName = function(searchClass,node,tag) {
if(document.getElementsByClassName){
return document.getElementsByClassName(searchClass)
}else{
node = node || document;
tag = tag || '*';
var returnElements = []
var els = (tag === "*" && node.all)? node.all : node.getElementsByTagName(tag);
var i = els.length;
searchClass = searchClass.replace(/\-/g, "\\-");
var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
while(--i >= 0){
if (pattern.test(els[i].className) ) {
returnElements.push(els[i]);
}
}
return returnElements;
}
}
var div = getElementsByClassName('mod-spm');
var block1 = num(div[0]);
var block2 = num(div[1]);
var block3 = num(div[2]);
timerCounter(div[0],counter1,block1);
timerCounter(div[1],counter2,block2);
timerCounter(div[2],counter3,block3);
//解决data-*的兼容性问题
function num(div){
if(div.dataset){
return div.dataset['spmid'];
}else{
return div.getAttribute('data-spmid');
}
}
</script>
</body>
</html>