Js编写注册信息的年月日插件
程序员文章站
2022-04-20 23:49:12
...
@Js编写注册信息的年月日插件
Js编写注册信息的年月日插件
在注册信息的时候，会有填写生日的一项，一般情况下都是用下拉菜单，也有少部分网站用<input type=“date” …>对象，但是这个对象有的浏览器是不支持显示的。所以需要用到<select…>对象制作一个下拉列表，这也是大多数网站使用的方法。
难点
在使用编写一个下拉列表很简单，通过循环放进年月日就好。但是其中包含了一个用户体验的问题：在闰年选择29天的时候，你要是选错了年份，改成了平年，还是29天，那就不对了，或者你选择了大月的31日，但你改成了小月的，小月是没有31日的，所以需要做出判断。大月改成小月的时候，日子要跟着变，闰年改成平年的时候，2月的日子要变。难点就这些，上才艺。
注释
var cj代表了日期的下标。最后再改动月份的时候，可以让不用动的日子不动，需要动的日子自动变成1。由于onload不好使，我使用了一个button来初始化。fb()代表了button程序，fy，fm，fd分别代表了，鼠标点击年月日的时候，他们的动作。
js程序
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<style>
#year{
font-size: 23px;
width: 120px;
height: 40px;
border: 2px solid #3934E7;
border-radius: 7px;
overflow: hidden;
}
#mouth{
font-size: 23px;
width: 120px;
height: 40px;
border: 2px solid #3934E7;
border-radius: 7px;
overflow: hidden;
}
#date{
font-size: 23px;
width: 120px;
height: 40px;
border: 2px solid #3934E7;
border-radius: 7px;
overflow: hidden;
}
#b1{
background-color:#2722E9;
color: white;
font-size: 30px;
width: 120px;
height: 50px;
border: 2px solid white;
border-radius: 12px;
overflow: hidden;
}
#div1{
//border: 1px solid black;
width: 700px;
height:300px;
position: absolute;
left:400px;
top:200px;
}
</style>
<div id="div1">
<form id="form1" name="form1" style="font-size: 32px;font-family: 微软雅黑;">日历：
<select id="year" onInput="fy()"></select>
<select id="mouth" onInput="fm()"></select>
<select id="date" onInput="fd()"></select>
<input type=button value="start" id="b1" onClick="fb()">
</form>
</div>
<script>
var cj=0;
function fy(){
var year=document.getElementById("year").value*1;
var mouth=document.getElementById("mouth").value*1;
var date=document.getElementById("date");
date.length=0;
if(mouth==2)
{
if(year%4==0)
{
for(i=1;i<=29;i++)
{
var d=new Option(i+" 日",i);
date.add(d);
}
}
else
{
for(i=1;i<=28;i++)
{
var d=new Option(i+" 日",i);
date.add(d);
}
}
}
if(mouth==1||mouth==3||mouth==5||mouth==7||mouth==8||mouth==10||mouth==12)
{
for(i=1;i<=31;i++)
{
var d=new Option(i+" 日",i);
date.add(d);
}
}
if(mouth==4||mouth==6||mouth==9||mouth==11)
{
for(i=1;i<=30;i++)
{
var d=new Option(i+" 日",i);
date.add(d);
}
}
if(year%4!=0&&cj==28)
cj=0;
}
function fb(){
var year=document.getElementById("year");
var mouth=document.getElementById("mouth");
var date=document.getElementById("date");
var i;
for(i=1960;i<=2050;i++)
{
var y=new Option(i+" 年",i);
year.add(y);
}
for(i=1;i<=12;i++)
{
var m=new Option(i+" 月",i);
mouth.add(m);
}
for(i=1;i<=31;i++)
{
var d=new Option(i+" 日",i);
date.add(d);
}
}
function fm(){
var year=document.getElementById("year").value*1;
var mouth=document.getElementById("mouth").value*1;
var date=document.getElementById("date");
date.length=0;
if(mouth==2)
{
if(year%4==0)
{
for(i=1;i<=29;i++)
{
var d=new Option(i+" 日",i);
date.add(d);
}
}
else
{
for(i=1;i<=28;i++)
{
var d=new Option(i+" 日",i);
date.add(d);
}
}
}
if(mouth==1||mouth==3||mouth==5||mouth==7||mouth==8||mouth==10||mouth==12)
{
for(i=1;i<=31;i++)
{
var d=new Option(i+" 日",i);
date.add(d);
}
}
if(mouth==4||mouth==6||mouth==9||mouth==11)
{
for(i=1;i<=30;i++)
{
var d=new Option(i+" 日",i);
date.add(d);
}
}
if(mouth==2||mouth==4||mouth==6||mouth==9||mouth==11&&cj==30)
cj=0;
if(mouth==2&&cj==29)
cj=0;
document.getElementById("date").selectedIndex=cj;
}
function fd(){
cj=document.getElementById("date").selectedIndex;
}
</script>
</body>
</html>
成品截图在上。