注册页面
期待效果如下：
html实现用户注册页面（生日实现年月日的三级联动）

初始代码实现：

<!DOCTYPE html>
<html>
<head>
	<title>注册页面</title>
</head>
<body>
<!-- 表单，用于提交按钮，隐式提交 -->
<form action="" method="post">
<table border="0" width="500px" align="center" bgcolor="#f2f2f2">
	<caption><h1>用户注册</h1></caption>
	<tr>
		<td align="right">用户名：</td>
		<td><input type="text" name="username" id="" placeholder="请输入用户名"></td>
	</tr>
	<tr>
		<td align="right">密码：</td>
		<td><input type="password" name="password" id="" placeholder="请输入密码"></td>
	</tr>
	<tr>
		<td align="right">确认密码：</td>
		<td><input type="password" name="password" id="" placeholder="请再次输入密码"></td>
	</tr>
	<tr>
		<td align="right">性别：</td>
		<td>
			<!-- <input type="radio" name="xb" id="" checked="checked">男 -->
			<input type="radio" name="xb" id="">男
			<input type="radio" name="xb" id="">女
		</td>
	</tr>
	<tr>
		<td align="right">兴趣爱好：</td>
		<td>
			<input type="checkbox" name="" id="" value="1">看书
			<input type="checkbox" name="" id="" value="2">旅游
			<input type="checkbox" name="" id="" value="3">音乐
			<input type="checkbox" name="" id="" value="4">游戏
		</td>
	</tr>
	<tr>
		<td align="right">生日：</td>
		<td>
			<!-- 没用CSS，所以没有写完全 -->
			<select>
				<option value="1995">1995</option>
				<option value="1996">1996</option>
				<option value="1997">1997</option>
				<option value="1998">1998</option>
				<option value="1999">1999</option>
				<option value="2000">2000</option>
				<option value="2001">2001</option>
				<option value="2002">2002</option>
			</select>年
			<select>
				<option value="01">01</option>
				<option value="02">02</option>
				<option value="03">03</option>
				<option value="04">04</option>
				<option value="05">05</option>
				<option value="06">06</option>
				<option value="07">07</option>
				<option value="08">08</option>
			</select>月
			<select>
				<option value="01">01</option>
				<option value="02">02</option>
				<option value="03">03</option>
				<option value="04">04</option>
				<option value="05">05</option>
				<option value="06">06</option>
				<option value="07">07</option>
				<option value="08">08</option>
			</select>日
		</td>
	</tr>
	<tr>
		<td align="right">头像：</td>
		<td>
			<img src="image/headLogo/12.gif">
			<select>
				<option value="01">01</option>
				<option value="02">02</option>
				<option value="03">03</option>
				<option value="04">04</option>
			</select>
		</td>
	</tr>
	<tr>
		<td align="center" colspan="2">
			<input type="submit" value="注册">
		</td>
	</tr>
</table>
</form>
</body>
</html>

实际效果如下：
html实现用户注册页面（生日实现年月日的三级联动）

需要改进的地方：

  1. 生日的年月日未全部罗列，使用函数？
  2. 如何选择头像（通过下拉菜单）

改进优化

  1. 使用document.getElementById()获取年月日的控件
  2. 使用onchange()使下拉框变化触发某个函数，onload()刷新来显示年月日所对应的列表框选项
  3. yyyy.selectedIndex=Math.round(n/2);使年份默认显示为范围的中间值
  4. dd.options.length=0;列表框的选项为0，年月日的联动通过天的全删除再全添加得以实现
  5. 构造函数来实现年月日的选项初始赋值，年月日的三级联动（如：大小月、闰年等），以及头像的选择
函数 作用
ymd() 显示年月日列表框的条目，调用initSelect()
initSelect() 简化年月日获取所需的三个循环
selectYmd() 实现年月日的三级联动（大小月、闰年）
initLogo() 列表框增加头像序号对应的选项
selectLogo() 通过改变列表框的选项改变头像

html代码：

<!DOCTYPE html>
<html>
<head>
	<title>注册页面</title>
<script type="text/javascript" src="注册页面.js"></script>
</head>
<body onload="ymd(),initLogo()">
<!-- 表单，用于提交按钮，隐式提交 -->
<form>
	<!-- 利用表格来规范注册信息 -->
