名站网址导航为大家提供关于网站网页设计设计相关的的教程知识。
- 本篇文章具体介绍如下
实现目标：
<head>
//导入jquery地址
<script src="（Jquery地址）" language="JavaScript" type="text/javascript"></script>
<script type="text/javascript">
//startYear发生变化
function changeYear(str,isstart)
{
var pre = "start";
if(isstart == false)
{
pre = "end";
}
var startMonth = $(pre "Month").value;
if(startMonth == "")
{
var e = $(pre "Month");
optionClear(e);
return;
}
var n = Monhead[startMonth - 1];
if(startMonth == 2 && IsPinYear($(pre "Year").value))
{
n ;
}
writeDay(n,pre);
}
function changeMonth(str,isstart)
{
var pre = "start";
if(isstart == false)
{
pre = "end";
}
var year = $(pre "Year").value;
if(year == "")
{
var e = $(pre "Day");
optionClear(e);
return;
}
var n = Monhead[str - 1];
if(str == 2 && IsPinYear($(pre "Year")))
{
n ;
}
writeDay(n,pre);
}
function dateStart()
{
var defaultStartY = "2011";
var defaultStartM = "1";
var defaultStartD = "14";
var defaultEndY = "2011";
var defaultEndM = "2";
var defaultEndD = "23";
Monhead = [31,28,31,30,31,30,31,31,30,31,30,31];
var prestr = new Array("start","end");
for(var j=0; j<2; j )
{
var pre = prestr[j];
//start 年
var y = new Date().getFullYear();
if(pre == "start")
{
//start初始选中前第10天
var i_index = 0;
for(var i=(y-10); i<=y; i )
{
$(pre "Year").options.add(new Option("" i "",i));
if(i == defaultStartY)
{
$(pre "Year").options[i_index].selected = true;
}
i_index ;
}
}
else
{
var i_index =0;
for(var i=(y-5); i<=y 5; i )
{
$(pre "Year").options.add(new Option("" i "",i));
if(i == defaultEndY)
{
$(pre "Year").options[i_index].selected = true;
}
i_index ;
}
}
//start月
defaultM = (pre == "start" ? defaultStartM : defaultEndM)
for(var i = 1; i < 13; i )
{
$(pre "Month").options.add(new Option("" i "",i));
if(i == defaultM)
{
$(pre "Month").options[i-1].selected = true;
}
}
//start日
var n = Monhead[$(pre "Month").value];
if(new Date().getMonth == 1 && IsPinYear($(pre "Year").value))
{
n ;
}
defaultD = (pre == "start" ? defaultStartD : defaultEndD)
writeDay(n,pre);
$(pre "Day").options[defaultD-1].selected = true;
}
}
function writeDay(n,pre)
{
var e = $(pre "Day");
optionClear(e);
for (var i=1; i<(n 1); i )
{
e.options.add(new Option("" i "",i));
}
}
function IsPinYear(year)
{
return (0 == year%4 && (year0 != 0 || year % 4 == 0));
}
function optionClear(e)
{
for(var i=e.options.length; i>=0; i--)
{
e.remove(i);
}
}
</script>
</head>
<body onl oad="dateStart()">
<p name="selectdate">
从
<select id="startYear" name="startYear" onchange="changeYear(this.value,true)">
</select>
年
<select id="startMonth" name="startMonth" onchange="changeMonth(this.value,true)">
</select>
月
<select id="startDay" name="startDay">
</select>
日
到
<select id="endYear" name="endYear" onchange="changeYear(this.value,false)">
</select>
年
<select id="endMonth" name="endMonth" onchange="changeMonth(this.value,false)">
</select>
月
<select id="endDay" name="endDay">
</select>
日
</p>
</body>
参考了一些具体代码，希望对需要的朋友有所帮助。
好了关于网站网页设计设计相关的这篇文章就给大家介绍到这里不明白的地方给本站留言。声明，本站内容来源于互联网，如果侵犯了你的权益请联系本站删除。,淘宝搜索框效果实现分析-javascript技巧
