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

代码相较于课本稍作改动，以网页版为准
把该改成你名字的地方改成你名字截图再提交，否则扣分。
此次作业只需要补全代码，不需要全敲
最后一次作业，完结撒花！

1. 补全publicView文件夹中header.html的script部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<link rel="stylesheet" href="../css/header.css">
<meta charset="utf-8"/>
<div id="top"><!-- 页面头部 -->
	<div id="row1"><!-- 第一行 -->
		<div id="row11">date and time</div>
		<div id="row12">会员管理信息系统</div>
		<div id="row13">尚未登录！</div>
	</div>
	<div id="row2"><!-- 第二行 -->
		<ul>
			<!--本公共视图以页内框架的形式被其它功能页面引用，需要设置超链接 target="_blank"-->
			<li><a href="../index.html" target="_blank">站点主页</a></li>
			<li><a href="../mLogin.html" target="_blank">会员登录</a></li>
			<li><a href="../mRegister.html" target="_blank">会员注册</a></li>
			<li><a href="../index.html" target="_blank">会员登出</a></li>
		</ul>
	</div>
</div>

<script>
	//在页面左上方实时显示时间；未使用jQuery，属于JavaScript原生用法
	const dtps = document.getElementById("row11");  //获取DOM对象
	setInterval("dtps.innerHTML=new Date().toLocaleString()","1000");  //实时时间显示
</script>

2. 补全mLogin.html中script部分，点击登录后提交带你名字的成功弹窗截图。

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
<meta charset="UTF-8">
<title>会员登录</title>

<iframe id="headFrame" src="publicView/header.html"></iframe>

<div id="main">  <!-- 主页主体内容 -->
	<form action="#" method="post">
		<table>
			<caption>会员登录</caption>
			<tr><td>会员名称：</td>
				<td><input type="text" value="wzx" id="username"></td></tr>
			<tr><td>会员密码：</td><td>
				<input type="password" value="123" id="password"></td></tr>
			<tr>
				<td><input type="button" value="确定" onclick="login()"/></td>
				<td><input type="button" value="取消" onclick="cancelLogin()"/></td></tr>
		</table>
		<!--动态网站里，表单提交是使用submit类型的提交按钮，而不是button类型的按钮-->
	</form>
</div>
			
<iframe id="footFrame" src="publicView/footer.html"></iframe>
<style>
	#headFrame{  /* 使用iframe标签引入页面 header.html */
		width: 100%;
		border: none;
		height: 12%;
	}

	#main{
		width:60%;
		margin: 0px auto;
		display: flex;  /* 弹性容器 */
		justify-content: center; /* 水平居中 */
		border: #999999 1px solid;
	}
	table caption{
		margin-top: 20px;
		font-size: 2em;
		color: red
	}
	table tr{
		font-size: 1.3em;
		line-height: 2em;
	}
	input,select{	/* 文本框等输入控件和下拉列表字体 */
		font-size: 0.9em;
	}

	#footFrame{  /* 使用iframe标签引入页面 footer.html */
		width: 100%;
		border: none;
	}
</style>
<script>
	const users=[   //此处名字输入你的名字，用于截图时作业评分
		["你的名字", "pwd"]
	]
	function login(){  //响应onclick事件
		const un=document.getElementById("username").value  //获取用户名的输入值
		const pwd=document.getElementById("password").value  //获取密码框的输入值
		for(i=0; i < users.length; i++){
			if(users[i][0] == un) break;
		}
		if(i<users.length){ //用户名存在时
			if(users[i][1] == pwd){ //密码也正确时
				alert("登录成功：" + users[0][0])
				//获取通过iFrame嵌入的子页面里包含的元素
				let headFrame=document.getElementById("headFrame").contentWindow
				//再次获取窗口里的DOM元素
				let loginState=headFrame.document.getElementById("row13")
				//alert(loginState);
				console.log(loginState)
				loginState.innerHTML="欢迎你："+un     //状态栏局部刷新
			} else{
				alert("密码错误...")
			}
		} else{
			alert("用户名不存在...")
		}
	}
	function cancelLogin(){   //响应onclick事件
		location.href="index.html"   //返回主页
	}
</script>

3. 补全mRegister.html中script部分，点击注册后提交带你名字的成功弹窗截图。

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
<!--
	自处理表单
	通过“表单名称.元素名”方式获取文本框的值（文本框仅以name方式命名）；当文本框使用id命名时，可省略表单名称
	动态网站里，表单提交是使用submit类型的提交按钮，而不是button类型的按钮
