Skip to content

Commit 55fcc2a

Browse files
baihuirongbaihuirong
committed
2018.11.28learning notes
1 parent 9318dd0 commit 55fcc2a

File tree

126 files changed

+4987
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

126 files changed

+4987
-0
lines changed

‎JS运动/Math.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Document</title>
8+
<script>
9+
alert(Math.ceil(3.5)); //向上取整
10+
alert(Math.floor(4.5)); //向下取整
11+
</script>
12+
</head>
13+
<body>
14+
15+
</body>
16+
</html>

‎JS运动/分享到.html

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Document</title>
8+
<style>
9+
#div1{
10+
width:150px;
11+
height: 200px;
12+
background: green;
13+
position: absolute;
14+
left:-150px;
15+
}
16+
#div1 span{
17+
position: absolute;
18+
width:20px;
19+
height: 60px;
20+
line-height: 20px;
21+
background:yellow;
22+
right:-20px;
23+
top:70px;
24+
}
25+
</style>
26+
<script>
27+
window.onload=function()
28+
{
29+
var oDiv=document.getElementById('div1');
30+
31+
oDiv.onmouseover=function()
32+
{
33+
startMove();
34+
35+
};
36+
};
37+
38+
var timer=null;
39+
function startMove()
40+
{
41+
var oDiv=document.getElementById('div1');
42+
43+
clearInterval(timer);
44+
timer=setInterval(function(){
45+
if(oDiv.offsetLeft==0)
46+
{
47+
clearInterval(timer);
48+
}
49+
else{
50+
oDiv.style.left=oDiv.offsetLeft+10+'px';
51+
}
52+
},30)
53+
}
54+
</script>
55+
</head>
56+
<body>
57+
<div id="div1">
58+
<span>分享到</span>
59+
</div>
60+
</body>
61+
</html>

‎JS运动/分享到2.html

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Document</title>
8+
<style>
9+
#div1{
10+
width:150px;
11+
height: 200px;
12+
background: green;
13+
position: absolute;
14+
left:-150px;
15+
}
16+
#div1 span{
17+
position: absolute;
18+
width:20px;
19+
height: 60px;
20+
line-height: 20px;
21+
background:yellow;
22+
right:-20px;
23+
top:70px;
24+
}
25+
</style>
26+
<script>
27+
window.onload=function()
28+
{
29+
var oDiv=document.getElementById('div1');
30+
31+
oDiv.onmouseover=function()
32+
{
33+
startMove();
34+
35+
};
36+
oDiv.onmouseout=function()
37+
{
38+
startMove2();
39+
}
40+
};
41+
42+
var timer=null;
43+
function startMove()
44+
{
45+
var oDiv=document.getElementById('div1');
46+
47+
clearInterval(timer);
48+
timer=setInterval(function(){
49+
if(oDiv.offsetLeft==0)
50+
{
51+
clearInterval(timer);
52+
}
53+
else{
54+
oDiv.style.left=oDiv.offsetLeft+10+'px';
55+
}
56+
},30)
57+
}
58+
function startMove2()
59+
{
60+
var oDiv=document.getElementById('div1');
61+
62+
clearInterval(timer);
63+
timer=setInterval(function(){
64+
if(oDiv.offsetLeft==-150)
65+
{
66+
clearInterval(timer);
67+
}
68+
else{
69+
oDiv.style.left=oDiv.offsetLeft-10+'px';
70+
}
71+
},30)
72+
}
73+
</script>
74+
</head>
75+
<body>
76+
<div id="div1">
77+
<span>分享到</span>
78+
</div>
79+
</body>
80+
</html>