<table border="0px" width="400px" align="center" bgcolor="#f2f2f2">
	<caption><h1>用户注册</h1></caption>
	<tr>
		<td align="right">用户名：</td>
		<td><input type="userName" name="userName" placeholder="请输入用户名"></td>
	</tr>
	<tr>
		<td align="right">密码：</td>
		<td><input type="password" name="password" id="password" placeholder="请输入密码"></td>
	</tr>
	<tr>
		<td align="right">确认密码：</td>
		<td><input type="password" name="password" id="password" placeholder="请再次输入密码"></td>
	</tr>
	<tr>
		<td align="right">性别：</td>
		<td>
			<input type="radio" name="xb" value="1" checked ="checked">男
			<input type="radio" name="xb" value="0">女
		</td>	
	</tr>
	<tr>
		<td align="right">爱好：</td>
		<td>
			<input type="checkbox" name="interest" value="1">看书
			<input type="checkbox" name="interest" id="" value="2">旅游
			<input type="checkbox" name="interest" id="" value="3">音乐
			<input type="checkbox" name="interest" id="" value="4">游戏
		</td>
	</tr>
	<tr>
		<td align="right">生日：</td>
		<td>
			<select name="yyyy" id="yyyy" onchange="selectYmd()"></select>年
			<select name="mm" id="mm" onchange="selectYmd()"></select>月
			<select name="dd" id="dd"></select>日
		</td>
	</tr>
	<tr>
		<td align="right">头像：</td>
		<td>
			<img id="logoImg" src="image/headLogo/1.gif">
			<select id="logo" onchange="selectLogo()"></select>
		</td>
	</tr>
	<tr>
		<td align="center" colspan="2">
			<input type="submit" value="注册" onclick="register()">
		</td>
	</tr>
</table>
</form>
</body>
</html>

JS代码：

function ymd(){
	// 获取id=yyyy,mm,dd的控件
	var yyyy=document.getElementById("yyyy");
	var mm=document.getElementById("mm");
	var dd=document.getElementById("dd");
	// 获取当前日期的年份，将生日的结束年设为当前年份
	var date=new Date();
	var year=parseInt(date.getFullYear());
	// 设置生日中年月日的起始年份与结束年份
	initSelect(yyyy,1990,year);
	initSelect(mm,1,12);
	initSelect(dd,1,31);
	// 获取列表框长度，默认设置为中间值
	var n=yyyy.length;
	yyyy.selectedIndex=Math.round(n/2);
}
// 通过函数简化年月日获取所需的3个循环
function initSelect(obj,start,end){
	for(var i=start;i<=end;i++){
		// options.add()给列表框添加选项
		obj.options.add(new Option(i,i));
	}
}
// 实现年月日的三级联动（如大小月，闰年的2月）
function selectYmd(){
	var yyyy=document.getElementById("yyyy");
	var mm=document.getElementById("mm");
	var dd=document.getElementById("dd");
	var m=parseInt(mm.value);
	var dayEnd;
	// 设置大小月对应的天
	if(m==4 || m==6 || m==9 || m==11){
		dayEnd=30;
	}else if(m==2){
		dayEnd=28;
		y=parseInt(yyyy.value);
		// 设置闰年（非整百年：能被4整除的为闰年。整百年：能被400整除的是闰年。）
		if(((y%4==0) && (y%100!=0)) || y%400==0){
			dayEnd=29;
		}
	}else{
		dayEnd=31;
	}
	dd.options.length=0;
	initSelect(dd,1,dayEnd);
}
// 列表框增加头像序号对应的选项
function initLogo(){
	var logo=document.getElementById("logo");
	for(i=1;i<=15;i++){
		logo.options.add(new Option(i,i));
	}
}
// 通过改变列表框的选项改变头像
function selectLogo(){
	var logo=document.getElementById("logo");
	var n=logo.value;
	var logoImg=document.getElementById("logoImg");
	logoImg.src="image/headLogo/"+n+".gif";
}
function register(){
	alert("注册成功！");
}

网页效果：
html实现用户注册页面（生日实现年月日的三级联动）

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。