Skip to content

Commit 77ea358

Browse files
jackfruedjackfrued
committed
更新了Web前端的代码
1 parent ccf412d commit 77ea358

Some content is hidden

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

68 files changed

+1809
-9
lines changed

‎Day21-30/classical_layout.html renamed to ‎Day21-30/code/demo01/classical_layout.html

File renamed without changes.

‎Day21-30/example.html renamed to ‎Day21-30/code/demo01/example.html

File renamed without changes.

‎Day21-30/form.html renamed to ‎Day21-30/code/demo01/form.html

File renamed without changes.

‎Day21-30/form_and_table.html renamed to ‎Day21-30/code/demo01/form_and_table.html

File renamed without changes.

‎Day21-30/img/Thumbs.db renamed to ‎Day21-30/code/demo01/img/Thumbs.db

File renamed without changes.

‎Day21-30/img/a1.jpg renamed to ‎Day21-30/code/demo01/img/a1.jpg

File renamed without changes.

‎Day21-30/img/a2.jpg renamed to ‎Day21-30/code/demo01/img/a2.jpg

File renamed without changes.

‎Day21-30/img/a3.jpg renamed to ‎Day21-30/code/demo01/img/a3.jpg

File renamed without changes.

‎Day21-30/jquery3.html renamed to ‎Day21-30/code/demo01/jquery3.html

File renamed without changes.

‎Day21-30/js/jquery.min.js renamed to ‎Day21-30/code/demo01/js/jquery.min.js

File renamed without changes.

‎Day21-30/qq_link.html renamed to ‎Day21-30/code/demo01/qq_link.html

File renamed without changes.

‎Day21-30/code/demo02/css/jquery-ui.min.css

+7
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Day21-30/code/demo02/example01.html

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title></title>
6+
</head>
7+
<body>
8+
<h3><span id="counter">5</span>秒以后自动跳转到百度</h3>
9+
<script>
10+
var span = document.getElementById('counter');
11+
var num = 5;
12+
setTimeout(function() {
13+
num -= 1;
14+
if (num > 0) {
15+
span.textContent = num;
16+
setTimeout(arguments.callee, 1000);
17+
} else {
18+
location.href = 'http://www.baidu.com';
19+
}
20+
}, 1000);
21+
</script>
22+
</body>
23+
</html>

‎Day21-30/code/demo02/example02.html

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title></title>
6+
</head>
7+
<body>
8+
<script>
9+
10+
+function(n) {
11+
for (var i = 0; i < n; i += 1) {
12+
alert('OK');
13+
}
14+
}(3);
15+
16+
17+
// n! = n * (n - 1)!
18+
19+
function f(n) {
20+
if (n == 0 || n == 1)
21+
return 1;
22+
return n * arguments.callee(n - 1);
23+
}
24+
25+
alert(f(5));
26+
27+
function foo() {
28+
alert(arguments.callee);
29+
alert(arguments.callee.caller);
30+
return arguments[0] + arguments[1];
31+
}
32+
33+
alert(foo(1, 2));
34+
35+
</script>
36+
</body>
37+
</html>

‎Day21-30/code/demo02/example03.html

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title></title>
6+
<style>
7+
#timer {
8+
float: right;
9+
}
10+
</style>
11+
</head>
12+
<body>
13+
<div id="timer"></div>
14+
<script>
15+
var weekdays = ['日', '一', '二', '三', '四', '五', '六'];
16+
var div = document.getElementById('timer');
17+
setInterval(function() {
18+
var date = new Date();
19+
var year = date.getFullYear();
20+
var month = date.getMonth() + 1;
21+
var day = date.getDate();
22+
var hour = date.getHours();
23+
var minute = date.getMinutes();
24+
var second = date.getSeconds();
25+
var weekday = weekdays[date.getDay()];
26+
var fullStr = year + '年' +
27+
(month < 10 ? '0' + month : month) + '月' +
28+
(day < 10 ? '0' + day : day) + '日&nbsp;&nbsp;' +
29+
(hour < 10 ? '0' + hour : hour) + ':' +
30+
(minute < 10 ? '0' + minute : minute) + ':' +
31+
(second < 10 ? '0' + second : second) + '&nbsp;&nbsp;' +
32+
'星期' + weekday;
33+
div.innerHTML = fullStr;
34+
}, 1000);
35+
</script>
36+
</body>
37+
</html>

