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();
}
}
贴在这里先，慢慢优化。
时间： 2024-12-12 04:28:49