<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style>
ul{list-style: none;padding-lift:0px;}
.date-plug input{height:100%;width:30%}
.date-plug .year-plug{text-align:center;line-height:300%;color:#666;font-size:100%;width:40%;}
.date-plug{height:187px;width:350px;background:#eee;}
.date-plug>ul{height:25%;width:100%;}
.date-plug>ul li{height:100%;width:30%;float:left;}
.date-plug>div{height:70%;}
.date-plug ul{padding:0;}
.date-plug>div ul{height:33%;width:100%;background:#fff;border-bottom:1px solid #ccc;}
.date-plug>div li{float:left;height:100%;width:25%;color:#fff;text-align:center;line-height:250%;color:#666;}
.date-plug>div li:active {background-color:#7eb8f2;}
</style>
</head>
<body>
<span id="calendars"class="calendars"></span><input type="button" value="Days" onclick="mslideToggle();">
<div id="data-masks" class="data-month"style="display:block;">
<div class="date-plug">
<ul>
<li><input type="button" value="<" onclick="SubYear();" style="float:right;"></li>
<li id="yearplug" class="year-plug"></li>
<li><input type="button" value=">" onclick="AddYear();"></li>
</ul>
<div>
<ul>
<li onclick="January()">1月</li>
<li onclick="February()">2月</li>
<li onclick="March()">3月</li>
<li onclick="April()">4月</li>
</ul>
<ul>
<li onclick="May()">5月</li>
<li onclick="June()">6月</li>
<li onclick="July()">7月</li>
<li onclick="August()">8月</li>
</ul>
<ul>
<li onclick="September()">9月</li>
<li onclick="October()">10月</li>
<li onclick="November()">11月</li>
<li onclick="MasksClose()">12月</li>
</ul>
</div>
</div>
</body>
<script type="text/javascript">
//获取当年年份
var yearplug = new Date()
var month = new Array(12)
month[0] = "01"
month[1] = "02"
month[2] = "03"
month[3] = "04"
month[4] = "05"
month[5] = "06"
month[6] = "07"
month[7] = "08"
month[8] = "09"
month[9] = "10"
month[10] = "11"
month[11] = "12"
document.getElementById("yearplug").innerHTML = "<span id='year'>" + (yearplug.getFullYear() + "</span>年");
document.getElementById("calendars").innerHTML = "<span id='curyear'>" + (yearplug.getFullYear() + "</span>年<span id='curmonth'>" + month[yearplug.getMonth()] + "</span>月");
var year = document.getElementById("year").innerHTML;
//增加当前年
function AddYear() {
/*var year = document.getElementById("year").innerHTML;*/
year--;
document.getElementById("year").innerHTML = year;
}
//减少当前年
function SubYear() {
/*var year = document.getElementById("year").innerHTML;*/
year++;
document.getElementById("year").innerHTML = year;
}
//选择月份
//01
function January() {
document.getElementById("curmonth").innerHTML = month[0];
document.getElementById("curyear").innerHTML = year;
z = document.getElementById('data-masks');
z.style.display = "none";
}
//02
function February() {
document.getElementById("curmonth").innerHTML = month[1];
document.getElementById("curyear").innerHTML = year;
z = document.getElementById('data-masks');
z.style.display = "none";
}
//03
function March() {
document.getElementById("curmonth").innerHTML = month[2];
document.getElementById("curyear").innerHTML = year;
z = document.getElementById('data-masks');
z.style.display = "none";
}
//04
function April() {
document.getElementById("curmonth").innerHTML = month[3];
document.getElementById("curyear").innerHTML = year;
z = document.getElementById('data-masks');
z.style.display = "none";
}
//05
function May() {
document.getElementById("curmonth").innerHTML = month[4];
document.getElementById("curyear").innerHTML = year;
z = document.getElementById('data-masks');
z.style.display = "none";
}
//06
function June() {
document.getElementById("curmonth").innerHTML = month[5];
document.getElementById("curyear").innerHTML = year;
z = document.getElementById('data-masks');
z.style.display = "none";
}
//07
function July() {
document.getElementById("curmonth").innerHTML = month[6];
document.getElementById("curyear").innerHTML = year;
z = document.getElementById('data-masks');
z.style.display = "none";
}
//08
function August() {
document.getElementById("curmonth").innerHTML = month[7];
document.getElementById("curyear").innerHTML = year;
z = document.getElementById('data-masks');
z.style.display = "none";
}
//09
function September() {
document.getElementById("curmonth").innerHTML = month[8];
document.getElementById("curyear").innerHTML = year;
z = document.getElementById('data-masks');
z.style.display = "none";
}
//10
function October() {
document.getElementById("curmonth").innerHTML = month[9];
document.getElementById("curyear").innerHTML = year;
z = document.getElementById('data-masks');
z.style.display = "none";
}
//11
function November() {
document.getElementById("curmonth").innerHTML = month[10];
document.getElementById("curyear").innerHTML = year;
z = document.getElementById('data-masks');
z.style.display = "none";
}
//12
function December() {
document.getElementById("curmonth").innerHTML = month[11];
document.getElementById("curyear").innerHTML = year;
z = document.getElementById('data-masks');
z.style.display = "none";
}
//点击日期选择时隐藏遮罩
function MasksClose() {
z = document.getElementById('data-masks');
z.style.display = "none";
}
//点击日期按钮生成遮罩
function mslideToggle() {
z = document.getElementById('data-masks');
z.style.display = "block";
}
</script>
</html>其实我这个遇到3个问题
一. 点击 月份 关闭 日历 时“function mslideToggle() ”中的内容在月份选择的function中重复添加，如何直接调用，而不需要重复写？
二. 如何在我打开日历时操作年份的加减时，保持"id=calendars"中的年份不变，在选择完 日历 中的 月份 后再根据 日历中所选的年份变更？
三. 对于年份选择，其实我只想要今年到往前推五年的这个波段（比如今年2016，那可选范围应为2016-2011。如果到明年了范围就变成了2017-2012），如何做到。
另：感谢每一位帮助我的朋友，谢谢
Nick_Li551
相关分类