日历案例

<div class="con">
    <p id="title">日期：</p>

    <div class="head clearfix">
        <span>日</span><span>一</span><span>二</span><span>三</span>
        <span>四</span><span>五</span><span>六</span>
    </div>
    <div class="show clearfix"></div>
</div>

<script>
    var tit = document.getElementById("title");
    var show = document.getElementsByClassName("show")[0];
    setInterval(Today, 1000);

    function Today() {
        var today = new Date();
        var today_year = today.getFullYear();
        var today_date = today.getDate();
        var today_month = today.getMonth();
        var today_hour = today.getHours();
        var today_minute = today.getMinutes();
        var today_second = today.getSeconds();
        tit.innerHTML = "今天是：" + today_year + "-" + today_month + "-" + today_date + "  " + change(today_hour) + ":" + change(today_minute) + ":" + change(today_second);
    }
    //时间位数转换，就是当时、分、秒为个位数时前面添加0；
    function change(e) {
        if (e < 10) {
            e = "0" + e;
        }
        return e
    }
    //判断闰年，改变二月份的天数

    function cal(year,month){
        var days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
        function isLeapYear(year){
            if(year%400==0 || year%4==0 && year%100!=0){
                days[1]=29;
            }
        }
        var newDate = new Date(year,month-1,1);
        var newyear = newDate.getFullYear();
        //判断闰年
        isLeapYear(newyear);
        var newmonth = newDate.getMonth();
        var newdate = newDate.getDate();
        //判断目标月份第一天星期几
        var newday = newDate.getDay();
        console.log(newday);
        //当前月份有多少天
        var currentdays = days[newmonth];
        //添加每月一号前面的空格
        for (var j = 0; j <newday; j++) {
            var spankong = document.createElement("span");
            show.appendChild(spankong);
            console.log(j)
        }
        //添加日历里的日期
        for (var i = 0; i < currentdays; i++) {
            var spantag = document.createElement("span");
            spantag.innerHTML = i + 1;
            show.appendChild(spantag)
        }
    }
    cal(2000,2)//打印2000年2月份的日历
</script>