JS日历效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>日历</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

    <script type="text/javascript" src="js/jquery-1.7.min.js"></script>

    <script language="JavaScript" type="text/javascript">
        function isIe() {
            var i = navigator.userAgent.toLowerCase().indexOf("msie");
            return i >= 0;
        }

        function isFireFox() {
            var ii = navigator.userAgent.toLowerCase().indexOf("firefox");
            return ii >= 0;
        }

        
        var arrmonths = new Array(20, 15, 15, 20, 20, 17, 15, 16, 15, 26, 15, 15);
        var months = new Array("一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二");
        var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
        var days = new Array("日", "一", "二", "三", "四", "五", "六");
        var classTemp;
        var today = new getToday();
        var year = today.year;
        var month = today.month;
        var date = today.date
        var newCal;
        //添加
        var month1 = today.month + 1;

        var today1 = new Array("星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");

        var dateDisplay = today1[date]; //星期几
        var dayDisplay = today.day; //几号

        function getDays(month, year) {
            if (1 == month) return ((0 == year % 4) && (0 != (year % 100))) || (0 == year % 400) ? 29 : 28;
            else return daysInMonth[month];
        }

        function getToday() {
            this.now = new Date();
            this.year = this.now.getFullYear();
            this.month = this.now.getMonth();
            this.day = this.now.getDate();
            this.date = this.now.getDay();

        }

        function Calendar() {
            newCal = new Date(year, month, 1);
            today = new getToday();

            var day = -1;
            var startDay = newCal.getDay();
            var endDay = getDays(newCal.getMonth(), newCal.getFullYear());
            var daily = 0;

            if ((today.year == newCal.getFullYear()) && (today.month == newCal.getMonth())) {
                day = today.day;
            }

            var caltable = document.all.caltable.tBodies.calendar;
            //var caltable = document.getElementById("caltable").tBodies.calendar;
            var intDaysInMonth = getDays(newCal.getMonth(), newCal.getFullYear());

            var plustemp = 0;
            var isplus = 0;
            for (var intWeek = 0; intWeek < caltable.rows.length; intWeek++)
                for (var intDay = 0; intDay < caltable.rows[intWeek].cells.length; intDay++) {

                var cell = caltable.rows[intWeek].cells[intDay];
                //alert(cell.innerHTML);
                var montemp = (newCal.getMonth() + 1) < 10 ? ("0" + (newCal.getMonth() + 1)) : (newCal.getMonth() + 1);

                if ((intDay == startDay) && (0 == daily)) { daily = 1; }

                var daytemp = daily < 10 ? ("0" + daily) : (daily); //日期

                var d = "<" + newCal.getFullYear() + "-" + montemp + "-" + daytemp + ">";

                if (day == daily) {
                    cell.className = "DayNow";
                } else if (intDay == 6) {
                    cell.className = "DaySat";
                    if (daily == arrmonths[month])
                        plustemp = 2;
                } else if (intDay == 0) {
                    cell.className = "DaySun";
                    if (daily == arrmonths[month])
                        plustemp = 1;
                } else {
                    cell.className = "Day";


                }

                if ((daily > 0) && (daily <= intDaysInMonth)) {
                    var zsri = arrmonths[month] + plustemp;

                    if (daily <= zsri) {
                        cell.className = "CalendarZqTD1";
                    } else {
                        //cell.className="Calendar";
                        cell.className = "CalendarZqTD";
                    }
                    if (day == daily) {
                        cell.className = "DayNow";
                    }

                    //FF浏览器不支持innerText
                    /*if ($.browser.msie)
                        cell.innerText = daily;
                    else
                        cell.textContent = daily;*/
                    if (isIe()) {
                        cell.innerText = daily;
                     }
                     else {
                        cell.textContent = daily;
                    }

                    daily++;
                } else {
                    cell.className = "CalendarTD"; //CalendarTD
                    cell.innerText = "";
                }
            }
            //document.all.year.value=year;
            //document.all.month.value=month+1;
        }

        function subMonth() {
            if ((month - 1) < 0) {
                month = 11;
                year = year - 1;
            } else {
                month = month - 1;
            }
            Calendar();
        }

        function addMonth() {
            if ((month + 1) > 11) {
                month = 0;
                year = year + 1;
            } else {
                month = month + 1;
            }
            Calendar();
        }



        /*************************友情提示信息  开始**************************/
        //当前日期
        var nowday = today.day;

        //距离申报期结束还有多少天
        var endnsriq = arrmonths[month] - today.day;
        if (today.day <= arrmonths[month]) {
            var yqtsmsg = '本月申报期为<span class="sbfont">' + arrmonths[month] + '</span>号。<br/>离申报期结束还有<span  class="sbfont">' + endnsriq + '</span>天!';
        }
        else {
            var yqtsmsg = "本月申报期已过。";
        }
        /*************************友情提示信息  结束**************************/
    </script>

    <style type="text/css">
        body
        {
            margin: 0px;
            padding: 0px;
        }
        table
        {
            border-collapse: collapse;
        }
        .Calendar
        {
            border: 0 dotted #1C6FA5;
            color: #AAAAAA;
            font-family: "宋体" ,arial;
            text-decoration: none;
            180px;
            margin: 0 auto;
        }
        .Calendar tr td
        {
            border: 1px solid #E2F5FC;
            font-family: "宋体" ,arial;
            font-size: 12px;
            text-align: center;
        }
        .CalendarTD
        {
            color: #AAAAAA;
            11%;
        }
        .CalendarZqTD
        {
            11%;
            color: #000;
            height: 22px;
        }
        .CalendarZqTD1
        {
            color: #FE0000;
            11%; height: 22px;
        }

        .DaySat
        {
            12%;
            height: 22px;
            color: #243f65;
            text-decoration: none;
        }
        .DaySun
        {
            text-align: center;
            12%;
            height: 22px;
            color: #243f65;
            text-decoration: none;
        }
        .DayNow
        {
            11%;
            height: 22px;
            color: #fff;
            background:#FF6600;
        }
        .DayTitle
        {
            text-align: center;
            11%;
            height: 22px;
            color: #fff;
            background:#333333;
        }
        .DaySatTitle
        {
            text-align: center;
            12%;
            height: 22px;
            color: #fff;
            font-weight: bold;
            text-decoration: none;
            background:#333333;
        }
        .DaySunTitle
        {
            color: #fff;
            font-weight: bold;
            height: 18px;
            text-align: center;
            text-decoration: none;
            12%;
            background:#333333;
        }
        .DayButton
        {
            font-family: Webdings;
            color: #243f65;
            cursor: hand;
            font-weight: bold;
            text-decoration: none;
        }
        .newmonth
        {
            clear: both;
            text-align: center;
            180px;
            margin: 5px auto;
            line-height: 22px;
            font-weight: bold;
            font-size:12px;
        }
        .nsdate
        {
            font-size: 10px;
            color: #1A56A8;
        }
        #yqts
        {
            font-size: 13px;
            margin: 0px auto;
            170px;
            padding: 5px;
            line-height:18px;
            text-align:center;
        }
        .sbfont
        { font-weight:bold; margin:0px 3px;}
    </style>