‎Day21-30/code/demo02/example04.html

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title></title>
6+
<style>
7+
* {
8+
margin: 0;
9+
padding: 0;
10+
}
11+
#container {
12+
width: 940px;
13+
height: 430px;
14+
margin: 0 auto;
15+
}
16+
</style>
17+
</head>
18+
<body>
19+
<!-- 绑定事件除了用标签属性之外还有哪些更好的做法 -->
20+
<div id="container" onmouseover="stopChange()" onmouseout="resumeChange()">
21+
<img id="adv" src="img/slide-1.jpg">
22+
</div>
23+
<script>
24+
// 除了getElementById还有哪些获取元素的方法
25+
// - getElementsByTagName()
26+
// - getElementsByClassName()
27+
// - querySelector()
28+
// - querySelectorAll()
29+
var img = document.getElementById('adv');
30+
var currentIndex = 0;
31+
var timerId = 0;
32+
33+
resumeChange();
34+
35+
function stopChange() {
36+
window.clearInterval(timerId);
37+
}
38+
39+
function resumeChange() {
40+
timerId = setInterval(function() {
41+
currentIndex += 1;
42+
currentIndex %= 4;
43+
img.src = 'img/slide-' + (currentIndex + 1) + '.jpg';
44+
}, 3000);
45+
}
46+
</script>
47+
</body>
48+
</html>

‎Day21-30/code/demo02/example05.html

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title></title>
6+
</head>
7+
<body>
8+
<button onclick="foo()">确定</button>
9+
<script>
10+
function foo() {
11+
alert('Hello, world!');
12+
}
13+
</script>
14+
</body>
15+
</html>

‎Day21-30/code/demo02/example06.html

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title></title>
6+
</head>
7+
<body>
8+
<h1 id="message">Hello, world!</h1>
9+
<button id="btn">0</button>
10+
<script>
11+
var counter = 0;
12+
var btn = document.getElementById('btn');
13+
var h1 = document.getElementById('message');
14+
function f1() {
15+
alert('按钮被点击了!');
16+
if (btn.removeEventListener) {
17+
btn.removeEventListener('click', f1);
18+
} else {
19+
btn.detachEvent('onclick', f1);
20+
}
21+
}
22+
function f2() {
23+
counter += 1;
24+
btn.textContent = counter;
25+
}
26+
function f3() {
27+
h1.textContent = 'Goodbye, world!';
28+
}
29+
if (btn.addEventListener) {
30+
btn.addEventListener('click', f1);
31+
btn.addEventListener('click', f2);
32+
btn.addEventListener('click', f3);
33+
} else {
34+
// 低版本IE浏览器
35+
btn.attachEvent('onclick', f1);
36+
btn.attachEvent('onclick', f2);
37+
btn.attachEvent('onclick', f3);
38+
}
39+
</script>
40+
</body>
41+
</html>

‎Day21-30/code/demo02/example07.html

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title></title>
6+
<style>
7+
#one {
8+
width: 400px;
9+
height: 400px;
10+
background-color: red;
11+
}
12+
#two {
13+
width: 300px;
14+
height: 300px;
15+
background-color: green;
16+
}
17+
#three {
18+
width: 200px;
19+
height: 200px;
20+
background-color: blue;
21+
}
22+
#two, #three {
23+
position: relative;
24+
left: 50px;
25+
top: 50px;
26+
}
27+
</style>
28+
</head>
29+
<body>
30+
<div id="one">
31+
<div id="two">
32+
<div id="three"></div>
33+
</div>
34+
</div>
35+
<script>
36+
(function() {
37+
function f1(evt) {
38+
alert('I am one');
39+
}
40+
41+
function f2() {
42+
alert('I am two');
43+
}
44+
45+
function f3(evt) {
46+
alert('I am three');
47+
evt = evt || window.event;
48+
// 阻止事件传播行为(冒泡或捕获)
49+
if (evt.stopPropagation) {
50+
evt.stopPropagation();
51+
} else {
52+
evt.cancelBubble = true;
53+
}
54+
}
55+
// 要么是全局作用域 要么是函数级作用域
56+
// 事件捕获 - 从外层向内层传递事件的过程
57+
// 事件冒泡 - 从内层向外层传递事件的过程(默认)
58+
// 内嵌的元素在响应事件之后会继续将事件传递到它的父元素
59+
var fs = [f1, f2, f3];
60+
var ids = ['one', 'two', 'three'];
61+
for (var i = 0; i < ids.length; i += 1) {
62+
var div = document.getElementById(ids[i]);
63+
if (div.addEventListener) {
64+
// 如果需要使用事件捕获可以传入第三个参数并赋值为true
65+
div.addEventListener('click', fs[i]);
66+
} else {
67+
div.attachEvent('onclick', fs[i]);
68+
}
69+
}
70+
})();
71+
</script>
72+
</body>
73+
</html>

