Skip to content

Commit 99f1e7d

Browse files
ChenhahahageaChenhahahagea
authored
832304201 - work2 & work3 (#100)
1 parent 5304ab4 commit 99f1e7d

File tree

5 files changed

+516
-0
lines changed

5 files changed

+516
-0
lines changed

‎work2/Chenhahahagea/demo1.html‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
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+
<title>阿笠博士的新发明</title>
7+
8+
<style>
9+
body {
10+
padding-left: 10vw;
11+
}
12+
.question {
13+
margin-top: 30px;
14+
font-size: 22px;
15+
}
16+
17+
.box {
18+
margin-top: 64px;
19+
width: 60%;
20+
height: 200px;
21+
font-size: 24px;
22+
display: flex;
23+
justify-content: space-between;
24+
}
25+
#blue {
26+
width: 46%;
27+
text-align: center;
28+
line-height: 200px;
29+
border: 2px solid #21a4f1;
30+
}
31+
#red {
32+
width: 46%;
33+
text-align: center;
34+
line-height: 200px;
35+
border: 2px solid #fc4b5a;
36+
}
37+
</style>
38+
</head>
39+
40+
<body>
41+
<div class="question">
42+
<p>柯南的手表坏了，最近阿笠博士刚好设计了一款新型时钟（下方蓝框）。</p>
43+
<p>
44+
蓝框显示当前日期，当鼠标移入蓝框时，有放大效果且时间暂停；鼠标移出后时间继续更新。
45+
</p>
46+
<p>点击定格按钮，红框内显示定格的时间。</p>
47+
</div>
48+
<div class="box">
49+
<div id="blue">
50+
<span id="time"></span>
51+
</div>
52+
<div id="red">
53+
<span id="pauseTime"></span>
54+
</div>
55+
</div>
56+
<button id="btn" style="font-size: 24px; margin-top: 48px">定格</button>
57+
58+
<!-- 以上代码不可修改 -->
59+
60+
<!--
61+
要求在下列代码中实现：
62+
1. 页面上的时间每秒更新一次。
63+
2. 鼠标移入 #blue 的时候 暂停时间的更新，并且有边框放大效果。
64+
3. 鼠标移出 #blue 的时候 继续时间的更新，CSS 样式还原。
65+
4. 点击定格按钮，#red 里面显示点击时候的时间。
66+
-->
67+
<script>
68+
var changeTime = null;
69+
// 更新时间
70+
function update() {
71+
var time = new Date();
72+
document.getElementById("time").innerHTML = time.toLocaleString();
73+
}
74+
changeTime = setInterval(update, 1000);
75+
update();
76+
var blue = document.getElementById("blue");
77+
// 鼠标悬停
78+
blue.addEventListener(
79+
"mouseover",
80+
function () {
81+
blue.style.transform = "scale(1.2)";
82+
clearInterval(changeTime);
83+
},
84+
false
85+
);
86+
// 鼠标离开
87+
blue.addEventListener(
88+
"mouseout",
89+
function () {
90+
blue.style.transform = "scale(1)";
91+
changeTime = setInterval(update, 1000);
92+
},
93+
false
94+
);
95+
// 点击暂停
96+
var btn = document.getElementById("btn");
97+
btn.addEventListener(
98+
"click",
99+
function reset() {
100+
var now = new Date();
101+
document.getElementById("pauseTime").innerHTML = now.toLocaleString();
102+
},
103+
false
104+
);
105+
</script>
106+
</body>
107+
</html>