-->
<meta charset="UTF-8">
<title>会员注册</title>

<iframe src="publicView/header.html" id="headFrame"></iframe>
<div id="main">
	<form id="bd">
		<table>
			<caption>会员注册</caption>
			<tr>
				<td>会员名称：</td>
				<td><input type="text" size="30" id="username"></td>
			</tr>
			<tr>
				<td>会员密码：</td>
				<td><input type="password" size="30" id="password"></td>
			</tr>
			<tr>
				<td>性别：</td>
				<td><input type="radio" value="1" name="sex" checked>男&nbsp;&nbsp;
					<input type="radio" value="0" name="sex">女</td>
			</tr>
			<tr>
				<td>兴趣爱好：</td>
				<td>
					<input type="checkbox" value="art" name="ah">文艺&nbsp;
					<input type="checkbox" value="sport" name="ah">体育&nbsp;
					<input type="checkbox" value="game" name="ah">游戏</td>
			</tr>
			<tr>
				<td>所在城市：</td>
				<td>
					<select id="city">
						<option value="Beijin" selected>北京</option>
						<option value="Shanghai">上海</option>
						<option value="Wuhan">武汉</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>上传照片：</td>
				<td><input type="file"></td>
			</tr>
			<tr>
				<td>个人简历：</td>
				<td><textarea id="jl">这是一个使用textarea标签制作的多行文本框，用于写个人简历之类的东东。</textarea></td>
			</tr>
			<tr>
				<td>
					<input type="button" value="确定" id="ensure"/>
					<input type="button" value="取消" id="cancel" style="margin-left: 5px" />
				</td>
			</tr>
		</table>
	</form>
</div>
<iframe src="publicView/footer.html" id="footFrame"></iframe>

<style>
	#headFrame{  /* 使用iframe标签引入页面 header.html */
		width: 100%;
		border: none;
		height: 12%;
	}

	#main{		 /* 页面主体内容 */
		width:60%;
		margin: 0px auto;
		display: flex;  /* 弹性容器 */
		justify-content: center; /* 水平居中 */
		border: #999999 1px solid;
	}
	table caption{
		margin-top: 20px;
		font-size:2em;
		color:red
	}
	table tr{
		font-size: 1.3em;
		line-height: 2em;
	}
	input,select{	/* 文本框等输入控件和下拉列表字体 */
		font-size: 0.9em;
	}
	#jl{   /* 简历字段 */
		font-size: 0.9em;
		width:80%;
		text-indent:1em; /* 首行缩进2个字符 */
		resize: both;  /* 可以调节大小 */
	}

	#footFrame{  /* 使用iframe标签引入页面 footer.html */
		width: 100%;
		border: none;
	}
</style>
<script>
	document.getElementById("ensure").onclick=function(){
		let result="亲爱的"
		let bd=document.getElementById("bd")  //表单
		let sexRadio       //性别单选按钮数组
		let ahCheckbox    //爱好复选数组
		let i             //循环变量
		result+=bd.username.value
		sexRadio=document.getElementsByName("sex")  //单选单选按钮数组
		let jg
		for(i=0;i<sexRadio.length;i++){
			if(sexRadio[i].checked){  //checked是单选按钮元素的属性，表示是否选中
				jg=i
				break
			}
		}
		console.log(sexRadio[jg]);console.log(sexRadio[jg].value)  //测试
		if(sexRadio[jg].value==1){   //"1"也ok
			result+="先生："
		}else{
			result+="女士："
		}
		result+="密码是"+bd.password.value+"；"
		ahCheckbox=document.getElementsByName("ah")
		let ah="";
		for(i=0;i<ahCheckbox.length;i++){
			if(ahCheckbox[i].checked){    //checked也是复选框元素的属性，表示是否选中
				if(i<ahCheckbox.length-1){
					ah+=ahCheckbox[i].value+"，";
				}else{
					ah+=ahCheckbox[i].value+" ";
				}
			}
		}
		if(ah.length>0){
			result+="爱好是"+ah+"；"
		}else{
			result+="没有选择爱好；"
		}
		result+="所在城市是"+city.value
		alert(result)  //输出注册信息
	}
	document.getElementById("cancel").onclick=function(){
		location.href="index.html";
	}
</script>

小福利：http://draw.redjinx.me/