日历一览图

Html

Css

@import url(http://fonts.font.im/css?family=Poiret+One);
	* {
	margin:0;
	padding:0;
	font-family:'Poiret One',cursive;
	font-weight:bold;
}
table {
	display:block;
}
.year th {
	width:200px;
	height:160px;
	font-size:100px;
	line-height:160px;
}
.black {
	background:#9933cc;
	color:white;
}
.white {
	background:white;
	color:#9933cc;
	box-shadow:3px 3px 3px #ccc inset;
}
.month {
	width:200px;
	height:165px;
}
.body {
	width:804px;
	margin:auto;
	position:relative;
}
.sun {
	color:red;
}
.Fuchsia {
	color:Fuchsia;
}
th>table:hover {
	border:2px solid red;
}
.down1 {
	position:absolute;
	width:600px;
	height:495px;
	font-size:51px;
	top:100px;
	left:100px;
	z-index:999;
}

$(function() {
    var flag = 0;
    var year;
    var Day = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    var MonthAdd = [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334];
    (function createhtml() {

for (var i = 1; i <= 12; i++) {
            var index1 = $('#m' + i);
            index1.append("<colgroup>" +
                "<col id='sun'/>" +
                "<col id='mon'/>" +
                "<col id='tue'/>" +
                "<col id='wed'/>" +
                "<col id='thur'/>" +
                "<col id='fri'/>" +
                "<col id='sat'/>" +
                "</colgroup>" +
                "<tr>" +
                "<th class='sun' scope='col'>Sun</th>" +
                "<th scope='col'>Mon</th>" +
                "<th scope='col'>Tue</th>" +
                "<th scope='col'>Wed</th>" +
                "<th scope='col'>Thu</th>" +
                "<th scope='col'>Fri</th>" +
                "<th scope='col'>Sat</th>" +
                "</tr>")
            for (var j = 1; j < 7; j++) {
                index1.append("<tr></tr>")
                var index2 = index1.find('tr:last');
                for (var k = 0; k < 7; k++) {
                    index2.append('<th></th>');
                }
            }
        }
    })()
    //更改年份
    $('.year th').mousedown(function() {
        var i = (Number)($(this).html()) + 1;
        if (i > 9) {
            i = 0;
        }
        $(this).html(i);
        flag = 1;
    })

//从 1990.1.1到本月初的所有天数
    function Days(month) {
        var days = 0;
        year = '';
        for (var i = 0; i < 4; i++) {
            year += $('.year th:eq(' + i + ')').html();
        }
        year = (Number)(year);
        var i = month - 1;

days = (MonthAdd[i]);
        // alert(year)
        days = days + (year - 1990) * 365;

if (month > 2 && isLeap(year)) {
            days += 1;
        }
        if (isLeap(year)) {
            Day[1] = 29;
        } else {
            Day[1] = 28;
        }
        for (var i = 1990; i < year; i++) {
            if (isLeap(i) == true) {
                days++;
            }
        }
        return days;
    }
    //判断是否闰年
    function isLeap(year) {
        if (((year % 100 == 0) && (year % 400 == 0)) || ((year % 100 != 0) && (year % 4 == 0))) {
            result = true;
        } else
            result = false;

return result;

}
    //返回月初是星期几
    function beginOfMonth(month) {
        var days = Days(month);

var week = days % 7 + 1;
        return week;
    }
    var downflag = true;
    //放大查看与返回
    $('th>table').mousedown(function() {
        downflag ? $(this).addClass('down1') : $(this).removeClass('down1');
        downflag = !downflag;
    })

//打印日历 
    function print() {
        for (var i = 1; i <= 12; i++) {
            var week = beginOfMonth(i);
            var temp = 1;
            var month_days = Day[i - 1];
            for (var j = 1; j < 7; j++) {
                for (var k = 0; k < 7; k++) {
                    var id = $('#m' + i + ' tr:eq(' + j + ') th:eq(' + k + ')');
                    if (week != 0) {
                        id.html(' ');
                        week--;
                    } else if (month_days > 0) {

id.html(temp++)
                        month_days--;
                    } else {
                        id.html(' ');
                    }
                }
            }
        }
    }
    setInterval(function() {
        if (flag == 1) {
            print();
            flag = 0;
            console.log(Day)
        }
    }, 100);
    print();
})

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

日历一览图



代码描述：jQuery日历

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

师寇Dill

相关代码

日历一览图

最新