一、效果及功能说明
模仿good日历自己来完成一个日历的所有效果
二、我的想法
1、首先是要获得年月日和星期几然后在到需要显示的地方显示出来
2、通过每个方法来获得年 月 日 和星期几但是星期几是需要-1才能获得正常星期几
3、将p标签加入到方法里面页面就值有4个标签两个div两个input
4、通过循环来获得每天和每个星期都不一样
5、通过循环让星期天以后在再次进行循环获得新的一周的星期数
三、效果图

四、代码
<!DOCTYPE html> <head> <meta charset="UTF-8"> <style type="text/css"> * { margin:0; padding:0px; } body{ font-family:Microsoft YaHei; } .date p{ float:left; margin-top: 20px; margin-left:5px; } .button{ float:left; margin-top: 20px; margin-left:40px; width:100%; } #age{ float:left; width:100%; } </style> <script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script language="javascript" type="text/javascript"> $(document).ready(function(){ var time = new Date(); //定义总的时间 var age = '<p id="age">' + time.getFullYear() + '年' + '</p>'; //定义年份 var ar = new Array(); //定义星期数组 ar[0] = "星期一"; ar[1] = "星期二"; ar[2] = "星期三"; ar[3] = "星期四"; ar[4] = "星期五"; ar[5] = "星期六"; ar[6] = "星期天"; //里面放7个星期 $('#date').append(age); //直接写入年份 for( var i=0; i<7; i++) //循环7次 { var month ='<p id="month">' + [ time.getMonth() + 1] + '月' + '</p>' ; //获得月份占时不会出现月份的变动 var sky = '<p id="sky">' + [time.getDate() + i] + '号' + '</p>'; //获得天数 这个就在一直用i来循环 var week = '<p id="week">' + ar[time.getDate() + 2 + i] + '</p>'; //获得星期 让星期循环起来 if(ar[time.getDay()-1 + i] == ar[7]) //一个判断当星期循环到成到ar[7]的时候 { week ='<p id="week">' + ar[i-2]+ '</p>'; //当week从新开始一个循环 } $('#date').append(month); $('#date').append(sky); $('#date').append(week); //写入div里 } }); </script> </head> <body> <div id="date" class="date"> </div> <div class="button"> <input id="add-time" type="button" value="后星期"/> <input id="reduce-time" type="button" value="前星期"/> </div> </body> </html>