来源:flash,as,js兴趣爱好者js一个超炫的日历特效
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>日历 - 插件 演示 by 阿里西西特效 www.flash14.com</title>
<style>
* {padding:0;margin:0;font-size:12px;}
.fl {float:left}
.fr {float:right}
.dn {display:none}
/*日历 begin*/
.data_box{width:260px; }
.showDate {width:248px;height:30px;line-height:30px;padding:0 5px;border:1px solid #e1e1e1;color:#999;display:block;cursor:pointer}
.show_mn{text-align:center;padding:0 20px;}
.sel_date{margin-top:10px;border:1px solid #999;padding:3px}
.data_table{width:100%;margin-top:10px;}
.data_table td{text-align:center;cursor:pointer;height:24px;font-size:14px;}
.data_table td.active{color:#fff;background-color:#999}
.data_table td.hover{color:blue;}
.showDate2{width:35px;padding:3px 5px;color:#999;border:1px solid #e1e1e1;text-align:center}
.showDate2.active{border:1px solid #c50000; }
.prev_m,.next_m{width:10px;height:22px;display:block;background-color:#0094ff;color:#fff;cursor:pointer;text-align:center;font: bold 12px/22px "宋体"}
.prev_y,.next_y{width:18px;height:22px;display:block;background-color:#0094ff;color:#fff;cursor:pointer;text-align:center;font: bold 12px/22px "宋体";margin:0 5px;}
</style>
<script src="js/base.js" type="text/javascript"></script>
<script>
LiChang = {
getByClass: function (oPare, cla) {
var oChild = oPare.getElementsByTagName("*");
var arr = [];
for (var i = 0; i < oChild.length; i++) {
var arrCla = oChild[i].className.split(" ");
var j;
for (var j in arrCla) {
if (arrCla[j] == cla) {
arr.push(oChild[i]);
break;
}
}
}
return arr;
}
}
function showDate(option) {
this.obj = document.getElementById(option.id);
}
showDate.prototype.init = function () {
var _self = this;
_self.dateText = LiChang.getByClass(_self.obj, "showDate")[0];
_self.dateBox = LiChang.getByClass(_self.obj, "sel_date")[0];
_self.yearBox = LiChang.getByClass(_self.obj, "year")[0];
_self.mnBox = LiChang.getByClass(_self.obj, "month")[0];
_self.dataTable = LiChang.getByClass(_self.dateBox, "data_table")[0];
_self.tbody = _self.dataTable.tBodies[0];
_self.td = _self.tbody.getElementsByTagName("td");
_self.prevM = LiChang.getByClass(_self.dateBox, "prev_m")[0];
_self.nextM = LiChang.getByClass(_self.dateBox, "next_m")[0];
_self.prevY = LiChang.getByClass(_self.dateBox, "prev_y")[0];
_self.nextY = LiChang.getByClass(_self.dateBox, "next_y")[0];
//显示日历
_self.dateText.onclick = function () {
_self.changeDefault(this);
_self.show();
}
//点击空白 隐藏日历
document.onclick = function (event) {
event = event || window.event;
var Target = event.target || event.srcElement;
_self.hide(event, Target, this);
}
//点击选择日期
