Skip to content

Commit e2a7bbd

Browse files
jackfruedjackfrued
committed
'更新了爬虫部分的代码'
1 parent 02918d5 commit e2a7bbd

34 files changed

+1084
-77
lines changed

‎Day21-30/code/web1804/.project

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<projectDescription>
3+
<name>web1804</name>
4+
<comment>Create By HBuilder</comment>
5+
<projects>
6+
</projects>
7+
<buildSpec>
8+
<buildCommand>
9+
<name>com.aptana.ide.core.unifiedBuilder</name>
10+
<arguments>
11+
</arguments>
12+
</buildCommand>
13+
</buildSpec>
14+
<natures>
15+
<nature>com.aptana.projects.webnature</nature>
16+
</natures>
17+
<filteredResources>
18+
<filter>
19+
<id>1531706375771</id>
20+
<name></name>
21+
<type>10</type>
22+
<matcher>
23+
<id>org.eclipse.ui.ide.orFilterMatcher</id>
24+
<arguments>
25+
<matcher>
26+
<id>org.eclipse.ui.ide.multiFilter</id>
27+
<arguments>1.0-projectRelativePath-matches-false-false-bin</arguments>
28+
</matcher>
29+
<matcher>
30+
<id>org.eclipse.ui.ide.multiFilter</id>
31+
<arguments>1.0-projectRelativePath-matches-false-false-setting</arguments>
32+
</matcher>
33+
</arguments>
34+
</matcher>
35+
</filter>
36+
</filteredResources>
37+
</projectDescription>

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

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title></title>
6+
</head>
7+
<body>
8+
<script>
9+
/*
10+
var sum = 0;
11+
for (var i = 1; i <= 100; i += 1) {
12+
sum += i;
13+
}
14+
window.alert(sum);
15+
*/
16+
/*
17+
var sum = 0;
18+
var i = 1;
19+
while (i <= 100) {
20+
sum += i;
21+
i += 1;
22+
}
23+
window.alert(sum);
24+
*/
25+
var sum = 0;
26+
var i = 1;
27+
do {
28+
sum += i;
29+
i += 1;
30+
} while (i <= 100);
31+
window.alert(sum);
32+
</script>
33+
</body>
34+
</html>

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

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title></title>
6+
<style>
7+
.right {
8+
float: right;
9+
width: 250px;
10+
height: 30px;
11+
font-size: 16px;
12+
line-height: 30px;
13+
background-color: blue;
14+
color: yellow;
15+
text-align: center;
16+
}
17+
</style>
18+
</head>
19+
<body>
20+
<div id="time" class="right"></div>
21+
<script>
22+
function showDateTime() {
23+
var array = ["日", "一", "二", "三", "四", "五", "六"];
24+
var date = new Date();
25+
var str = "";
26+
str += date.getFullYear() + "年"; // 年
27+
str += (date.getMonth() + 1) + "月"; // 月(0-11)
28+
str += date.getDate() + "日&nbsp;&nbsp;"; // 日
29+
str += "星期" + array[date.getDay()] + "&nbsp;&nbsp;"; // 星期(0-6)
30+
var hour = date.getHours();
31+
str += hour < 10 ? "0" + hour : hour; // 时
32+
str += ":";
33+
var min = date.getMinutes();
34+
str += min < 10 ? "0" + min : min; // 分
35+
str += ":";
36+
var sec = date.getSeconds();
37+
str += sec < 10 ? "0" + sec : sec; // 秒
38+
// JavaScript = ECMAScript + BOM(window) + DOM(document)
39+
// document对象(DOM)代表整个HTML页面
40+
// 通过该对象的getElementById方法可以用ID来获取指定的元素(标签)
41+
// 通过获得的元素的textContent属性就可以修改标签体的文本内容
42+
var div = document.getElementById("time");
43+
// 如果放入元素中的内容又包含了标签或实体替换符(字符实体)
44+
// 那么就要将textContent属性换成innerHTML才能渲染标签和字符实体
45+
div.innerHTML = str;
46+
}
47+
showDateTime();
48+
// window对象(BOM)代表浏览器窗口
49+
// 通过该对象的setInterval方法可以设置计时器控制函数周期性执行
50+
setInterval(showDateTime, 1000);
51+
</script>
52+
</body>
53+
</html>

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

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title></title>
6+
</head>
7+
<body>
8+
<script>
9+
do {
10+
var answer = parseInt(Math.random() * 100 + 1);
11+
var total = 0;
12+
do {
13+
total += 1;
14+
var thyAnswer = parseInt(prompt("请输入:"));
15+
if (thyAnswer > answer) {
16+
alert("小一点");
17+
} else if (thyAnswer < answer) {
18+
alert("大一点");
19+
} else if (thyAnswer == answer) {
20+
alert("恭喜你猜对了");
21+
} else {
22+
alert("你是猴子派来的逗比吗?");
23+
}
24+
} while (thyAnswer != answer);
25+
if (total > 7) {
26+
alert("智商捉急!!!");
27+
}
28+
} while (confirm('再来一局?'));
29+
</script>
30+
</body>
31+
</html>

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

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
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+
+function() {
11+
var counter = 5;
12+
var span = document.getElementById("counter");
13+
setTimeout(function() {
14+
counter -= 1;
15+
if (counter > 0) {
16+
span.textContent = counter;
17+
setTimeout(arguments.callee, 1000);
18+
} else {
19+
location.href = "http://www.baidu.com";
20+
}
21+
}, 1000);
22+
}();
23+
</script>
24+
</body>
25+
</html>

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

