Skip to content

Commit 3969b42

Browse files
LunaY77LunaY77
authored
832303201 - work2 & work3 (#101)
1 parent 99f1e7d commit 3969b42

File tree

5 files changed

+510
-0
lines changed

5 files changed

+510
-0
lines changed

‎work2/Pale-illusions/demo1.html‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
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+
// 格式化
69+
const padZero = (num) => (num < 10 ? `0${num}` : num);
70+
// 时间更新函数
71+
const update = () => {
72+
let now = new Date();
73+
document.querySelector("#time").textContent =
74+
`${now.getFullYear()}/${padZero(now.getMonth() + 1)}/${padZero(now.getDate())} ${padZero(now.getHours())}:${padZero(now.getMinutes())}:${padZero(now.getSeconds())}`;
75+
}
76+
77+
// 设置定时器
78+
let timer = setInterval(update, 1000);
79+
80+
update();
81+
82+
const blueBox = document.querySelector("#blue");
83+
84+
// 鼠标移入蓝框
85+
blueBox.addEventListener('mouseenter', () => {
86+
// 清空定时器
87+
clearInterval(timer);
88+
// 放大
89+
blueBox.style.transform = 'scale(1.2)';
90+
});
91+
92+
// 鼠标移出蓝框
93+
blueBox.addEventListener('mouseleave', () => {
94+
// 立即重置时间，避免等待
95+
update();
96+
// 重置定时器
97+
timer = setInterval(update, 1000);
98+
// 恢复
99+
blueBox.style.transform = 'scale(1)';
100+
});
101+
102+
// 定格
103+
document.querySelector('#btn').addEventListener('click', () => {
104+
document.querySelector("#pauseTime").textContent = document.querySelector("#time").textContent;
105+
});
106+
107+
</script>
108+
</body>
109+
</html>

‎work2/Pale-illusions/demo2.html‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
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+
const remove = () => {
64+
const octopus = document.querySelector('#octopus');
65+
const childList = document.querySelectorAll('#octopus li');
66+
// 移除章鱼哥
67+
for (let i = 0; i < childList.length; i++) {
68+
if (childList[i].querySelector('.name').textContent === '章鱼哥') {
69+
octopus.removeChild(childList[i]);
70+
break;
71+
}
72+
}
73+
};
74+
75+
/*
76+
* 读取 id 为 octopus 的列表，获取其中章鱼名字和体重
77+
* 返回一个 JSON 数组，格式见函数中示例
78+
*/
79+
const getWeight = () => {
80+
const data = [];
81+
const list = document.querySelectorAll("#octopus li");
82+
list.forEach(o => {
83+
data.push({
84+
name: o.querySelector(".name").textContent,
85+
weight: parseFloat(o.querySelector('.weight').textContent)
86+
});
87+
})
88+
const ul = document.querySelector("#octopus");
89+
ul.remove();
90+
return data;
91+
};
92+
93+
94+
/** 按章鱼重量，对 data 进行从小到大的排序，返回排序后的数组 */
95+
const getSortedOctopus = (data) => {
96+
data.sort((a, b) => a.weight - b.weight);
97+
return data;
98+
};
99+
100+
/** 将排好序的章鱼朋友输出显示到 id 为 octopus-sort 的列表中，格式见 ul 中注释 */
101+
const render = (data) => {
102+
const sortList = document.querySelector('#octopus-sort');
103+
sortList.innerHTML = '';
104+
const chineseNum = ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十"];
105+
data.forEach((o, i) => {
106+
const li = document.createElement('li');
107+
li.textContent = `第${chineseNum[i]}只章鱼: ${o.name}: ${o.weight}`;
108+
sortList.appendChild(li);
109+
})
110+
};
111+
112+
// 按钮点击事件处理函数
113+
const handleButtonClick = () => {
114+
remove();
115+
let data = getWeight();
116+
data = getSortedOctopus(data);
117+
render(data);
118+
};
119+
120+
// 给 sort-btn 绑定一个点击事件，点击时触发 handleButton 函数
121+
// 触发后在浏览器上可以看到结果
122+
document.querySelector('#sort-btn').addEventListener('click', handleButtonClick);
123+
</script>
124+
</body>
125+
</html>

‎work2/Pale-illusions/demo3.html‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
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">
41+
<h3>你觉得你点的到我吗</h3>
42+
<button class="yes">能</button>
43+
<button class="no">不能</button>
44+
</div>
45+
</div>
46+
47+
<script>
48+
const app = document.querySelector("#app");
49+
const wra = document.querySelector(".wra");
50+
let count = 0;
51+
52+
// 随机坐标生成
53+
const getRandomPosition = (element) => {
54+
const windowWidth = window.innerWidth;
55+
const windowHeight = window.innerHeight;
56+
const elementWidth = element.offsetWidth;
57+
const elementHeight = element.offsetHeight;
58+
59+
const randomX = Math.random() * (windowWidth - elementWidth);
60+
const randomY = Math.random() * (windowHeight - elementHeight);
61+
62+
return { x: randomX, y: randomY };
63+
};
64+
65+
// 鼠标移入事件处理
66+
const onMouseOver = () => {
67+
count++;
68+
69+
if (count === 5) {
70+
alert("杂鱼杂鱼～～～");
71+
} else if (count >= 7) {
72+
app.removeEventListener("mouseover", onMouseOver);
73+
} else {
74+
const { x, y } = getRandomPosition(wra);
75+
wra.style.left = `${x}px`;
76+
wra.style.top = `${y}px`;
77+
}
78+
};
79+
80+
// 重置游戏
81+
const resetGame = (message) => {
82+
alert(message);
83+
count = 0;
84+
app.addEventListener("mouseover", onMouseOver);
85+
};
86+
87+
// 事件绑定
88+
document.querySelector('.yes').addEventListener("click", () => {
89+
resetGame('欧尼酱这么久才抓到我，真是杂鱼呢，噗噗噗～～～');
90+
});
91+
92+
document.querySelector('.no').addEventListener("click", () => {
93+
resetGame('欧尼酱这都抓不到我，红豆泥杂鱼～～～');
94+
});
95+
96+
// 启动事件监听
97+
app.addEventListener("mouseover", onMouseOver);
98+
</script>
99+
</body>
100+
</html>

0 commit comments

Comments
 (0)