Skip to content

Commit 13695db

Browse files
betty11111122222betty11111122222
authored
832303306 - work2 (#102)
1 parent 3969b42 commit 13695db

File tree

3 files changed

+324
-0
lines changed

3 files changed

+324
-0
lines changed

‎work2/betty11111122222/demo1.html‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
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+
function updateTime(){
69+
let el=document.getElementById('time');
70+
let time=new Date();
71+
time.toLocaleDateString();
72+
time.toLocaleTimeString();
73+
el.innerHTML=time.toLocaleDateString()+' '+time.toLocaleTimeString();
74+
};
75+
updateTime();
76+
let intervalId=setInterval(updateTime,1000);
77+
let blueBox=document.getElementById('blue');
78+
blueBox.addEventListener('mousemove', function() {
79+
let bottom=blueBox.getBoundingClientRect().bottom;
80+
let left=blueBox.getBoundingClientRect().left;
81+
let right=blueBox.getBoundingClientRect().right;
82+
let top=blueBox.getBoundingClientRect().top;
83+
let width=right-left;
84+
let height=bottom-top;
85+
let scale=1.2;
86+
blueBox.style.transform='scale('+scale+')';
87+
blueBox.style.width=width*scale+'px'
88+
clearInterval(intervalId);
89+
});
90+
blueBox.addEventListener('mouseout', function() {
91+
blueBox.style.width='46%';
92+
blueBox.style.transform='scale(1)';
93+
intervalId=setInterval(updateTime,1000);
94+
});
95+
let buttonToBeClicked=document.getElementById('btn');
96+
let ele=document.getElementById('pauseTime');
97+
function pauseTime(){
98+
let time=new Date();
99+
time.toLocaleDateString();
100+
time.toLocaleTimeString();
101+
ele.innerHTML=time.toLocaleDateString()+' '+time.toLocaleTimeString();
102+
}
103+
function repeatTime(){
104+
if(ele.innerHTML==''){
105+
pauseTime();
106+
}else{
107+
ele.innerHTML='';
108+
}
109+
}
110+
buttonToBeClicked.addEventListener('click',repeatTime);
111+
112+
</script>
113+
</body>
114+
</html>

‎work2/betty11111122222/demo2.html‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
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+
let el = document.getElementById('octopus');
64+
let ul= document.getElementById('octopus-sort');
65+
let button=document.getElementById('sort-btn');
66+
const controller = new AbortController();
67+
function remove() {
68+
el.lastElementChild.remove();
69+
70+
// [请在此处填写代码]
71+
}
72+
remove();
73+
74+
/*
75+
* 读取 id 为 octopus 的列表，获取其中章鱼名字和体重
76+
* 返回一个 JSON 数组，格式见函数中示例
77+
*/
78+
function getWeight() {
79+
let data=[];
80+
let lilist=el.children;
81+
for(let i=0;i<lilist.length;i++){
82+
data.push(
83+
{
84+
name:lilist[i].children[0].innerHTML,
85+
weight:parseFloat(lilist[i].children[1].innerHTML)
86+
}
87+
)
88+
}
89+
return data;
90+
}
91+
92+
/** 按章鱼重量，对 data 进行从小到大的排序，返回排序后的数组 */
93+
function getSortedOctopus(a) {
94+
let max=0,index=0;
95+
for(let i=0;i<a.length;i++){
96+
max=a[i].weight;
97+
for(let j=0;j<a.length-i;j++){
98+
if(a[j].weight>max){
99+
max=a[j].weight;
100+
index=j;
101+
}
102+
}
103+
let temp=a[a.length-1-i];
104+
a[a.length-1-i]=a[index];
105+
a[index]=temp;
106+
}
107+
return a;
108+
}
109+
110+
/** 将排好序的章鱼朋友输出显示到 id 为 octopus-sort 的列表中，格式见 ul 中注释 */
111+
function render(data) {
112+
for(let i=0;i<data.length;i++){
113+
let li=document.createElement('li');
114+
li.innerHTML='第'+(i+1)+'只章鱼：'+data[i].name+':'+data[i].weight+'kg';
115+
ul.appendChild(li);
116+
}
117+
el.innerHTML='';
118+
119+
// [请在此处填写代码]
120+
}
121+
122+
// 按钮点击事件处理函数
123+
function handleButtonClick() {
124+
let data=getWeight();
125+
let sorted=getSortedOctopus(data);
126+
render(sorted);
127+
// [请在此处填写代码]
128+
}
129+
button.addEventListener('click', handleButtonClick);
130+
131+
// 给 sort-btn 绑定一个点击事件，点击时触发 handleButton 函数
132+
// 触发后在浏览器上可以看到结果
133+
// [请在此处填写代码]
134+
</script>
135+
</body>
136+
</html>

‎work2/betty11111122222/demo3.html‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
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+
let box=document.getElementsByClassName("wra")[0];
49+
let position={x:box.offsetLeft,y:box.offsetTop};
50+
function popwindow(){
51+
var lang=["还没点到,别玩了","上次有人点到还是上次","点的到吗,菜就多练"];
52+
var index=Math.floor(Math.random()*lang.length);
53+
alert(lang[index]);
54+
}
55+
function update(){
56+
box.style.left=position.x+"px";
57+
box.style.top=position.y+"px";
58+
}
59+
function random(){
60+
position.x=Math.floor(Math.random()*1300);
61+
position.y=Math.floor(Math.random()*800);
62+
update();
63+
}
64+
document.addEventListener('mousemove',(event) => {
65+
let x=event.clientX;
66+
let y=event.clientY;
67+
if(Math.sqrt(Math.pow(x-position.x,2)+Math.pow(y-position.y,2))<120){
68+
random();
69+
}
70+
});
71+
setInterval(popwindow,10000);
72+
</script>
73+
</body>
74+
</html>

0 commit comments

Comments
 (0)