‎Day21-30/code/demo02/example08.html

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title></title>
6+
</head>
7+
<body>
8+
<a name="foo" href="http://www.baidu.com">百度一下</a>
9+
<script>
10+
var aList = document.getElementsByName('foo');
11+
aList[0].addEventListener('click', function(evt) {
12+
evt = evt || window.event;
13+
if (!confirm('真的要去百度吗?')) {
14+
// 阻止事件的默认行为
15+
if (evt.preventDefault) {
16+
evt.preventDefault();
17+
} else {
18+
evt.returnValue = false;
19+
}
20+
}
21+
});
22+
</script>
23+
</body>
24+
</html>

‎Day21-30/code/demo02/example09.html

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title></title>
6+
</head>
7+
<body>
8+
<div id="page">
9+
<h1 id="header">List</h1>
10+
<h2>Buy groceries</h2>
11+
<ul>
12+
<li id="one" class="hot"><em>fresh</em>&nbsp;<em>figs</em></li>
13+
<li id="two" class="hot">pine nuts</li>
14+
<li id="three" class="hot">honey</li>
15+
<li id="four">balsamic vinegar</li>
16+
</ul>
17+
<script src="js/list.js"></script>
18+
</div>
19+
<script>
20+
var elems = document.querySelectorAll('#page .hot');
21+
for (var i = 0; i < elems.length; i += 1) {
22+
alert(elems[i].textContent);
23+
}
24+
var em = document.querySelector('#one>em');
25+
alert(em.textContent);
26+
27+
</script>
28+
</body>
29+
</html>

‎Day21-30/code/demo02/example10.html

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title></title>
6+
</head>
7+
<body>
8+
<form action="" method="post">
9+
<label>你的爱好:&nbsp;</label>
10+
<input type="checkbox" name="fav">旅游
11+
<input type="checkbox" name="fav">游戏
12+
<input type="checkbox" name="fav">美食
13+
<input type="checkbox" name="fav">阅读
14+
<input type="checkbox" name="fav">睡觉
15+
<input type="checkbox" name="fav">其他
16+
<a href="javascript:void(0);">全选</a>
17+
<a href="javascript:void(0);">取消</a>
18+
<a href="javascript:void(0);">反选</a>
19+
</form>
20+
<script>
21+
(function() {
22+
var allAnchors = document.querySelectorAll('form a');
23+
var favList = document.querySelectorAll('input[name=fav]');
24+
allAnchors[0].addEventListener('click', function() {
25+
for (var i = 0; i < favList.length; i += 1) {
26+
// favList[i].setAttribute('checked', '');
27+
favList[i].checked = true;
28+
}
29+
});
30+
allAnchors[1].addEventListener('click', function() {
31+
for (var i = 0; i < favList.length; i += 1) {
32+
// favList[i].removeAttribute('checked');
33+
favList[i].checked = false;
34+
}
35+
});
36+
allAnchors[2].addEventListener('click', function() {
37+
for (var i = 0; i < favList.length; i += 1) {
38+
favList[i].checked = !favList[i].checked;
39+
}
40+
});
41+
})();
42+
</script>
43+
</body>
44+
</html>

0 commit comments

Comments
 (0)