js写日历

       var ul = document.getElementById("dateList");
            var iNow = 0;
            canClick(iNow);
            document.getElementById("next").onclick = function () {
                canClick(++iNow);
            }
            document.getElementById("prev").onclick = function () {
                canClick(--iNow);
            }
           function canClick(n) {
                var date = new Date();
                var today = date.getDate();//1.得到今天是几号 

                date.setMonth(date.getMonth()+n,1);// 2.每月1号

                var week = date.getDay();// 3.1号是周几

                date.setMonth(date.getMonth() + 1, 0); // 下个月0号=这个月最后一天
                var allDay = date.getDate(); // 4..这个月最后一天是几号=总天数

                document.getElementsByTagName('h4')[0].innerHTML = date.getFullYear()+'年'+(date.getMonth()+1)+'月';
                ul.innerHTML="";

                //1号是星期几就要插入几个空的li
                for (var i = 0; i < week; i++) {
                    ul.innerHTML += "<li></li>";
                }
                // 插入allDay个带日期的li
                for (var j = 1; j <= allDay; j++) {
                    if (n === 0) {
                        if (j === today) {
                            ul.innerHTML += "<li class='red'>" + j + "</li>";
                        } else if ((j + week) % 7 === 0||(j + week) % 7 === 1) {
                            ul.innerHTML += "<li class='sun'>" + j + "</li>";
                        }
                        else if (j < today) {
                            ul.innerHTML += "<li class='ccc'>" + j + "</li>";
                        }

                        else {
                            ul.innerHTML += "<li>" + j + "</li>";
                        }
                    } else if (n < 0) {
                        if ((j + week) % 7 === 0||(j + week) % 7 === 1) {
                            ul.innerHTML += "<li class='sun'>" + j + "</li>";
                        }else{
                        ul.innerHTML += "<li class='ccc'>" + j + "</li>";
                        }
                    }else{
                        if ((j + week) % 7 === 0||(j + week) % 7 === 1) {
                            ul.innerHTML += "<li class='sun'>" + j + "</li>";
                        }else{
                            ul.innerHTML +=  "<li>" + j + "</li>";
                        }
                    }


                }

            }

  <div id="calendar">
            <h4>2013年10月</h4>
            <a href="javascript:;" class="a1" id="prev">上月</a>
            <a href="javascript:;" class="a2" id="next">下月</a>
            <ul class="week">
                <li>日</li>
                <li>一</li>
                <li>二</li>
                <li>三</li>
                <li>四</li>
                <li>五</li>
                <li>六</li>
            </ul>
            <ul class="dateList" id="dateList">

            </ul>
   </div>

 *{margin:0;padding:0}
        #calendar{width:210px;margin:100px auto; overflow:hidden;border:1px solid #000; padding:20px; position:relative}
        #calendar h4{ text-align:center; margin-bottom:10px}
        #calendar .a1{ position:absolute;top:20px;left:20px;}
        #calendar .a2{ position:absolute;top:20px;right:20px;}
        #calendar .week{height:30px; line-height:20px;border-bottom:1px solid #000; margin-bottom:10px}
        #calendar .week li{ float:left;width:30px;height:30px; text-align:center; list-style:none;}
        #calendar .dateList{ overflow:hidden; clear:both}
        #calendar .dateList li{float:left;width:30px;height:30px; text-align:center; line-height:30px;list-style:none;}
        #calendar .dateList .ccc{ color:#ccc;}
        #calendar .dateList .red{ background:#F90; color:#fff;}
        #calendar .dateList .sun{ color:#f00;}
        .clickColor{
            width:100px;
            height:100px;
            background:#f00;
        }

在这里插入图片描述