您的位置：首页 > Web前端 > JavaScript

用JS实现年月日的联动

2016-06-25 22:11 323 查看

先引入jquery-2.0.2.js，然后直接上代码

<!DOCTYPE html>
<html>
<head>
<title>用JS实现年月日的联动</title>
<script type="text/javascript" src="jquery-2.0.2.js"></script>
</head>
<body>
<!--年-->
<select name="year" id="year" onchange="getDay()">
<script type="text/javascript">
var date=new Date();  //先new出一个date对象
for(var i=1970;i<=date.getFullYear();i++){   //获取当前年份
document.write("<option value='"+i+"' "+(i==2000?"selected":"")+">"+i+"年</option>");
//循环输出年份，2000是指网页初始时显示的年份
}
</script>
</select>
<!--月-->
<select name="month" id="month" onchange="getDay()">
<script type="text/javascript">
for(var i=1;i<=12;i++){
document.write("<option value='"+i+"' "+(i==1?"selected":"")+">"+i+"月</option>");
//循环输出月份
}
</script>
</select>
<!--日-->
<select name="day" id="day">
<script type="text/javascript">
for(var i=1;i<=31;i++){
document.write("<option value='"+i+"' "+(i==1?"selected":"")+">"+i+"日</option>");
//循环输出日期
}
</script>
</select>
<script type="text/javascript">
function getDay(){
var y=$("select[name=year]").val();   //获取年份
var m=$("select[name=month]").val();  //获取月份
var d=document.getElementById('day');  //获得day节点
d.innerHTML="";  //清空节点day的内容
if(m==4||m==6||m==9||m==11){  //如果月份是4,6,9,11
for(i=1;i<=30;i++) append(d,i);   //则用循环追加到day节点里面
}
else if(m==2){  //如果月份是2
if(y%4==0||y%400==0&&y%100!=0){   //如果是闰年
for(i=1;i<=29;i++) append(d,i);
}
else{
for(i=1;i<=28;i++) append(d,i);  //如果是平年
}
}
else{
for(i=1;i<=31;i++)  append(d,i);  //如果月份是其它的
}
}
function append(d,j){
var option=document.createElement("option");   //创建option节点
option.value=j;   //设置value值
option.innerText=j+"日";    //设置显示内容
d.appendChild(option);   //把option追加到参数d里面
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航