• jQuery实现日历


    直接上代码。最简单的!第一段是HTML代码和简单的样式。

        <style>
           #TaskCalendar{ margin-left:10px; margin-right:10px; border-left:solid 1px #cccccc; border-right:solid 1px #cccccc; height:640px;}
           #TaskCalendar label,#TaskCalendar p{ border-bottom:solid 1px #cccccc;text-align:center; line-height:80px; height:80px;}
        </style>
       <div id="TaskCalendar">
                <p>
                    <a href="#" onclick="javascript:dateData(0);">&nbsp;<&nbsp;</a>&nbsp;
                    <span id="year"><%=DateTime.Now.ToString("yyyy") %></span><span id="month"><%=DateTime.Now.ToString("MM") %></span>&nbsp;<a href="#" onclick="javascript:dateData(1);">&nbsp;>&nbsp;</a>
                </p>
                <label>日</label>
                <label>一</label>
                <label>二</label>
                <label>三</label>
                <label>四</label>
                <label>五</label>
                <label>六</label>
                <div id="content">
                </div>
        </div>

    第二段是JS代码

            dateData(3);
        
            function dateData(type){
            
                var date = new Date();
                
                date = new Date($('#year').html(), parseInt($('#month').html()),0);
    
                var currentMonth = date.getMonth()+1;        //当前月
                
                var currentYear = date.getFullYear();
                
                if(type == 0){
                    if(currentMonth == 0){
                        currentYear = currentYear - 1;
                        currentMonth = 11;
                    }else{
                        currentMonth = currentMonth -1;
                    }
                }else if(type == 1){
                    if(currentMonth == 11){
                        currentYear = currentYear + 1;
                        currentMonth = 0;
                    }else{
                        currentMonth = currentMonth +1;
                    }
                }
                
                date = new Date(currentYear, currentMonth,0);
                
                var currentMaxDay = new Date(date.getFullYear(), date.getMonth() + 1,0).getDate();  //当前月 - 最大天
                
                var prevMaxDay = new Date(date.getFullYear(), date.getMonth(),0).getDate();         //上一月
                
                var nextMaxDay = new Date(date.getFullYear(), date.getMonth() + 2,0).getDate();     //下一月
                
                date.setDate(1);
                
                var currentWeek = date.getDay();    //当月1日是星期几?
                
                if(currentWeek == 0){
                    currentWeek = 7;
                }
                
                date = new Date(currentYear, currentMonth,0);
                
                var html = "";
                
                //遍历上一月
                for(var i = prevMaxDay - currentWeek + 1; i <= prevMaxDay;i++){
                    html+= "<label style='background-color:#ccc;'>" + i + "</label>";
                }
                
                //遍历当前月
                for(var j = 1;j <= currentMaxDay;j++ ){
                    html+= "<label>" + j + "</label>";
                }
                
                //遍历下一月
                for(var j = 1;j <= 42 - currentMaxDay - currentWeek ;j++ ){
                    html+= "<label style='background-color:#9C9C9C;'>" + j + "</label>";
                }
                $('#content').html(html);
                $('#year').html(date.getFullYear());
                $('#month').html(date.getMonth() + 1);
                var width = ($('#TaskCalendar').width() - 2) / 7;
                $('#TaskCalendar label').css({width,float:"left"});
            }
            $(window).resize(function() {
                var width = ($('#TaskCalendar').width() - 2) / 7;
                $('#TaskCalendar label').css({width,float:"left"});
            });

    OK!就这么多!

  • 相关阅读:
    JavaScript学习之路-语法
    JavaScript学习之路-语法
    JavaScript学习之路-为什么要学习JavaScript语法
    JavaScript学习之路-为什么要学习JavaScript语法
    net4:Panel动态添加控件及隐藏,Table动态创建表格
    net1:DateTime,Application与Session,
    C#精髓第四讲 GridView 72般绝技
    J2ME开发基本语法及小实例专题
    net6:创建Membership对象数据源的代码
    net4:GridView中的重要操作(添加checkbox,以及鼠标动作,行颜色等)
  • 原文地址:https://www.cnblogs.com/ziqixing/p/3544127.html
Copyright © 2020-2023  润新知