• 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>

  • 相关阅读:
    js根据年份获取某月份有几天
    java 时间转换去杠
    简单Maven Dos命令语句
    Maven命令参数
    Redis学习推荐
    Java中Redis缓存
    oracle新建登录用户sql语句
    ORacle修改表列长度
    jsp利用application统计在线人数的方法
    Oracle之分页查询
  • 原文地址:https://www.cnblogs.com/xinlei/p/2248431.html
Copyright © 2020-2023  润新知