+87
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
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+
#adv {
12+
width: 940px;
13+
margin: 0 auto;
14+
}
15+
#adv ul {
16+
width: 120px;
17+
height: 30px;
18+
margin: 0 auto;
19+
position: relative;
20+
top: -30px;
21+
}
22+
#adv li {
23+
width: 30px;
24+
height: 30px;
25+
list-style: none;
26+
float: left;
27+
color: #ccc;
28+
cursor: pointer;
29+
}
30+
</style>
31+
</head>
32+
<body>
33+
<div id="adv">
34+
<img id="image" src="img/slide-1.jpg" alt="">
35+
<ul>
36+
<li class="dot">●</li>
37+
<li class="dot">●</li>
38+
<li class="dot">●</li>
39+
<li class="dot">●</li>
40+
</ul>
41+
</div>
42+
<script src="js/common.js"></script>
43+
<script>
44+
(function() {
45+
var index = 1;
46+
var img = document.getElementById("image");
47+
var timerId = 0;
48+
49+
function startTimer() {
50+
if (timerId == 0) {
51+
timerId = setInterval(function() {
52+
index += 1;
53+
if (index > 4) {
54+
index = 1;
55+
}
56+
img.src = "img/slide-" + index + ".jpg";
57+
}, 2000);
58+
}
59+
}
60+
61+
startTimer();
62+
// 通过document对象获取页面上的元素(标签)有以下方法:
63+
// 1. document.getElementById("...")
64+
// 2. document.getElementsByTagName("...")
65+
// 3. document.getElementsByClassName("...")
66+
// 4. document.getElementsByName("...")
67+
// 5. document.querySelector("...")
68+
// 6. document.querySelectorAll("...")
69+
var liList = document.querySelectorAll("#adv .dot");
70+
for (var i = 0; i < liList.length; i += 1) {
71+
liList[i].index = i + 1;
72+
bind(liList[i], "click", function(evt) {
73+
evt = evt || event;
74+
var target = evt.target || evt.srcElement;
75+
index = target.index;
76+
img.src = "img/slide-" + index + ".jpg";
77+
clearInterval(timerId);
78+
timerId = 0;
79+
});
80+
bind(liList[i], "mouseout", function(evt) {
81+
startTimer();
82+
});
83+
}
84+
})();
85+
</script>
86+
</body>
87+
</html>

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

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title></title>
6+
</head>
7+
<body>
8+
<button id="ok">确定</button>
9+
<!--如果希望点击按钮时会执行对应的操作-->
10+
<!--那么需要通过JavaScript为按钮绑定事件回调函数-->
11+
<!--绑定事件回调函数大致有3种方式: -->
12+
<!--1. 通过标签的onXXX属性来指定需要执行的事件回调函数-->
13+
<!--2. 通过元素的onXXX属性来绑定需要执行的事件回调函数-->
14+
<!--3. 通过元素的addEventListener方法来绑定事件回调函数-->
15+
<script>
16+
var btn = document.getElementById("ok");
17+
function sayHello() {
18+
alert("大家好!");
19+
}
20+
function sayGoodbye() {
21+
alert("再见!");
22+
}
23+
// Netscape Navigator --> Firefox
24+
// Internet Explorer
25+
// Chrome
26+
// Safari
27+
// Opera
28+
if (btn.addEventListener) {
29+
btn.addEventListener("click", sayHello);
30+
btn.addEventListener("click", sayGoodbye);
31+
btn.addEventListener("click", function() {
32+
btn.removeEventListener("click", sayGoodbye);
33+
});
34+
} else {
35+
btn.attachEvent("onclick", sayHello);
36+
btn.attachEvent("onclick", sayGoodbye);
37+
btn.attachEvent("onclick", function() {
38+
btn.detachEvent("onclick", sayGoodbye);
39+
});
40+
}
41+
</script>
42+
</body>
43+
</html>

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

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
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+
margin: 10px 20px;
13+
}
14+
#container li {
15+
float: left;
16+
list-style: none;
17+
width: 60px;
18+
height: 60px;
19+
}
20+
</style>
21+
</head>
22+
<body>
23+
<div id="container">
24+
<img src="img/hello.jpg" alt="">
25+
<ul>
26+
<li><img src="img/thumb-1.jpg" alt=""></li>
27+
<li><img src="img/thumb-2.jpg" alt=""></li>
28+
<li><img src="img/thumb-3.jpg" alt=""></li>
29+
</ul>
30+
</div>
31+
<script src="js/common.js"></script>
32+
<script>
33+
+function() {
34+
// 通过querySelector用父子选择器获取img标签
35+
var img = document.querySelector('#container>img');
36+
37+
function showPhoto(evt) {
38+
evt = evt || window.event;
39+
// 获取事件源(谁引发了事件)
40+
var target = evt.target || evt.srcElement;
41+
img.src = "img/" + target.parentNode.photoName;
42+
}
43+
44+
var imgNames = ["hello.jpg", "goodbye.jpg", "oneshit.jpg"];
45+
// 通过querySelectorAll用后代选择器获取指定的li标签
46+
// var ul = document.querySelector("#container>ul");
47+
// 通过元素获取相关节点的属性:
48+
// parentNode - 获取父节点
49+
// children - 获取所有子节点
50+
// nextSibling - 获取相邻下一个兄弟节点
51+
// previousSibling - 获取相邻上一个兄弟节点
52+
var ul = img.nextSibling.nextSibling;
53+
console.log(ul);
54+
for (var i = 0; i < ul.children.length; i += 1) {
55+
ul.children[i].photoName = imgNames[i];
56+
bind(ul.children[i], "mouseover", showPhoto);
57+
}
58+
}();
59+
</script>
60+
</body>
61+
</html>

0 commit comments

Comments
 (0)