Skip to content

Commit 9e63076

Browse files
shiyi11-22shiyi11-22
authored
832304105 - work2 (#99)
1 parent 13695db commit 9e63076

File tree

7 files changed

+314
-0
lines changed

7 files changed

+314
-0
lines changed

‎work1/shiyi11-22/all.jpeg‎

51.6 KB
Loading

‎work1/shiyi11-22/haimianbaobao.jpeg‎

31.7 KB
Loading

‎work1/shiyi11-22/paidaxing.jpeg‎

25.1 KB
Loading

‎work1/shiyi11-22/zhangyuge.jpeg‎

42.9 KB
Loading

‎work2/shiyi11-22/demo1.html‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>阿笠博士的新发明</title>
8+
9+
<style>
10+
body {
11+
padding-left: 10vw;
12+
}
13+
14+
.question {
15+
margin-top: 30px;
16+
font-size: 22px;
17+
}
18+
19+
.box {
20+
margin-top: 64px;
21+
width: 60%;
22+
height: 200px;
23+
font-size: 24px;
24+
display: flex;
25+
justify-content: space-between;
26+
}
27+
28+
#blue {
29+
width: 46%;
30+
text-align: center;
31+
line-height: 200px;
32+
border: 2px solid #21a4f1;
33+
}
34+
35+
#red {
36+
width: 46%;
37+
text-align: center;
38+
line-height: 200px;
39+
border: 2px solid #fc4b5a;
40+
}
41+
</style>
42+
</head>
43+
44+
<body>
45+
<div class="question">
46+
<p>柯南的手表坏了，最近阿笠博士刚好设计了一款新型时钟（下方蓝框）。</p>
47+
<p>
48+
蓝框显示当前日期，当鼠标移入蓝框时，有放大效果且时间暂停；鼠标移出后时间继续更新。
49+
</p>
50+
<p>点击定格按钮，红框内显示定格的时间。</p>
51+
</div>
52+
<div class="box">
53+
<div id="blue">
54+
<span id="time"></span>
55+
</div>
56+
<div id="red">
57+
<span id="pauseTime"></span>
58+
</div>
59+
</div>
60+
<button id="btn" style="font-size: 24px; margin-top: 48px">定格</button>
61+
62+
<!-- 以上代码不可修改 -->
63+
64+
<!--
65+
要求在下列代码中实现：
66+
1. 页面上的时间每秒更新一次。
67+
2. 鼠标移入 #blue 的时候 暂停时间的更新，并且有边框放大效果。
68+
3. 鼠标移出 #blue 的时候 继续时间的更新，CSS 样式还原。
69+
4. 点击定格按钮，#red 里面显示点击时候的时间。
70+
-->
71+
<script>
72+
let intervalIdBlue; // 用于存储蓝色框计时器ID
73+
let pausedRed = false; // 用于标记时间是否暂停
74+
let pausedTime; // 用于存储暂停时的时间
75+
76+
// 格式化日期时间函数
77+
function fotmatDateTime(date) {
78+
const year = date.getFullYear();
79+
const month = (date.getMonth() + 1).toString().padStart(2, '0');
80+
const day = date.getDate().toString().padStart(2, '0');
81+
const hours = date.getHours().toString().padStart(2, '0');
82+
const minutes = date.getMinutes().toString().padStart(2, '0');
83+
const seconds = date.getSeconds().toString().padStart(2, '0');
84+
return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
85+
}
86+
87+
// 更新时间函数
88+
function updateTimeBlue() {
89+
const currentDate = new Date();
90+
const formattedDateTime = fotmatDateTime(currentDate);
91+
document.getElementById('time').textContent = formattedDateTime;
92+
}
93+
94+
function startTimerBlue() {
95+
updateTimeBlue(); // 第一次更新时间
96+
intervalIdBlue = setInterval(updateTimeBlue, 1000); // 每秒调用一次updateTimeBlue函数
97+
}
98+
99+
// 鼠标移入蓝色框时的行为
100+
function pauseTimerBlue() {
101+
clearInterval(intervalIdBlue); // 清除计时器
102+
}
103+
104+
// 紅框显示定格时间函数
105+
function updatePausedTimeRed() {
106+
const pauseTimeElement = document.getElementById('pauseTime');
107+
const currentDate = new Date();
108+
pauseTimeElement.textContent = fotmatDateTime(currentDate); // 设置定格时间文本
109+
}
110+
111+
// 鼠标移入蓝色框时的行为
112+
document.getElementById('blue').addEventListener('mouseenter', function () {
113+
this.style.transform = 'scale(1.1)'; // 放大蓝色框
114+
pauseTimerBlue(); // 暂停计时器
115+
});
116+
117+
// 鼠标移出蓝色框时的行为
118+
document.getElementById('blue').addEventListener('mouseleave', function () {
119+
this.style.transform = 'scale(1)'; // 还原蓝色框大小
120+
startTimerBlue(); // 恢复计时器
121+
});
122+
123+
// 点击定格按钮时的行为
124+
document.getElementById('btn').addEventListener('click', function () {
125+
updatePausedTimeRed(); // 更新定格时间
126+
});
127+
128+
// 页面加载完毕后开始计时器
129+
startTimerBlue();
130+
</script>
131+
</body>
132+
133+
</html>