‎work2/Chenhahahagea/demo2.html‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>海绵宝宝抓章鱼</title>
6+
</head>
7+
<style>
8+
* {
9+
font-size: 30px;
10+
}
11+
</style>
12+
<body>
13+
<p>
14+
海绵宝宝很爱抓章鱼，可爱的学长（出题人）把章鱼哥也混在里面了，尽管他也是章鱼，但是不能抓到他。
15+
</p>
16+
<p>
17+
现在我们要将章鱼哥先从这些章鱼中分离出来（即把这个节点从
18+
<code>&lt;ul&gt;</code> 里面去掉），之后再抓章鱼。
19+
</p>
20+
<p>
21+
海绵宝宝抓章鱼喜欢先从重量小的开始抓，请帮助可爱的海绵宝宝和可爱的学长
22+
</p>
23+
24+
<ul id="octopus">
25+
<li>
26+
<span class="name">章鱼一号</span><span class="weight">30.4kg</span>
27+
</li>
28+
<li>
29+
<span class="name">章鱼二号</span><span class="weight">24.2kg</span>
30+
</li>
31+
<li>
32+
<span class="name">章鱼三号</span><span class="weight">250.3kg</span>
33+
</li>
34+
<li>
35+
<span class="name">章鱼四号</span><span class="weight">300.9kg</span>
36+
</li>
37+
<li>
38+
<span class="name">章鱼五号</span><span class="weight">120.0kg</span>
39+
</li>
40+
<li>
41+
<span class="name">章鱼六号</span><span class="weight">27.5kg</span>
42+
</li>
43+
<li>
44+
<span class="name">章鱼七号</span><span class="weight">35.4kg</span>
45+
</li>
46+
<li>
47+
<span class="name">章鱼哥</span><span class="weight">25.5kg</span>
48+
</li>
49+
</ul>
50+
51+
<ul id="octopus-sort">
52+
<!--
53+
<li>第一只章鱼：章鱼六号：27.5kg</li>
54+
-->
55+
</ul>
56+
57+
<button id="sort-btn">排序</button>
58+
59+
<!-- 不可以修改上述代码内容，只能在 script 标签内填写代码 -->
60+
61+
<script>
62+
/** 把章鱼哥节点从 ul 列表中删除 */
63+
function remove() {
64+
var octopus = document.getElementById("octopus");
65+
var liElements = octopus.getElementsByTagName("li");
66+
for (var i = 0; i < liElements.length; i++) {
67+
var nameSpan = liElements[i].querySelector("span.name");
68+
if (nameSpan.textContent === "章鱼哥") {
69+
octopus.removeChild(liElements[i]);
70+
break; // 找到后就可以退出循环
71+
}
72+
}
73+
// [请在此处填写代码]
74+
}
75+
76+
/*
77+
* 读取 id 为 octopus 的列表，获取其中章鱼名字和体重
78+
* 返回一个 JSON 数组，格式见函数中示例
79+
*/
80+
function getWeight() {
81+
var data = [];
82+
var octopusList = document
83+
.getElementById("octopus")
84+
.getElementsByTagName("li");
85+
for (var i = 0; i < octopusList.length; i++) {
86+
var name = octopusList[i].querySelector("span.name").textContent;
87+
var weight = parseFloat(
88+
octopusList[i]
89+
.querySelector("span.weight")
90+
.textContent.replace("kg", "")
91+
);
92+
data.push({ name: name, weight: weight });
93+
}
94+
return data;
95+
/*
96+
data = [
97+
{
98+
"name": "章鱼一号",
99+
"weight": 30.4
100+
},
101+
{
102+
"name": "章鱼二号",
103+
"weight": 24.2
104+
},
105+
]
106+
*/
107+
}
108+
109+
/** 按章鱼重量，对 data 进行从小到大的排序，返回排序后的数组 */
110+
function getSortedOctopus(data) {
111+
return data.sort(function (a, b) {
112+
return a.weight - b.weight;
113+
});
114+
}
115+
116+
/** 将排好序的章鱼朋友输出显示到 id 为 octopus-sort 的列表中，格式见 ul 中注释 */
117+
function render(data) {
118+
var octopusSortList = document.getElementById("octopus-sort");
119+
octopus.innerHTML = "";
120+
data.forEach(function (item, index) {
121+
var li = document.createElement("li");
122+
li.textContent =
123+
"第" +
124+
(index + 1) +
125+
"只章鱼：" +
126+
item.name +
127+
"：" +
128+
item.weight +
129+
"kg";
130+
octopusSortList.appendChild(li);
131+
});
132+
// [请在此处填写代码]
133+
}
134+
135+
// 按钮点击事件处理函数
136+
function handleButtonClick() {
137+
remove();
138+
var data = getWeight();
139+
var sortedData = getSortedOctopus(data);
140+
render(sortedData);
141+
// [请在此处填写代码]
142+
}
143+
document
144+
.getElementById("sort-btn")
145+
.addEventListener("click", handleButtonClick);
146+
// 给 sort-btn 绑定一个点击事件，点击时触发 handleButton 函数
147+
// 触发后在浏览器上可以看到结果
148+
// [请在此处填写代码]
149+
</script>
150+
</body>
151+
</html>

‎work2/Chenhahahagea/demo3.html‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
8+
<title>Document</title>
9+
<style>
10+
button {
11+
text-decoration: none;
12+
background: #2f435e;
13+
color: #f2f2f2;
14+
15+
padding: 10px 30px 10px 30px;
16+
font-size: 16px;
17+
font-family: 微软雅黑, 宋体, Arial, Helvetica, Verdana, sans-serif;
18+
font-weight: bold;
19+
border-radius: 3px;
20+
21+
-webkit-transition: all linear 0.3s;
22+
-moz-transition: all linear 0.3s;
23+
transition: all linear 0.3s;
24+
}
25+
26+
.wra {
27+
background-color: gray;
28+
width: 190px;
29+
text-align: center;
30+
height: 120px;
31+
position: absolute;
32+
left: 50%;
33+
top: 50%;
34+
transform: translate(-50%, -50%);
35+
}
36+
</style>
37+
</head>
38+
<body>
39+
<div id="app">
40+
<div class="wra" id="wra">
41+
<h3>你觉得你点的到我吗</h3>
42+
<button class="yes" id="yes">能</button>
43+
<button class="no" id="no">不能</button>
44+
</div>
45+
</div>
46+
47+
<script>
48+
var count = 0;
49+
function over() {
50+
const newX = Math.random() * (window.innerWidth - wra.offsetWidth);
51+
const newY = Math.random() * (window.innerHeight - wra.offsetHeight);
52+
count++;
53+
console.log(count);
54+
if (count == 9) {
55+
app.removeEventListener("mouseover", over);
56+
}
57+
if (count == 7) {
58+
alert("还没有点到啊！别玩了");
59+
} else {
60+
wra.style.left = newX + "px";
61+
wra.style.top = newY + "px";
62+
}
63+
}
64+
var app = document.getElementById("app");
65+
app.addEventListener("mouseover", over);
66+
67+
function can() {
68+
alert("这么久才点到啊，好菜啊!!!");
69+
}
70+
var canBtn = document.getElementById("yes");
71+
canBtn.addEventListener("click", function () {
72+
alert("这么久才点到啊，好菜啊!!!");
73+
count = 0;
74+
app.addEventListener("mouseover", over);
75+
});
76+
function canNot() {
77+
alert("这都点不到！！没实力哈！");
78+
count = 0;
79+
app.addEventListener("mouseover", over);
80+
}
81+
var canNotBtn = document.getElementById("no");
82+
canNotBtn.addEventListener("click", canNot);
83+
</script>
84+
</body>
85+
</html>

0 commit comments

Comments
 (0)