前面html、css部分就不上传了,主体部分就是span里放头部的年和月,table里放每个月的时间,下面是js部分的代码
<script type="text/javascript">
window.οnlοad=function(){
var oBtu=document.getElementsByTagName('button')[0];
var oBox=document.getElementById('box');
var aSpan=document.getElementsByTagName('span');
var aBtu=oBox.getElementsByTagName('button');
var aTr=oBox.getElementsByTagName('tr');
var aTd=oBox.getElementsByTagName('td');
var arr=[31,28,31,30,31,30,31,31,30,31,30,31];
var toOld=0;
var toNext=0;
var oMouth=0;
var oYear=0;
var bTu=true;
oBtu.οnclick=function(){
if (bTu) {
oBox.style.opacity=1;
bTu=false;
}else{
oBox.style.opacity=0;
bTu=true;
}
}
// 获取到年月日
var nowDate=new Date();
var year=nowDate.getFullYear();
var mouth=nowDate.getMonth()+1;
var nMouth=mouth;
var dateDate=nowDate.getDate();
var weekDate=nowDate.getDay();
var num=Math.ceil(dateDate/7);
var num1=dateDate%7;
// 判断今天应该在那个td里显示
if(dateDate%7>weekDate){
var date=(num)*7+(weekDate);
}else{
var date=(num-1)*7+(weekDate);
}
aSpan[0].innerHTML=year;
aSpan[1].innerHTML=mouth;
if ((year%4==0&&year%100!=0)||year%400==0) {
arr[1]=29;
alert(1);
}
if (num1!=0) {
num1=num1;
}else{
num1=7;
}
if (weekDate!=0) {
if (weekDate<num1) {
num=num+1;
}
}
// 将今天设置不同的样式
aTd[date].innerHTML=dateDate;
aTd[date].className='active';
var nowTd=aTd[date].innerHTML;
for(var i=0;i<aTd.length;i++){
var j=i-date;
var num=parseInt(nowTd)+parseInt(j);
if (num<=0||num>arr[mouth-1]) {
aTd[i].innerHTML="";
}else{
aTd[i].innerHTML=num;
if (num==1) {
toOld=i;
}
if (num==arr[mouth-1]) {
toNext=i;
}
}
}
// 通过上个月的第一天的位置确定这个月最后一天的位置
aBtu[0].οnclick=function(){
oMouth++;
for(var n=0;n<aTd.length;n++){
aTd[n].innerHTML="";
}
if (mouth-oMouth!=0) {
oYear=oYear;
}else{
oYear=oYear+1;
mouth=12;
oMouth=0;
}
if (!(oYear==0&&(mouth-oMouth)==nMouth)) {
aTd[date].className='';
}else{
aTd[date].className='active';
}
// 检测是否为闰年
if (((year-oYear)%4==0&&(year-oYear)%100!=0)||(year-oYear)%400==0){
arr[1]=29;
}else{
arr[1]=28;
}
var aMouth=mouth-oMouth;
aSpan[0].innerHTML=year-oYear;
aSpan[1].innerHTML=aMouth;
if (toOld==0) {
toOld=7;
}
if (arr[aMouth-1]+(7-toOld)>35) {
num=34+toOld;
}else{
num=27+toOld;
}
aTd[num].innerHTML=arr[aMouth-1];
for(var i=num;i>=0;i--){
aTd[num-i].innerHTML=arr[aMouth-1]-i;
}
for(var m=0;m<aTd.length;m++){
if (aTd[0]!="") {
if (aTd[0]>=0) {
num=num+7;
alert(num);
aTd[num].innerHTML=arr[aMouth-1];
for(var i=num;i>=0;i--){
aTd[num-i].innerHTML=arr[aMouth-1]-i;
}
}
}
if(aTd[m].innerHTML<=0){
aTd[m].innerHTML="";
}
if(aTd[m].innerHTML==1){
toOld=m;
}else if(aTd[m].innerHTML==arr[aMouth-1]){
toNext=m;
}
}
}
// 同aBtu[0]一样
aBtu[1].οnclick=function(){
oMouth--;
for(var n=0;n<aTd.length;n++){
aTd[n].innerHTML="";
}
if (mouth-oMouth!=13) {
oYear=oYear;
}else{
oYear=oYear-1;
mouth=1;
oMouth=0;
}
if (!(oYear==0&&(mouth-oMouth)==nMouth)) {
aTd[date].className='';
}else{
aTd[date].className='active';
}
if (((year-oYear)%4==0&&(year-oYear)%100!=0)||(year-oYear)%400==0){
arr[1]=29;
}else{
arr[1]=28;
}
var aMouth=mouth-oMouth;
aSpan[0].innerHTML=year-oYear;
aSpan[1].innerHTML=aMouth;
var num=(toNext%7)+1;
if (num==7) {
num=0;
}
aTd[num].innerHTML=1;
for(var i=num;i<=arr[mouth-1-oMouth]+num-1;i++){
aTd[i].innerHTML=i-num+1;
}
for(var m=0;m<aTd.length;m++){
if(aTd[m].innerHTML==1){
toOld=m;
}else if(aTd[m].innerHTML==arr[aMouth-1]){
toNext=m;
}
}
}
}
</script>