数据类型详解/模块化开发日历控件/Calendar2.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>日历控件</title>
    <style>
        body{-webkit-user-select: none;}
        #calendar{width: 200px;padding: 5px;background: orange;}
        #calendar h6{font-size: 16px;background: blue;color:#FFF;height: 30px;line-height: 30px;text-align: center; padding: 0;margin: 0;position: relative;cursor: pointer;}
        #calendar h6 span{width: 35px;height: 30px;position: absolute;top:0;}
        #calendar h6 span.prev{left: 0;background: #000000;}
        #calendar h6 span.next{right: 0;background: #000000;}
        #calendar ul{padding: 0;margin: 0;list-style: none;overflow: hidden;}
        #calendar ul li{float: left;width: 26px;height: 26px;background: darkgreen;line-height: 25px;text-align: center;border: 1px solid #CCC;cursor: pointer;color: #FFF;}
    </style>
</head>
<body>
<div id="calendar">
    <h6><span class="prev">上</span>2015年9月<span class="next">下</span></h6>
    <ul>
        <li>日</li>
        <li>一</li>
        <li>二</li>
        <li>三</li>
        <li>四</li>
        <li>五</li>
        <li>六</li>
    </ul>
</div>
</body>
</html>
<script>
    var calendar=document.getElementById("calendar"),
            oUl=document.createElement("ul"),
            currentDate=new Date,//当前的日.不让它变；
            activeDate=new Date;//活动的日期,这个是不断变的；
    activeDate.setDate(1);//活动显示日期的日设置为1号；
    var diff=1-activeDate.getDay();//获取1号前面还有几个LI用来漏出上一个月的日期；；
    activeDate.setDate(diff);//算出日历的起始日期；确定后再循环出后面的日期就可以了；算出这个月要往前退几步；
    for(var i=0;i<42;i++){
        var oLi=document.createElement("li"),
                date=activeDate.getDate();
        oLi.innerHTML=date;//表示当前的这个LI是几号；
        activeDate.setDate(date+1);//让日期对象往后走一天；然后再下一次循环的时候，赋值给oLi.innerHTML
        oUl.appendChild(oLi);
    }
    calendar.appendChild(oUl);


</script>