用Html实现人人网注册界面 ，Js实现生日栏表单三级联动
1. 效果
2.Html代码部分
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>人人网日期表单联动</title>
<style>
select
{
font:20px/40px '宋体';
}
option {width: 100px;}
</style>
</head>
<body>
<form method = "get" onchange="changeMonth()">
<b><h3 align="center">
免费开通人人网账号
</h3></b>
<table align="center" height = "500">
<tr ><td>注册邮箱: </td><td> <input type = "text" name = "name"/></td></tr>
<tr><td> </td><td>你还可以使用 <a href="https://www.baidu.com">账号</a>
注册或者 <a href="https://www.baidu.com">手机号</a> 注册</td></tr>
<tr><td>创建密码: </td><td><input type = "password" name = "password"/></td></tr>
<tr><td>真实姓名: </td><td><input type = "password" name = "name"/></td>
<tr><td align="right">性别： </td><td>男<input type = "radio" value = "male" name = "gender"/>
女<input type = "radio" value = "female" name = "gender"/></td></tr>
<tr><td align="right">生日: </td><td>
<div id="box">
<select name="sel1" id="sel1">
<option value="year">年</option>
</select>
<select name="sel2" id="sel2">
<option value="month">月</option>
</select>
<select name="sel3" id="sel3">
<option value="day">日</option>
</select>
<span id="result"></span>
</div></td></tr>
<tr><td align="right">我现在: </td>
<td><select name = "subject">
<option value = "xu">正在上学</option>
<option value = "cz">工作</option>
<option value = "gz">赋闲</option>
<option value = "bk">经商</option>
</select></td></tr>
<tr><td></td><td> <a href="https://www.baidu.com">看不清换一张？</a>
</td></tr>
<tr><td>验证码:</td><td><input type = "password" name = "yanzheng"/></td></tr>
<tr><td></td><td><a href="https://www.baidu.com"> </a></td></tr>
</table>
</form>
</body>
</html>
3.JavaScript代码
<script>
//生成日期
function creatDate()
{
//生成1900年-2100年
for(var i = 2016; i >= 1950; i--)
{
//创建select项
var option = document.createElement('option');
option.setAttribute('value',i);
option.innerHTML = i;
sel1.appendChild(option);
}
//生成1月-12月
for(var i = 1; i <=12; i++){
var option1 = document.createElement('option');
option1.setAttribute('value',i);
option1.innerHTML = i;
sel2.appendChild(option1);
}
//生成1日—31日
for(var i = 1; i <=31; i++){
var option2 = document.createElement('option');
option2.setAttribute('value',i);
option2.innerHTML = i;
sel3.appendChild(option2);
}
}
creatDate();
//保存某年某月的天数
var days;
//年份点击 绑定函数
sel1.onclick = function()
{
//月份显示默认值
sel2.options[0].selected = true;
//天数显示默认值
sel3.options[0].selected = true;
}
//月份点击 绑定函数
sel2.onclick = function()
{
//天数显示默认值
sel3.options[0].selected = true;
//计算天数的显示范围
//如果是2月
if(sel2.value == 2)
{
//判断闰年
if((sel1.value % 4 === 0 && sel1.value % 100 !== 0) || sel1.value % 400 === 0)
{
days = 29;
}
else
{
days = 28;
}
//判断小月
}else if(sel2.value == 4 || sel2.value == 6 ||sel2.value == 9 ||sel2.value == 11){
days = 30;
}else{
days = 31;
}
//增加或删除天数
//如果是28天，则删除29、30、31天(即使他们不存在也不报错)
if(days == 28){
sel3.remove(31);
sel3.remove(30);
sel3.remove(29);
}
//如果是29天
if(days == 29){
sel3.remove(31);
sel3.remove(30);
//如果第29天不存在，则添加第29天
if(!sel3.options[29]){
sel3.add(new Option('29','29'),null)
}
}
//如果是30天
if(days == 30){
sel3.remove(31);
//如果第29天不存在，则添加第29天
if(!sel3.options[29]){
sel3.add(new Option('29','29'),null)
}
//如果第30天不存在，则添加第30天
if(!sel3.options[30]){
sel3.add(new Option('30','30'),null)
}
}
//如果是31天
if(days == 31){
//如果第29天不存在，则添加第29天
if(!sel3.options[29])
{
sel3.add(new Option('29','29'),null)
}
//如果第30天不存在，则添加第30天
if(!sel3.options[30])
{
sel3.add(new Option('30','30'),null)
}
//如果第31天不存在，则添加第31天
if(!sel3.options[31])
{
sel3.add(new Option('31','31'),null)
}
}
}
//结果显示 设置好日期时间后 弹窗通知
box.onclick = function()
{
//当年、月、日都已经为设置值时
if(sel1.value !='year' && sel2.value != 'month' && sel3.value !='day')
{
alert("日期时间已经设定好");
}
}
</script>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
发表评论 取消回复