‎JS运动/分享到3.html

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Document</title>
8+
<style>
9+
#div1{
10+
width:150px;
11+
height: 200px;
12+
background: green;
13+
position: absolute;
14+
left:-150px;
15+
}
16+
#div1 span{
17+
position: absolute;
18+
width:20px;
19+
height: 60px;
20+
line-height: 20px;
21+
background:yellow;
22+
right:-20px;
23+
top:70px;
24+
}
25+
</style>
26+
<script>
27+
window.onload=function()
28+
{
29+
var oDiv=document.getElementById('div1');
30+
31+
oDiv.onmouseover=function()
32+
{
33+
startMove(0);
34+
35+
};
36+
oDiv.onmouseout=function()
37+
{
38+
startMove(-150);
39+
}
40+
};
41+
42+
var timer=null;
43+
function startMove(iTarget)
44+
{
45+
var oDiv=document.getElementById('div1');
46+
47+
clearInterval(timer);
48+
timer=setInterval(function(){
49+
var speed=0;
50+
51+
if(oDiv.offsetLeft>iTarget)
52+
{
53+
speed=-10;
54+
}
55+
else{
56+
speed=10;
57+
}
58+
59+
60+
if(oDiv.offsetLeft==iTarget)
61+
{
62+
clearInterval(timer);
63+
}
64+
else{
65+
oDiv.style.left=oDiv.offsetLeft+speed+'px';
66+
}
67+
},30)
68+
}
69+
70+
</script>
71+
</head>
72+
<body>
73+
<div id="div1">
74+
<span>分享到</span>
75+
</div>
76+
</body>
77+
</html>

‎JS运动/匀速运动停止.html

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Document</title>
8+
<style>
9+
#div1{
10+
width:100px;
11+
height:100px;
12+
background: red;
13+
position:absolute;
14+
left:600px;
15+
top:50px;
16+
}
17+
#div2{
18+
width: 1px;
19+
height:300px;
20+
position: absolute;
21+
left:300px;
22+
background: black;
23+
}
24+
#div3{
25+
width: 1px;
26+
height:300px;
27+
position: absolute;
28+
left:100px;
29+
background: black;
30+
}
31+
</style>
32+
<script>
33+
var timer=null;
34+
35+
function startMove(iTarget)
36+
{
37+
var oDiv=document.getElementById('div1');
38+
39+
clearInterval(timer);
40+
timer=setInterval(function(){
41+
var speed=0;
42+
43+
if(oDiv.offsetLeft<iTarget)
44+
{
45+
speed=7;
46+
}
47+
else{
48+
speed=-7;
49+
}
50+
51+
if(Math.abs(iTarget-oDiv.offsetLeft)<=7)//距离小于速度就是到达目标了
52+
{
53+
clearInterval(timer);
54+
55+
56+
}
57+
else{
58+
oDiv.style.left=oDiv.offsetLeft+speed+'px';
59+
60+
}
61+
62+
},30);
63+
}
64+
</script>
65+
</head>
66+
<body>
67+
<input type="button" value="到100" onclick="startMove(100)" />
68+
<input type="button" value="到300" onclick="startMove(300)" />
69+
<div id="div1"></div>
70+
<div id="div2"></div>
71+
<div id="div3"></div>
72+
</body>
73+
</body>
74+
</html>

‎JS运动/右侧悬浮框.html

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Document</title>
8+
<style>
9+
#div1{
10+
width:100px;
11+
height:150px;
12+
background:red;
13+
position: absolute;
14+
right:0;
15+
bottom:0;
16+
}
17+
</style>
18+
<script>
19+
window.onscroll=function()
20+
{
21+
var oDiv=document.getElementById('div1');
22+
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
23+
24+
//oDiv.style.top=document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop+'px';
25+
startMove(document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop+'px');
26+
};
27+
28+
var timer=null;
29+
30+
function startMove(iTarget)
31+
{
32+
var oDiv=document.getElementById('div1');
33+
34+
clearInterval(timer);
35+
timer=setInterval(function(){
36+
var speed=(iTarget-oDiv.offsetTop)/6;
37+
speed=speed>0?Math.ceil(speed):Math.floor(speed);
38+
39+
if(oDiv.offsetTop==iTarget)
40+
{
41+
clearInterval(timer);
42+
}
43+
else{
44+
oDiv.style.top=oDiv.offsetTop+speed+'px';
45+
}
46+
},30);
47+
}
48+
</script>
49+
</head>
50+
<body style="height:2000px">
51+
<div id="div1"></div>
52+
</body>
53+
</html>

0 commit comments

Comments
 (0)