码迷,mamicode.com
首页 > Web开发 > 详细

JS实现日历

时间:2014-07-07 09:31:46      阅读:265      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   java   color   使用   

7.2--

以前写特效都用jquery,js使用还不熟的很,最近又在看《javascript权威指南》,正好公司的项目有个日历签到的功能,就先用js写个日历控件试试,目前还只实现了基本的功能,先贴代码:

html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <meta charset="utf-8">
 6     <link rel="stylesheet" href="css/data-plug-in.css"/>
 7 </head>
 8 <body>
 9     <div class="plug-in-date">
10             <span class="plug-in-date-reduce" id="plug-in-date-reduce"><</span>
11             <span class="plug-in-date-time"><span id="plug-in-date-year">2014</span><span id="plug-in-date-month">7</span></span>
12             <span class="plug-in-date-add" id="plug-in-date-add">></span>
13             <table class="plug-in-date-table" id="plug-in-date-table">
14             </table>
15     </div>
16     <script src="js/date-plug-in.js"></script>
17 </body>
18 </html>

CSS

.plug-in-date{width: 200px;height: 210px;position:absolute;background: #f2f2f2;font-size:13px;font-family:"微软雅黑","黑体","宋体";border-radius:10px;-moz-border-radius: 10px;z-index: 9999;}
.plug-in-date-add,.plug-in-date-reduce{width:20px;height:20px;position: absolute;background:#1B1B1D;line-height:20px;text-align:center;color:#f2f2f2;cursor:pointer;z-index: 99;border-radius:3px;-moz-border-radius: 3px;-webkit-transition:background .3s;}
.plug-in-date-reduce:hover,.plug-in-date-add:hover{background-color: #3F3A3F;}
.plug-in-date-reduce{float: left;left: 10px;top: 10px;}
.plug-in-date-add{float: right;right: 10px;top: 10px;}
.plug-in-date-time{width: 100px;height: 20px;position:absolute;top:10px;left:50px;background:#C1C9D0;line-height:20px;text-align: center;color:#4A4A4A;z-index: 9;border-radius:5px;-moz-border-radius: 5px;}
.plug-in-date-table{width: 182px;position: absolute;top: 35px;left:9px;border-collapse: collapse;}
.plug-in-date-table td,.plug-in-date-table th{width: 20px;height:20px;line-height:20px;text-align:center;border-radius: 10px;}
.plug-in-date-table th{color: #18191B;}
.plug-in-date-table td.plug-in-date-not-cur-month{color:#B3B2B0; }
.plug-in-date-table td:hover{background:#C1C9D0;cursor: pointer;}
.plug-in-date-table td.plug-in-date-cur-time{background:#C1C9D0;}

JS

/*
 *JavaScript日期显示
 *vesion:1.0.0
 *作者:陶z or Xiaoz or TaoShiFu
 *Blog地址:http://www.cnblogs.com/xiaozweb
 *创建日期:2014-7-1
 *最后修改日期:2014-7-2
 */
var dateBtnReduce,dateBtnAdd; //操作按钮
var dateYearE; //
var dateMonthE; //
var dateContent;//显示区
dateBtnReduce = document.getElementById("plug-in-date-reduce");
dateBtnAdd = document.getElementById("plug-in-date-add");
dateYearE  = document.getElementById("plug-in-date-year");
dateMonthE = document.getElementById("plug-in-date-month");
dateContent = document.getElementById("plug-in-date-table");
var datePlugIn = new DatePlugIn(); //日期操作
//后退
dateBtnReduce.onclick = function(){
    var year,month;
    year = parseInt(dateYearE.innerText);
    month = parseInt(dateMonthE.innerText);
    month = datePlugIn.reduceMonth(month);
    if(month==12) year = datePlugIn.reduceYear(year);
    dateMonthE.innerText = month;
    dateYearE.innerText = year;
    dateContent.innerHTML = new DrawDate(year,month,datePlugIn).draw();
}
//前进
dateBtnAdd.onclick = function(){
    var year,month;
    year = parseInt(dateYearE.innerText);
    month = parseInt(dateMonthE.innerText);
    month = datePlugIn.addMonth(month);
    if(month==1) year = datePlugIn.addYear(year);
    dateMonthE.innerText = month;
    dateYearE.innerText = year;
    dateContent.innerHTML = new DrawDate(year,month,datePlugIn).draw();
}
var date = new Date();
dateContent.innerHTML = (new DrawDate(date.getFullYear(),date.getMonth()+1,datePlugIn)).draw();
//图形绘制类
function DrawDate(year,month,datePlugIn){
    this.year = year;
    this.month = month;
    //绘制
    this.draw = function(){
        var htmlContent;
        var week;
        var monthNumber1,monthNumber2; //关联月天数统计
        var count1=0,count2=0,count3=0; //绘制控制
        //计算当月1号为周几
        week = datePlugIn.getWeekDayByYearAndMonthAndDay(this.year,this.month,1);
        count1 = week;
        //计算关联三个月的天数
        monthNumber1 = datePlugIn.getDayNumberByYearAndMonth((datePlugIn.reduceMonth(month)==12?datePlugIn.reduceYear(this.year):this.year),datePlugIn.reduceMonth(month));
        monthNumber2 = datePlugIn.getDayNumberByYearAndMonth(this.year,this.month);
        htmlContent =  "<tr>"+
            "<th>日</th>"+
            "<th>一</th>"+
            "<th>二</th>"+
            "<th>三</th>"+
            "<th>四</th>"+
            "<th>五</th>"+
            "<th>六</th>"+
            "</tr>";
        for(var i = 0;i<6;i++){
            htmlContent += "<tr>";
            for(var j =0 ;j<7;j++){
                    if(i==0&&j<week){
                        htmlContent += "<td class=‘plug-in-date-not-cur-month‘>"+(monthNumber1-count1+1)+"</td>";
                        count1--;
                        continue;
                    }
                    if(count2<monthNumber2){
                        htmlContent += "<td>"+(count2+1)+"</td>"
                        count2++;
                    }else{
                        htmlContent += "<td class=‘plug-in-date-not-cur-month‘>"+(count3+1)+"</td>"
                        count3++;
                    }
            }
            htmlContent +="</tr>";
        }
        return htmlContent;
    }
}
//日期操作类
function DatePlugIn(){
    var MIN_YEAR = 2000;//最小年份
    var MAX_YEAR = 2015;//最大年份
    //年份减少
    this.addYear = function(year){
        year++;
        if(year>MAX_YEAR)return MIN_YEAR;
        else return year;
    }
    //年份增加
    this.reduceYear = function(year){
        year--;
        if(year<MIN_YEAR)return MAX_YEAR;
        else return year;
    }
    //月份减少
    this.reduceMonth = function(month){
        month--;
        if(month<1)return 12;
        else return month;
    }
    //月份增加
    this.addMonth = function(month){
        month++;
        if(month>12) return 1;
        else return month;
    }
    //根据年份月份得到天数
    this.getDayNumberByYearAndMonth = function(year,month){
        var LEAP_YEAR = 0;
        var dayNumber = 0;
        if(year%4==0&&year%100!=0||year%400==0) LEAP_YEAR = 1;
        switch (month){
            case 1:case 3:case 5: case 7:case 8:case 10:case 12: dayNumber = 31;break;
            case 2:  dayNumber = 28+LEAP_YEAR;break;
            case 4:case 6:case 9:case 11: dayNumber = 30;break;
        }
        return dayNumber;
    }
    //根据年月日得到周几
    this.getWeekDayByYearAndMonthAndDay = function(year,month,day){
        var myDate=new Date();
        myDate.setFullYear(year,month-1,day);
        return myDate.getDay();
    }
}

贴在这里先,慢慢优化。

JS实现日历,布布扣,bubuko.com

JS实现日历

标签:style   blog   http   java   color   使用   

原文地址:http://www.cnblogs.com/xiaozweb/p/3820747.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!