‎work2/shiyi11-22/demo2.html‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<title>海绵宝宝抓章鱼</title>
7+
</head>
8+
<style>
9+
* {
10+
font-size: 30px;
11+
}
12+
</style>
13+
14+
<body>
15+
<p>海绵宝宝很爱抓章鱼，可爱的学长（出题人）把章鱼哥也混在里面了，尽管他也是章鱼，但是不能抓到他。</p>
16+
<p>现在我们要将章鱼哥先从这些章鱼中分离出来(即把这个节点从ul里面去掉),之后再抓章鱼。</p>
17+
<p>海绵宝宝抓章鱼喜欢先从重量小的开始抓，请帮助可爱的海绵宝宝和可爱的学长</p>
18+
19+
<ul id="octopus">
20+
<li>
21+
<span class="name">章鱼一号</span><span class="weight">30.4kg</span>
22+
</li>
23+
<li>
24+
<span class="name">章鱼二号</span><span class="weight">24.2kg</span>
25+
</li>
26+
<li>
27+
<span class="name">章鱼三号</span><span class="weight">250.3kg</span>
28+
</li>
29+
<li>
30+
<span class="name">章鱼四号</span><span class="weight">300.9kg</span>
31+
</li>
32+
<li>
33+
<span class="name">章鱼五号</span><span class="weight">120.0kg</span>
34+
</li>
35+
<li>
36+
<span class="name">章鱼六号</span><span class="weight">27.5kg</span>
37+
</li>
38+
<li>
39+
<span class="name">章鱼七号</span><span class="weight">35.4kg</span>
40+
</li>
41+
<li>
42+
<span class="name">章鱼哥</span><span class="weight">25.5kg</span>
43+
</li>
44+
</ul>
45+
46+
<ul id="octopus-sort">
47+
<!--
48+
<li>第一只章鱼：章鱼六号：27.5kg</li>
49+
-->
50+
</ul>
51+
52+
<button id="sort-btn">排序</button>
53+
54+
<!-- 不可以修改上述代码内容，只能在 script 标签内填写代码 -->
55+
56+
<script>
57+
function remove() {
58+
const octopusList = document.getElementById("octopus");
59+
const octopusBros = octopusList.querySelectorAll("li");
60+
octopusBros.forEach(li => {
61+
if (li.querySelector('.name').textContent === "章鱼哥") {
62+
octopusList.removeChild(li);
63+
}
64+
});
65+
}
66+
67+
function getWeight() {
68+
const octopusList = document.getElementById('octopus').children;
69+
const data = Array.from(octopusList).map(li => {
70+
const name = li.querySelector('.name').textContent;
71+
const weight = parseFloat(li.querySelector('.weight').textContent.replace('kg', ''));
72+
return { name, weight };
73+
});
74+
return data;
75+
}
76+
77+
function getSortedOctopus(data) {
78+
return data.sort((a, b) => a.weight - b.weight);
79+
}
80+
81+
function render(data) {
82+
const sortedList = document.getElementById('octopus-sort');
83+
sortedList.innerHTML = '';
84+
const chineseNum = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'];
85+
data.forEach((item, index) => {
86+
const li = document.createElement('li');
87+
const num = chineseNum[index];
88+
li.textContent = `第${num}只章鱼：${item.name}：${item.weight}kg`;
89+
sortedList.appendChild(li);
90+
});
91+
}
92+
93+
function handleButtonClick() {
94+
remove();
95+
const weights = getWeight();
96+
const sortedWeights = getSortedOctopus(weights);
97+
render(sortedWeights);
98+
}
99+
100+
const sortBtn = document.getElementById('sort-btn');
101+
sortBtn.addEventListener('click', handleButtonClick);
102+
</script>
103+
</body>
104+
105+
</html>

‎work2/shiyi11-22/demo3.html‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
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+
var count = 0;
49+
var w = document.querySelector('.wra');
50+
w.addEventListener('mouseenter', function() {
51+
// 当鼠标进入时，随机改变元素的left和top样式属性，使元素在页面上随机移
52+
w.style.left = Math.random() * 500 + 'px';
53+
w.style.top = Math.random() * 500 + 'px';
54+
count++;
55+
}
56+
)
57+
var a = document.querySelector('.yes');
58+
a.addEventListener('click', function() {
59+
// 当点击次数小于5次时，弹出提示并重置计数器
60+
if(count < 5){
61+
alert('上一次有人点到还是在上一次');
62+
count = 0;
63+
}
64+
// 当点击次数达到或超过5次时，弹出提示并重置计数器
65+
else{
66+
alert('这么多次才点到，真菜');
67+
count = 0;
68+
}
69+
});
70+
// 检查计数器是否超过5次，如果超过则弹出警告
71+
if(count > 5){
72+
alert('还没点到，别玩了');
73+
}
74+
</script>
75+
</body>
76+
</html>

0 commit comments

Comments
 (0)