判断页面刷新和关闭方法
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>刷新和关闭页面测试</title>
</head>
<body>
<script>
{
var pageLoadFlag = 0;
window.onbeforeunload = function (event) {
setTimeout(function () {
var txt = "你刷新了页面"
if (pageLoadFlag) {
txt = "你关闭了页面";
}
localStorage.setItem('test', txt);
})
}
window.addEventListener('unload', function () {
pageLoadFlag++
})
}
</script>
</body>
</html>
|
10 进制和 2 进制互相转换
1
2
3
|
var toTwoNumber=(35).toString(2)
var toTenNumber=parseInt(twoNumber,2)
|
获取页面window监听的事件名称
放在所有代码开头
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
|
((w)=>{
w.listenerList=new Set()
const _cache=w.addEventListener
const handler={
apply:(target,thisBinding,args)=>{
target()
listenerList.add(args[0])
Reflect.apply(_cache,w,args)
}
}
w.addEventListener=new Proxy(()=>{
console.log('现在绑定了一个事件，通过 window.listenerList 可查看所有已绑定事件')
},handler)
})(window)
window.addEventListener('resize',function(){
console.log('窗口正在发生变化')
})
for(const eventname of listenerList){
console.log(eventname)
}
|
JS防抖与节流
防抖：上个请求未结束，下个请求就发出，可能会造成其它影响，因此需要防抖。
节流：防止一个请求在短时间内多次请求，如100ms请求了10次，浪费流量，因此需要节流。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
let timer=null
function throttling(){
clearTimeout(timer)
timer=setTimeout(function(){
},300)
}
let flag=null
function (){
if(flag){
return;
}
flag=true;
$.get('/api',function(){
flag=false;
},function(){
flag=false;
})
}
|
arguments数组转为参数
1
2
3
4
5
6
7
| function a(a1,a2){
console.log(a1,a2)
}
function b(){
a.apply(null,arguments)
}
b(1,2,3,4,5,6)
|
合并 JSON
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
| var a={a:{b:{c:1}},b:2,c:3},b={a:{e:2},b:{}};
var util={
type:{
Object:'[object Object]',
Undefined:'[object Undefined]'
},
judge:function(d,t){return Object.prototype.toString.call(d)===this.type[t]},
isUndefined:function(d){return this.judge(d,'Undefined')},
isObject:function(d){return this.judge(d,'Object')},
isArray:function(d){return Array.isArray(d)},
mergeJson:function(oa,ob){
if(!util.isObject(oa)||!util.isObject(ob)){
return ob
}
for(var i in oa){
if(util.isUndefined(ob[i])){
ob[i]=oa[i]
}
if(util.isObject(oa[i]) && util.isObject(ob[i])){
util.mergeJson(oa[i],ob[i])
}
if(util.isArray(oa[i])&&util.isArray(ob[i])){
ob[i].concat(oa[i])
}
}
return ob;
}
}
const merge=util.mergeJson;
const result=merge(a,b)
|
英文引号转中文引号
1
2
3
4
5
6
7
8
| var strArr=str.split('"'),newStr='',flag=true;
while(titleArr.length){
newStr+=titleArr.shift();
if(titleArr.length){
newStr+=["“","”"][+(falg=!flag)]
}
}
console.log(newStr);
|
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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
|
<style>
*{padding: 0;margin:0;}
ul,li{list-style: none;}
#outer{
height: 260px;
overflow: hidden;
position: relative;
margin: auto;
}
#inner{
width: 500%;
height:100%;
position: absolute;
left:0;
top:0;
}
#inner div{
width: 20%;
height: 100%;
float: left;
}
ul{
width: 320px;
height:50px;
margin:5px auto;
}
li{
width: 16%;
height: 100%;
margin: 0 2%;
background-color: brown;
font-size: 30px;
font-weight: bold;
line-height: 50px;
text-align: center;
color: white;
float: left;
cursor: pointer;
}
h2{
text-align: center;
padding:5px 0;
}
</style>
<div id="outer">
<div id="inner">
<div style="background-color: antiquewhite;">1</div>
<div style="background-color: aquamarine;">2</div>
<div style="background-color: cornsilk;">3</div>
<div style="background-color: tomato;">4</div>
<div style="background-color: yellowgreen;">5</div>
</div>
</div>
<h2>减速运动</h2>
<ul id="btn1"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
<h2>匀速运动</h2>
<ul id="btn2"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
<script>
var oLis1=document.getElementById("btn1").getElementsByTagName("li");
var oLis2=document.getElementById("btn2").getElementsByTagName("li");
var oDiv=document.getElementById("outer");
var oInner=document.getElementById("inner");
var divWid=1;
var times=50;
var open=true;
function divWidth(){
var oDivWid=Math.round(oDiv.parentNode.clientWidth*divWid);
oDiv.style.width=oDivWid+"px";
}
divWidth();
window.onresize=function(){
divWidth();
}
for(var i=0;i<oLis1.length;i++){
oLis1.item(i).nIndex=i;
oLis1.item(i).onmouseover=function(){
buffer(oInner,this.nIndex);
}
}
function buffer(ele,i){
var target=i*-oDiv.clientWidth;
window.clearTimeout(ele.timer);
var nSpeed = (target-ele.offsetLeft)/times;
var nSpeed = nSpeed > 0 ? Math.ceil(nSpeed) : Math.floor(nSpeed);
var nSpeed=(ele.offsetLeft+nSpeed)/oDiv.clientWidth*100;
ele.style.left=nSpeed+"%";
if(ele.offsetLeft!=target){
ele.timer=window.setTimeout(function(){buffer(ele,i);},0);
}
}
for(var i=0;i<oLis2.length;i++){
oLis2.item(i).nIndex=i;
oLis2.item(i).onmouseover=function(){
open=true
move(oInner,this.nIndex);
}
}
function move(ele,i) {
var target = -i * oDiv.clientWidth;
var nSpeed;
window.clearTimeout(ele.timer);
if(target < ele.offsetLeft){
nSpeed = ele.offsetLeft-oDiv.clientWidth/times;
if(nSpeed <= target){
open=false;
}
}else{
nSpeed = ele.offsetLeft+oDiv.clientWidth/times;
if(nSpeed >= target){
open=false;
}
}
nSpeed = (nSpeed/oDiv.clientWidth)*100;
ele.style.left=nSpeed+"%";
if(open==true){
ele.timer=window.setTimeout(function(){move(ele,i);},0);
}else{
ele.style.left=-i*100+"%";
}
}
</script>
|
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
| <div id="div1" style="{width: 100px;height: 100px;background: red;position: absolute;left:0;top:0;}"></div>
<script>
var oDiv = document.getElementById("div1");
function core(ele,attr,target){
attr=attr.toLowerCase();
var strOffset='offset'+attr.substr(0,1).toUpperCase()+attr.substring(1).toLowerCase();
var nSpeed = (target-ele[strOffset])/40;
nSpeed=nSpeed>0?Math.ceil(nSpeed):Math.floor(nSpeed);
ele.style[attr]=ele[strOffset]+nSpeed+"px";
return nSpeed;
}
function move(ele,obj){
window.clearTimeout(ele.timer);
var flag=0;
for(var attr in obj){
flag += core(ele,attr,obj[attr]);
}
if(flag){
ele.timer=window.setTimeout(function(){move(ele,obj);},0);
}
}
var obj={height:300,left:100,width:800,top:200};
oDiv.onclick=function(){move(this,obj);}
</script>
|
