Skip to content

Commit 07454a8

Browse files
baihuirongbaihuirong
committed
2018.12.3 notes
1 parent 55fcc2a commit 07454a8

File tree

355 files changed

+1426
-8583
lines changed

Some content is hidden

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

355 files changed

+1426
-8583
lines changed

‎JS事件/document.html

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
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+
window.onload=function()
10+
{
11+
alert(document.childNodes[1].tagName);
12+
13+
};
14+
</script>
15+
</head>
16+
<body>
17+
18+
</body>
19+
</html>

‎JS事件/keycode.html

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
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+
document.onkeydown=function()
10+
{
11+
alert(event.keyCode);
12+
}
13+
</script>
14+
</head>
15+
<body>
16+
17+
</body>
18+
</html>

‎JS事件/一串跟着鼠标的div.html

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
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+
div{
10+
width:20px;
11+
height:20px;
12+
background: red;
13+
position:absolute;
14+
}
15+
</style>
16+
<script>
17+
function getPos()
18+
{
19+
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
20+
var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
21+
22+
return {x:event.clientX+scrollLeft,y:event.clientY+scrollTop};
23+
24+
};
25+
document.onmousemove=function()
26+
{
27+
var aDiv=document.getElementsByTagName('div');
28+
var pos=getPos();
29+
30+
for(var i=aDiv.length-1;i>0;i--)
31+
{
32+
aDiv[i].style.left=aDiv[i-1].offsetLeft+'px';
33+
aDiv[i].style.top=aDiv[i-1].offsetTop+'px';
34+
}
35+
36+
aDiv[0].style.left=pos.x+'px';
37+
aDiv[0].style.top=pos.y+'px';
38+
39+
};
40+
</script>
41+
</head>
42+
<body>
43+
<div></div>
44+
<div></div>
45+
<div></div>
46+
<div></div>
47+
<div></div>
48+
<div></div>
49+
<div></div>
50+
<div></div>
51+
<div></div>
52+
<div></div>
53+
<div></div>
54+
<div></div>
55+
<div></div>
56+
<div></div>
57+
<div></div>
58+
<div></div>
59+
<div></div>
60+
<div></div>
61+
<div></div>
62+
<div></div>
63+
64+
</body>
65+
</html>

‎JS事件/事件冒泡.html

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en" onclick="alert('html');">
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+
div{
10+
padding: 100px;
11+
}
12+
</style>
13+
</head>
14+
<body onclick="alert('body');">
15+
<div style="background:#ccc;" onclick="alert(this.style.background);">
16+
<div style="background:green;"onclick="alert(this.style.background);">
17+
<div style="background:red;"onclick="alert(this.style.background);">
18+
19+
</div>
20+
</div>
21+
</div>
22+
</body>
23+
</html>

‎JS事件/仿select下拉框.html

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
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:400px;
11+
height: 300px;
12+
background: #ccc;
13+
display: none;
14+
}
15+
</style>
16+
<script>
17+
window.onload=function(ev)
18+
{
19+
20+
var oBtn=document.getElementById('btn1');
21+
var oDiv=document.getElementById('div1');
22+
oBtn.onclick=function()
23+
{
24+
oDiv.style.display='block';
25+
26+
event.cancelBubble=true;
27+
};
28+
document.onclick=function(){
29+
oDiv.style.display='none';
30+
}
31+
};
32+
</script>
33+
</head>
34+
<body>
35+
<input id="btn1" type="button" value="显示"/>
36+
<div id="div1">
37+
</div>
38+
</body>
39+
</html>

‎JS事件/提交留言.html

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
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+
window.onload=function()
10+
{
11+
var oTxt1=document.getElementById('txt1');
12+
var oTxt2=document.getElementById('txt2');
13+
var oBtn=document.getElementById('btn1');
14+
15+
oBtn.onclick=function()
16+
{
17+
oTxt2.value+=oTxt1.value+'\n';
18+
oTxt1.value='';
19+
};
20+
}
21+
</script>
22+
</head>
23+
<body>
24+
<input id="txt1" type="text"/>
25+
<input id="btn1" type="button" value="发布"/><br>
26+
<textarea id="txt2" rows="10" cols="40"></textarea>
27+
</body>
28+
</html>

‎JS事件/提交留言2.html

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
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+
window.onload=function()
10+
{
11+
var oTxt1=document.getElementById('txt1');
12+
var oTxt2=document.getElementById('txt2');
13+
var oBtn=document.getElementById('btn1');
14+
15+
oBtn.onclick=function()
16+
{
17+
oTxt2.value+=oTxt1.value+'\n';
18+
oTxt1.value='';
19+
};
20+
oTxt1.onkeydown=function()
21+
{
22+
if(event.keyCode==13)
23+
{
24+
oTxt2.value+=oTxt1.value+'\n';
25+
oTxt1.value='';
26+
}
27+
}
28+
}
29+
</script>
30+
</head>
31+
<body>
32+
<input id="txt1" type="text"/>
33+
<input id="btn1" type="button" value="发布"/><br>
34+
<textarea id="txt2" rows="10" cols="40"></textarea>
35+
</body>
36+
</html>

‎JS事件/提交留言3.html

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
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+
window.onload=function()
10+
{
11+
var oTxt1=document.getElementById('txt1');
12+
var oTxt2=document.getElementById('txt2');
13+
var oBtn=document.getElementById('btn1');
14+
15+
oBtn.onclick=function()
16+
{
17+
oTxt2.value+=oTxt1.value+'\n';
18+
oTxt1.value='';
19+
};
20+
oTxt1.onkeydown=function()
21+
{
22+
if(event.keyCode==13&&event.ctrlKey)
23+
{
24+
oTxt2.value+=oTxt1.value+'\n';
25+
oTxt1.value='';
26+
}
27+
}
28+
}
29+
</script>
30+
</head>
31+
<body>
32+
<input id="txt1" type="text"/>
33+
<input id="btn1" type="button" value="发布"/><br>
34+
<textarea id="txt2" rows="10" cols="40"></textarea>
35+
</body>
36+
</html>

‎JS事件/点击.html

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
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+
window.onload=function()
10+
{
11+
document.onclick=function()
12+
{
13+
alert('a');
14+
}
15+
}
16+
</script>
17+
</head>
18+
<body>
19+
20+
</body>
21+
</html>

‎JS事件/点击坐标.html

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
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+
window.onload=function()
10+
{
11+
document.onclick=function()
12+
{
13+
//IE
14+
//alert(event.clientX+','+event.clientY);
15+
//ff
16+
//alert(ev.clientX+','+ev.clientY);
17+
18+
var oEvent=ev||event;
19+
20+
alert(oEvent.clientX+','+oEvent.clientY);
21+
}
22+
}
23+
</script>
24+
</head>
25+
<body>
26+
27+
</body>
28+
</html>

‎JS事件/键盘控制Div移动.html

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
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: #ccc;
13+
position: absolute;
14+
}
15+
</style>
16+
<script>
17+
document.onkeydown=function()
18+
{
19+
var oDiv=document.getElementById('div1');
20+
21+
if(event.keyCode==37)
22+
{
23+
oDiv.style.left=oDiv.offsetLeft-10+'px';
24+
}
25+
else if(event.keyCode==39)
26+
{
27+
oDiv.style.left=oDiv.offsetLeft+10+'px';
28+
}
29+
30+
};
31+
</script>
32+
</head>
33+
<body>
34+
<div id="div1"></div>
35+
</body>
36+
</html>

0 commit comments

Comments
 (0)