</head>
<body style="background-color: transparent;">
    <div style="overflow: hidden; height: 210px; 180px; margin:0 auto;">
        <div class="newmonth">

            <script language="JavaScript" type="text/javascript">
                document.write("" + year + "年");
                document.write(month1 + "月" + dayDisplay + "日");
                document.write("&nbsp;&nbsp;" + dateDisplay);
            </script>

        </div>
        <table cellspacing="0" cellpadding="0" border="0" class="Calendar" id="caltable">
            <thead>
                <tr valign="middle" align="right">

                    <script language="JavaScript" type="text/javascript">
                        document.write("<TD class="DaySunTitle" id=diary>" + days[0] + "</TD>");
                        for (var intLoop = 1; intLoop < days.length - 1; intLoop++)
                            document.write("<TD class="DayTitle" id=diary>" + days[intLoop] + "</TD>");
                        document.write("<TD class="DaySatTitle" id=diary>" + days[intLoop] + "</TD>");
                    </script>

                </tr>
            </thead>
            <tbody id="calendar" align="center">

                <script language="JavaScript" type="text/javascript">
                    for (var intWeeks = 0; intWeeks < 6; intWeeks++) {
                        document.write("<TR style='cursor:hand'>");
                        for (var intDays = 0;
                         intDays < days.length; intDays++) document.write("<TD class="CalendarTD" ></TD>");
                        document.write("</TR>");
                    }
                </script>

            </tbody>
        </table>
        <div id="yqts">

            <script type="text/javascript">
                document.write(yqtsmsg);
            </script>

        </div>

        <script language="JavaScript" type="text/javascript">
            Calendar();
        </script>

    </div>
</body>
</html>

原文地址:https://www.cnblogs.com/xinlei/p/2248431.html