24大数据技术10.22实验课作业

注意

必须在学习通下载对应资源
点击代码块，可使用方向键左右移动查看代码
注释部分不需要敲
有以前的代码的话,第一个页面可只敲script部分
提交注册后跳转到另一个页面的截图,并在注册时用户名改为自己的名字,这样截图是也可以正确显示

1.resi.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/semantic.min.css">
		<style>
			
			/* 1. 通配符选择器 * 
			   选择方法：通配符选择器，语法是 *，匹配页面上所有元素。
			   作用：给所有元素统一重置默认样式。
			*/
			* {
			    padding: 0;             /* 内边距：元素内容与边框的距离。设置为0，清除浏览器默认内边距 */
			    margin: 0;              /* 外边距：元素与外部元素的距离。设置为0，清除浏览器默认外边距 */
			    box-sizing: border-box; /* 盒模型计算方式：border-box表示padding和border包含在width/height内，方便统一布局 
				                         简单理解：如果你写了 width: 200px; padding: 10px; border: 2px;，那么元素总宽度仍然是200px，不会再额外增加。*/
			}
			/* 2. 类选择器 .bg
			   选择方法：类选择器，语法是 .类名，匹配 class="bg" 的元素。
			   作用：设置背景容器的绝对定位和占满全屏。
			*/
			.bg {
			    position: absolute; /* 绝对定位，使元素脱离文档流，意味着这个元素不会影响其他元素的布局，其他元素会像它不存在一样排布。可通过 left/top/right/bottom 控制位置 */
			    width: 100%;        /* 宽度100%，占满父元素 */
			    height: 100%;       /* 高度100%，占满父元素 */
			}
			
			/* 3. 标签选择器 video
			   选择方法：标签选择器，直接使用标签名匹配 <video> 元素。
			   作用：控制视频背景大小和位置。
			*/
			video {
			    position: absolute; /* 绝对定位，覆盖背景 */
			    width: 100%;        /* 宽度占满父容器 */
			    height: 100%;       /* 高度占满父容器 */
			    bottom: 0;          /* 底部对齐父容器底部 */
			    right: 0;           /* 右侧对齐父容器右边 */
			    z-index: -1;        /* 层叠顺序，置于最底层，不遮挡其他内容 */
			    object-fit: cover;  /* 视频按比例填充容器，多余部分裁剪，保证不变形 */
			}
			
			/* 4. 类选择器 .resi
			   选择方法：类选择器，匹配 class="resi" 的元素。
			   作用：注册框容器，设置位置、尺寸、背景和阴影效果。
			*/
			.resi {
			    position: absolute;                    /* 绝对定位，可放置在指定位置 */
			    width: 30%;                            /* 宽度占父容器30% */
			    height: 75% auto;                           /* 高度占父容器75% */
			    background-color: rgba(0, 0, 0, 0.3);  /* 半透明黑色背景 */
			    border-radius: 10%;                    /* 圆角，使视觉更柔和 */
			    left: 65%;                             /* 左边距65%，靠右显示 */
			    top: 12.5%;                            /* 上边距12.5%，垂直居中微调 */
			    padding: 20px;                         /* 内边距，内容不贴边 */
			}
			
			/* 5. 类选择器 .resi-title
			   选择方法：类选择器，匹配 class="resi-title" 的元素。
			   作用：注册框标题样式。
			*/
			.resi-title {
			    color: white;             /* 字体颜色白色 */
			    margin-bottom: 5px;       /* 下方间距5px，控制标题与下方内容间距 */
			    font-size: 2em;           /* 字体大小2倍基准大小 */
			    font-family: 'PixelFont'; /* 自定义像素字体 */
			    text-align: center;       /* 居中对齐文字 */
			}
			/* 6. 多重标签选择器 p, legend
			   选择方法：多重选择器，用逗号分隔，匹配 <p> 和 <legend> 元素。
			   作用：统一段落和 fieldset 标题样式。
			*/
			p, legend {
			    color: white;             /* 白色字体 */
			    margin-bottom: 15px;       /* 下边距6px，控制行间距 */
			    font-size: 1.5em;         /* 字体大小稍大 */
			    font-family: 'PixelFont'; /* 像素风字体 */
			    text-align: center;       /* 居中对齐 */
			}
			
			/* 7. 标签选择器 label
			   选择方法：标签选择器，匹配 <label> 元素。
			   作用：表单标签样式。
			*/
			label {
			    display: block;           /* 块级显示，让标签独占一行 */
			    color: white;             /* 白色字体 */
			    margin-bottom: 10px;       /* 下边距4px */
			    font-size: 1.2em;         /* 字体大小 */
			    font-family: 'PixelFont'; /* 像素风字体 */
			    text-align: left;         /* 左对齐文字 */
			}
			
			/* 8. 属性选择器 input[type="checkbox"]
			   选择方法：属性选择器，匹配 type="checkbox" 的 input 元素。
			   作用：调整复选框垂直对齐和间距。
			*/
			input[type="checkbox"] {
			    margin-top: 4px;        /* 上边距4px，微调位置 */
			}
			
			/* 9. 组合类选择器与属性选择器
			   选择方法：复合选择器，匹配 .ui.form 下特定类型的 input。
			   作用：设置输入框背景色和底部间距。
			*/
			.ui.form input[type="email"],
			.ui.form input[type="text"],
			.ui.form input[type="password"],
			.ui.form input[type="date"] {
			    background-color: #f0e8ff !important; /* 设置淡蓝色背景，!important 覆盖默认样式 */
			    margin-bottom: 6px;                   /* 每个输入框底部间距 */
			}
			
			/* 10. 属性选择器 input[list="software"]
			    选择方法：属性选择器，匹配具有 list="software" 属性的 input。
			    作用：设置 datalist 输入框背景颜色。
			*/
			input[list="software"] {
			    background-color: #f0e8ff !important; /* 淡蓝色背景 */
			}
			
			/* 11. 标签选择器 select
			    选择方法：标签选择器，匹配 <select> 元素。
			    作用：设置下拉框背景颜色。
			*/
			select {
			    background-color: #f0e8ff !important; /* 淡蓝色背景 */
			}
			/* 12. 类选择器 .form-group
			    选择方法：类选择器，匹配 class="form-group" 的元素。
			    作用：设置每组表单元素占满宽度。
			*/
			.form-group {
			    width: 100%; /* 占满父容器宽度 */
			}
			/* 13. 标签选择器 fieldset
			    选择方法：标签选择器，匹配 <fieldset> 元素。
			    作用：控制每个 fieldset 的内外间距。
			*/
			fieldset{
			    margin-bottom: 10px; /* 底部间距10px，fieldset之间有空隙 */
			    padding: 10px;       /* 内边距10px，内容不贴边 */
			}
			
			/* 14. 类选择器 .button-group
			    选择方法：类选择器，匹配 class="button-group" 的元素。
			    作用：按钮容器布局。
			*/
			.button-group {
			    display: flex;          /* 启用弹性布局，横向排列子元素 */
			    justify-content: center;/* 水平居中所有按钮 */
			    gap: 15px;              /* 按钮之间间距均等 */
			}
			footer {
			            position: absolute;
			            bottom: 10px;
			            width: 100%;
			            text-align: center;
			            color: white;
			            font-size: 14px;
			            font-family: Arial;
			        }
		</style>
		
	</head>
	<body>
		<div class="bg">
			<video autoplay loop muted>
				<source src="video/jett.mp4" type="video/mp4">
			</video>
			<div class="resi">
				<h1 class="resi-title">注册</h1>
				<form class="form-group ui form">
					<fieldset>
					    <legend>个人资料</legend>
						<div>
						    <label>电子邮箱：</label>
						    <input type="email" placeholder="电子邮箱">
						</div>
						<div>
						      <label>用户名：</label>
						      <input type="text" placeholder="用户名">
						</div>
						<div>
						    <label>密码：</label>
						    <input type="password" placeholder="密码">
						</div>
						<div>
						      <label>出生日期：</label>
						      <input type="date" placeholder="出生日期">
						</div>
						<div>
						    <p>兴趣爱好：
						      <input class="ui checkbox" type="checkbox" name="fans" value="01"/>唱歌
						      <input class="ui checkbox" type="checkbox" name="fans" value="02"/>打球
						      <input class="ui checkbox" type="checkbox" name="fans" value="03"/>下棋
						      <input class="ui checkbox" type="checkbox" name="fans" value="04"/>上网
						      <input class="ui checkbox" type="checkbox" name="fans" value="05"/>购物
							</p>
						</div>
						<p>性别：<input class="ui radio" type="radio" name="sex" value="男" checked />男
						       <input class="ui radio" type="radio" name="sex" value="女"/>女
						</p>
					</fieldset>
					<fieldset>
					    <legend>专业与课程</legend>
					    <label for="">课程名：</label><select name="course">
					        <option>软件工程</option>
					        <option>计算机应用</option>
					        <option selected>大数据技术</option>
					        <option>数据库应用基础</option>
					        <option>C语言</option>
					        <option>网页设计</option>
					    </select>
					    &nbsp;&nbsp;
						<label for="">工具软件：</label><input list="software">
					    <datalist id="software">
					        <option value="1">Kingsoft WPS</option>
					        <option value="2">MS Office</option>
					        <option value="3">Visio</option>
					        <option value="4">ToDesk</option>
					        <option value="5">腾讯会议</option>
					    </datalist>
					</fieldset>
					<div class="button-group">
					    <input class="ui yellow basic button" type="submit" value="提交"/> 
					    <input class="ui inverted yellow button" type="reset" value="重填"/>
					    <button class="ui inverted violet button" onclick=alert("用于执行客户端脚本。")>执行客户端脚本</button>
					</div>
					</form>
			</div>
		</div>
		<footer>
		        © 2025 |（改为你的名字）  
		</footer>
	</body>
	<script>
	function registerHandler() {
	  // 获取页面上第一个 <form> 元素
	  var form = document.querySelector("form");
	
	  // 给表单注册提交事件（当点击“提交”按钮时触发）
	  form.addEventListener("submit", function (event) {
	
	    // === 1. 获取表单中每个输入框的值 ===
	    // 下面这些 querySelector 语句是根据标签属性选取元素的。
	
	    // 邮箱输入框
	    var emailEl = document.querySelector('input[type="email"]');
	    var email = "";
	    if (emailEl) {
	      email = emailEl.value;
	    }
	
	    // 用户名输入框
	    var usernameEl = document.querySelector('input[type="text"]');
	    var username = "";
	    if (usernameEl) {
	      username = usernameEl.value;
	    }
	
	    // 密码输入框
	    var passwordEl = document.querySelector('input[type="password"]');
	    var password = "";
	    if (passwordEl) {
	      password = passwordEl.value;
	    }
	
	    // 出生日期输入框
	    var birthEl = document.querySelector('input[type="date"]');
	    var birth = "";
	    if (birthEl) {
	      birth = birthEl.value;
	    }
	
	    // === 2. 处理复选框（兴趣爱好） ===
	    // 用 querySelectorAll 找出所有选中的复选框，然后一个个取出 value。
	    var hobbyNodes = document.querySelectorAll('input[name="fans"]:checked');
	    var hobbies = [];
	    for (var i = 0; i < hobbyNodes.length; i++) {
	      hobbies.push(hobbyNodes[i].value);
	    }
	
	    // === 3. 处理单选框（性别） ===
	    // 单选框只能选择一个，因此只用 querySelector 找第一个选中的。
	    var sexNode = document.querySelector('input[name="sex"]:checked');
	    var sex = "";
	    if (sexNode) {
	      sex = sexNode.value;
	    }
	
	    // === 4. 获取下拉列表的选中项 ===
	    var courseNode = document.querySelector('select[name="course"]');
	    var course = "";
	    if (courseNode) {
	      course = courseNode.value;
	    }
	
	    // === 5. 获取输入建议框（datalist）的值 ===
	    var toolNode = document.querySelector('input[list="software"]');
	    var tool = "";
	    if (toolNode) {
	      tool = toolNode.value;
	    }
	
	    // === 6. 把所有数据整理成一个对象 ===
	    // 对象中的键名要和 profile.html 读取时保持一致。
	    var data = {
	      email: email,
	      username: username,
	      password: password,
	      birth: birth,
	      hobbies: hobbies,
	      sex: sex,
	      course: course,
	      tool: tool
	    };
	
	    // === 7. 把数据保存到 localStorage（或 sessionStorage） ===
	    // 这样在跳转到 profile.html 时，数据仍然可以被读取出来。
	    localStorage.setItem("regData", JSON.stringify(data));
	
	    // === 8. 设置表单跳转目标 ===
	    // 不阻止表单的默认跳转行为，只修改跳转地址。
	    form.action = "profile.html";
	
	    // 否则页面不会跳转。
	  });
	}
	
	// 调用函数，启用注册逻辑
	registerHandler();
	</script>

