思路：
1、定义好每一个月份的日期天数
2、获取当前的系统日期初始化数据
3、输出日历
2.1、先获取当前月的第一天是星期几（这一点与日历的排版至关重要！）
2.2、获取当前月的天数
2.3、获取当前月有多少个星期（即要输出多少行 行数这里我会预留多一行）
2.4、获取当前年份和月份 用作显示
<span><!</span>
<span>DOCTYPE html</span>
<span>></span>
<span><</span>
<span>html </span>
<span>lang</span>
<span>="en"</span>
<span>></span>
<span><</span>
<span>head</span>
<span>></span>
<span><</span>
<span>meta </span>
<span>charset</span>
<span>="UTF-8"</span>
<span>></span>
<span><</span>
<span>title</span>
<span>></span>js 日历<span></</span><span>title</span><span>></span><span><</span><span>style </span><span>type</span><span>="text/css"</span><span>></span><span>
*</span><span>{</span><span>
border</span><span>:</span><span> 0</span><span>;</span><span>
padding</span><span>:</span><span> 0</span><span>;</span><span>
margin</span><span>:</span><span> 0</span><span>;</span><span>
font-family</span><span>:</span><span> "微软雅黑"</span><span>;</span><span>}</span><span>
a</span><span>{</span><span>
text-decoration</span><span>:</span><span> none</span><span>;</span><span>
color</span><span>:</span><span> #000</span><span>;</span><span>}</span><span>
li</span><span>{</span><span>
list-style-type</span><span>:</span><span> none</span><span>;</span><span>}</span><span>
.calendar_wrap</span><span>{</span><span>
width</span><span>:</span><span> 350px</span><span>;</span><span>
margin</span><span>:</span><span> 0 auto</span><span>;</span><span>
padding</span><span>:</span><span> 0</span><span>;</span><span>
border</span><span>:</span><span> 1px solid #000</span><span>;</span><span>}</span><span>
.calendar_list</span><span>{</span><span>
width</span><span>:</span><span> 100%</span><span>;</span><span>
margin-top</span><span>:</span><span> 10px</span><span>;</span><span>}</span><span>
.calendar_list tr</span><span>{</span><span>
width</span><span>:</span><span> 100%</span><span>;</span><span>}</span><span>
.calendar_list tr td</span><span>{</span><span>
text-align</span><span>:</span><span> center</span><span>;</span><span>
height</span><span>:</span><span> 45px</span><span>;</span><span>}</span><span>
.control_bar</span><span>{</span><span>
word-spacing</span><span>:</span><span> -6px</span><span>;</span><span>}</span><span>
.control_bar span,.control_bar b</span><span>{</span><span>
display</span><span>:</span><span> inline-block</span><span>;</span><span>
text-align</span><span>:</span><span> center</span><span>;</span><span>
word-spacing</span><span>:</span><span> 0px</span><span>;</span><span>}</span><span>
.left-bt,.right-bt</span><span>{</span><span>
width</span><span>:</span><span> 50px</span><span>;</span><span>}</span><span>
#reduce_bt,#add_bt</span><span>{</span><span>
width</span><span>:</span><span> 50%</span><span>;</span><span>
height</span><span>:</span><span> 25px</span><span>;</span><span>
border-radius</span><span>:</span><span> 50%</span><span>;</span><span>}</span><span>
#reduce_bt:focus</span><span>{</span><span>
outline</span><span>:</span><span> none</span><span>;</span><span>}</span><span>
#add_bt:focus</span><span>{</span><span>
outline</span><span>:</span><span> none</span><span>;</span><span>}</span><span>
#current_date</span><span>{</span><span>
width</span><span>:</span><span> 250px</span><span>;</span><span>}</span><span>
#resetBt</span><span>{</span><span>
display</span><span>:</span><span> block</span><span>;</span><span>
text-align</span><span>:</span><span> center</span><span>;</span><span>
color</span><span>:</span><span> #fff</span><span>;</span><span>
cursor</span><span>:</span><span> pointer</span><span>;</span><span>
width</span><span>:</span><span> 120px</span><span>;</span><span>
line-height</span><span>:</span><span> 40px</span><span>;</span><span>
background-color</span><span>:</span><span> #FF7F27</span><span>;</span><span>
margin</span><span>:</span><span> 0 auto</span><span>;</span><span>}</span><span>
#date_list tr td:hover</span><span>{</span><span>
background-color</span><span>:</span><span> #ccc</span><span>;</span><span>
cursor</span><span>:</span><span> default</span><span>;</span><span>}</span><span></</span><span>style</span><span>></span><span></</span><span>head</span><span>></span><span><</span><span>body</span><span>></span><span><</span><span>div </span><span>class</span><span>="calendar_wrap"</span><span>></span><span><</span><span>div </span><span>class</span><span>="control_bar"</span><span>></span><span><</span><span>span </span><span>class</span><span>="left-bt"</span><span>><</span><span>input </span><span>type</span><span>="button"</span><span> id</span><span>="reduce_bt"</span><span> value</span><span>="<"</span><span>></</span><span>span</span><span>></span><span><</span><span>b </span><span>id</span><span>="current_date"</span><span>></span>2017-02<span></</span><span>b</span><span>></span><span><</span><span>span </span><span>class</span><span>="right-bt"</span><span>><</span><span>input </span><span>type</span><span>="button"</span><span> id</span><span>="add_bt"</span><span> value</span><span>=">"</span><span>></</span><span>span</span><span>></span><span></</span><span>div</span><span>></span><span><</span><span>table </span><span>class</span><span>="calendar_list"</span><span> cellspacing</span><span>="0"</span><span>></span><span><</span><span>thead</span><span>></span><span><</span><span>tr</span><span>></span><span><</span><span>td</span><span>></span>日<span></</span><span>td</span><span>></span><span><</span><span>td</span><span>></span>一<span></</span><span>td</span><span>></span><span><</span><span>td</span><span>></span>二<span></</span><span>td</span><span>></span><span><</span><span>td</span><span>></span>三<span></</span><span>td</span><span>></span><span><</span><span>td</span><span>></span>四<span></</span><span>td</span><span>></span><span><</span><span>td</span><span>></span>五<span></</span><span>td</span><span>></span><span><</span><span>td</span><span>></span>六<span></</span><span>td</span><span>></span><span></</span><span>tr</span><span>></span><span></</span><span>thead</span><span>></span><span><</span><span>tbody </span><span>id</span><span>="date_list"</span><span>></</span><span>tbody</span><span>></span><span></</span><span>table</span><span>></span><span></</span><span>div</span><span>></span><span><</span><span>span </span><span>id</span><span>="resetBt"</span><span>></span>回到现在日期<span></</span><span>span</span><span>></span><span><</span><span>script </span><span>type</span><span>="text/javascript"</span><span>></span><span>var</span><span> dateScreen </span><span>=</span><span> document.getElementById(</span><span>‘</span><span>current_date</span><span>‘</span><span>);</span><span>//</span><span>获取显示当前年份月份的div</span><span>var</span><span> reduceBt </span><span>=</span><span> document.getElementById(</span><span>‘</span><span>reduce_bt</span><span>‘</span><span>);</span><span>//</span><span>获取减少月份的按钮</span><span>var</span><span> addBt </span><span>=</span><span> document.getElementById(</span><span>‘</span><span>add_bt</span><span>‘</span><span>);</span><span>//</span><span>获取增加月份的按钮</span><span>var</span><span> dateList </span><span>=</span><span> document.getElementById(</span><span>‘</span><span>date_list</span><span>‘</span><span>);</span><span>//</span><span>获取显示所有日期部分</span><span>var</span><span> resetBt </span><span>=</span><span> document.getElementById(</span><span>‘</span><span>resetBt</span><span>‘</span><span>);</span><span>//</span><span>获取重设按钮</span><span>//</span><span>定义好每月的日期总数 总数按js 获取月份数值的下标方式储存</span><span>var</span><span> overall_date </span><span>=</span><span> [</span><span>31</span><span>,</span><span>28</span><span>,</span><span>31</span><span>,</span><span>30</span><span>,</span><span>31</span><span>,</span><span>30</span><span>,</span><span>31</span><span>,</span><span>31</span><span>,</span><span>30</span><span>,</span><span>31</span><span>,</span><span>30</span><span>,</span><span>31</span><span>];
</span><span>var</span><span> add_date </span><span>=</span><span>1</span><span>;</span><span>//</span><span>定义添加日期数的初始化</span><span>//</span><span>初始化日历</span><span>//</span><span>获取现在的日期</span><span>var</span><span> now_date </span><span>=</span><span>new</span><span> Date();
</span><span>var</span><span> nowFullYear </span><span>=</span><span> now_date.getFullYear();
</span><span>var</span><span> nowMonth </span><span>=</span><span> now_date.getMonth();
</span><span>//</span><span>执行日历输出函数</span><span> printCalendar();
</span><span>//</span><span>-----------------------------------</span><span>//</span><span>月份减少按钮点击事件</span><span> reduceBt.onclick </span><span>=</span><span>function</span><span>(){
nowMonth </span><span>=</span><span> nowMonth </span><span>-</span><span>1</span><span>;
</span><span>if</span><span> (nowMonth </span><span>==</span><span>-</span><span>1</span><span>) {
nowFullYear </span><span>=</span><span> nowFullYear </span><span>-</span><span>1</span><span>;
nowMonth </span><span>=</span><span>11</span><span>;
}
clearRows();
printCalendar();
}
</span><span>//</span><span>增加月份按钮点击事件</span><span> addBt.onclick </span><span>=</span><span>function</span><span>(){
nowMonth</span><span>+=</span><span>1</span><span>;
</span><span>if</span><span> (nowMonth </span><span>==</span><span>12</span><span>) {
nowFullYear</span><span>+=</span><span>1</span><span>;
nowMonth </span><span>=</span><span>0</span><span>;
}
clearRows();
printCalendar();
}
</span><span>//</span><span>重设按钮点击事件</span><span> resetBt.onclick </span><span>=</span><span>function</span><span>(){
</span><span>var</span><span> resetDate </span><span>=</span><span>new</span><span> Date();
nowFullYear </span><span>=</span><span> resetDate.getFullYear();
nowMonth </span><span>=</span><span> resetDate.getMonth();
clearRows();
printCalendar();
}
</span><span>function</span><span> printCalendar(){
</span><span>var</span><span> printDate </span><span>=</span><span>new</span><span> cur_date(nowFullYear,nowMonth);</span><span>//</span><span>实例cur_date方法</span><span>var</span><span> printFirstDay </span><span>=</span><span> printDate.firstDay;</span><span>//</span><span>获取要输出月份第一天的星期</span><span>var</span><span> printTotalDate </span><span>=</span><span> printDate.totalDate;</span><span>//</span><span>获取输出日期的总数</span><span>var</span><span> printMonth </span><span>=</span><span> printDate.cur_month;</span><span>//</span><span>获取输出的月份</span><span> (printMonth </span><span>>=</span><span>9</span><span>)</span><span>?</span><span>(printMonth </span><span>=</span><span> (printMonth </span><span>+</span><span>1</span><span>)):(printMonth </span><span>=</span><span> (</span><span>"</span><span>0</span><span>"</span><span>+</span><span> (printMonth </span><span>+</span><span>1</span><span>)));
</span><span>//</span><span>调整月份的显示格式</span><span>var</span><span> printYear </span><span>=</span><span> printDate.cur_year;</span><span>//</span><span>获取输出的年份</span><span>var</span><span> totalRows </span><span>=</span><span> Math.ceil((printTotalDate </span><span>+</span><span> (printFirstDay </span><span>-</span><span>1</span><span>)) </span><span>/</span><span>7</span><span>) </span><span>+</span><span>1</span><span>;
</span><span>//</span><span>获取行数</span><span>//</span><span>利用天数除以7天获得行数并将它向上去整 但是上限是5</span><span>//</span><span>而考虑到某些月会有6行所以在总行数里面加1 以防万一</span><span>//</span><span>开始输出</span><span>//</span><span>首先显示出年和月</span><span> dateScreen.innerText </span><span>=</span><span> printYear </span><span>+</span><span>"</span><span>-</span><span>"</span><span>+</span><span> printMonth;
</span><span>//</span><span>开始输出日期</span><span>for</span><span> (</span><span>var</span><span> i </span><span>=</span><span>0</span><span>; i </span><span><</span><span> totalRows; i</span><span>++</span><span>) {
dateList.insertRow(i);
</span><span>for</span><span> (</span><span>var</span><span> j </span><span>=</span><span>0</span><span>; j </span><span><</span><span>7</span><span>; j</span><span>++</span><span>) {
</span><span>//</span><span>当天数总量大于额定总量时先终止内部循环</span><span>if</span><span> (add_date </span><span>></span><span> printTotalDate) {
</span><span>break</span><span>;
}
dateList.rows[i].insertCell(j);
</span><span>//</span><span>改变周日和周六的文字颜色</span><span>if</span><span> (j </span><span>==</span><span>0</span><span>) {
dateList.rows[i].cells[j].style.color </span><span>=</span><span>"</span><span>red</span><span>"</span><span>;
dateList.rows[i].cells[j].style.fontWeight </span><span>=</span><span>"</span><span>bold</span><span>"</span><span>;
}</span><span>else</span><span>if</span><span>(j </span><span>==</span><span>6</span><span>){
dateList.rows[i].cells[j].style.color </span><span>=</span><span>"</span><span>green</span><span>"</span><span>;
dateList.rows[i].cells[j].style.fontWeight </span><span>=</span><span>"</span><span>bold</span><span>"</span><span>;
}
</span><span>if</span><span> (i </span><span>==</span><span>0</span><span>&&</span><span> j </span><span>>=</span><span> printFirstDay) {
</span><span>//</span><span>当此时是第一行时而且单元格下标大于等于当前月第一天的星期就开始为单元格填入文本</span><span> dateList.rows[i].cells[j].innerText </span><span>=</span><span> add_date;
add_date</span><span>++</span><span>;
}</span><span>else</span><span>if</span><span>(i </span><span>></span><span>0</span><span>){
</span><span>//</span><span>第一行以后的单元格就按循环添加即可</span><span> dateList.rows[i].cells[j].innerText </span><span>=</span><span> add_date;
add_date</span><span>++</span><span>;
}
}
}
add_date </span><span>=</span><span>1</span><span>;</span><span>//</span><span>输出完把日期总数重新赋值为1</span><span> }
</span><span>//</span><span>获取当前年、月、第一天是星期几、日期总数</span><span>function</span><span> cur_date(curYear,curMonth){
</span><span>this</span><span>.cur_firstDate </span><span>=</span><span>new</span><span> Date(curYear,curMonth,</span><span>1</span><span>);</span><span>//</span><span>获取现在日期的第一天</span><span>this</span><span>.cur_year </span><span>=</span><span> curYear;</span><span>//</span><span>获取当前的年</span><span>this</span><span>.cur_month </span><span>=</span><span> curMonth;</span><span>//</span><span>获取当前的月</span><span>this</span><span>.totalDate </span><span>=</span><span> is_leapYear(curYear,curMonth);</span><span>//</span><span>获取总天数</span><span>this</span><span>.firstDay </span><span>=</span><span>this</span><span>.cur_firstDate.getDay()</span><span>//</span><span>获取每个月的第一天是星期几</span><span> }
</span><span>//</span><span>判断今年是否为闰年</span><span>function</span><span> is_leapYear(target_year,target_month){
</span><span>if</span><span> ((target_month </span><span>==</span><span>1</span><span>) </span><span>&&</span><span> (target_year </span><span>%</span><span>4</span><span>==</span><span>0</span><span>) </span><span>&&</span><span> ((target_year </span><span>%</span><span>100</span><span>!=</span><span>0</span><span>) </span><span>||</span><span> (target_year </span><span>%</span><span>400</span><span>!=</span><span>0</span><span>))) {
</span><span>//</span><span>当前月是2月且当前年是闰年</span><span>return</span><span>29</span><span>;
}</span><span>else</span><span>{
</span><span>//</span><span>其他月按正常日期总数输出</span><span>return</span><span> overall_date[target_month];
}
}
</span><span>function</span><span> clearRows(){
</span><span>var</span><span> rowsNum </span><span>=</span><span> dateList.rows.length;
</span><span>while</span><span>(rowsNum </span><span>></span><span>0</span><span>){
dateList.deleteRow(rowsNum </span><span>-</span><span>1</span><span>);
rowsNum</span><span>--</span><span>;
}
}
</span><span></</span><span>script</span><span>></span><span></</span><span>body</span><span>></span><span></</span><span>html</span><span>></span>
原文：http://www.cnblogs.com/stitchgogo/p/6363431.html
【说明】：本文章由站长整理发布，文章内容不代表本站观点，如文中有侵权行为，请与本站客服联系(QQ:254677821)！