</html>

2.profile.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>个人空间</title>

  <!-- 引入 Semantic UI 样式 -->
  <link rel="stylesheet" href="css/semantic.min.css">

  <style>
    body {
      background: url("video/autumn.png") no-repeat center center; /* 背景图路径和位置 */
      background-size: cover; /* 保证图片完整显示，不被裁剪，不超过窗口 */
      background-color: #000; /* 图片之外区域用纯黑色填充 */
      color: #fff;
      font-family: "Helvetica Neue", Arial, sans-serif;
      padding: 32px;
    }

    .wrap {
      max-width: 760px;
      margin: 0 auto;
    }
    .card.custom {
      background: rgba(20,60,20,0.5);
      color: #fff;
      padding: 20px;
    }
    .field-row {
      margin: 10px 0;
      display: flex;
      align-items: flex-start;
    }
    .label {
      width: 140px;
      color: #bdbdbd;
      flex-shrink: 0;
    }
    .value {
      color: #fff;
      word-break: break-word;
      white-space: pre-wrap;
      flex: 1;
    }
    .actions {
      margin-top: 18px;
      display: flex;
      gap: 10px;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="ui centered card custom">
      <div class="content">
        <h2 class="ui header" style="color:#fff; text-align:center; margin:0 0 12px 0;">
          个人空间 — 注册信息展示
        </h2>

        <!-- 展示区 -->
        <div id="infoArea">
          <div class="field-row"><div class="label">电子邮箱：</div><div id="email" class="value">-</div></div>
          <div class="field-row"><div class="label">用户名：</div><div id="username" class="value">-</div></div>
          <div class="field-row"><div class="label">密码：</div><div id="password" class="value">-</div></div>
          <div class="field-row"><div class="label">出生日期：</div><div id="birth" class="value">-</div></div>
          <div class="field-row"><div class="label">性别：</div><div id="sex" class="value">-</div></div>
          <div class="field-row"><div class="label">兴趣爱好：</div><div id="hobbies" class="value">-</div></div>
          <div class="field-row"><div class="label">课程：</div><div id="course" class="value">-</div></div>
          <div class="field-row"><div class="label">工具软件：</div><div id="tool" class="value">-</div></div>
        </div>

        <!-- 操作按钮 -->
        <div class="actions">
          <a class="ui yellow button" href="resi.html">返回修改</a>
        </div>
      </div>
    </div>
  </div>

  <script>
    // ===== 读取本地存储的数据 =====
    // localStorage.getItem("regData") 取出注册页保存的字符串
    var raw = localStorage.getItem("regData");

    // 定义一个小函数：往指定id的标签写入文字
    function setText(id, text) {
      var el = document.getElementById(id);
      if (!el) return;
      if (text === null || text === undefined || text === "") {
        el.textContent = "-";
      } else {
        el.textContent = String(text);
      }
    }

    // 如果没有读取到数据，则给出提示
    if (!raw) {
      var area = document.getElementById("infoArea");
      area.innerHTML = "<p style='color:#ffb3b3;'>未找到注册数据，请先返回填写注册信息。</p>";
    } else {
      // 把字符串数据转换为JS对象
      var data = JSON.parse(raw);

      // 按顺序把数据填入对应位置
      setText("email", data.email);
      setText("username", data.username);
      setText("password", data.password);
      setText("birth", data.birth);
      setText("sex", data.sex);

      if (data.hobbies && data.hobbies.length > 0) {
        setText("hobbies", data.hobbies.join("、"));
      } else {
        setText("hobbies", "-");
      }

      setText("course", data.course);
      setText("tool", data.tool);
    }
  </script>
</body>
</html>