日历对应了 2010~2020 这 10 年间的日历数据, 星期, 几号, 和农历都一一对应. 想要更多数据只需要在 calendarSupper 原型中添加 "20xx:setMonth(20xx)," 年即可.
学习 JavaScript3 个月的小白. 最近的练手 demo 中的一部分, 觉得这个日历特别难写, 所以就给单独拉出来了 农历太复杂了, 没有固定的程式, 规律, 农历历法制定的依据是天体的运动规律, 不得不佩服祖先的智慧. 生成农历的算法是网上找的. 其他均是自己独立完成的.
标注日期功能没写, 没头绪.
兼容性问题, 在手机中打开(包括手机 UC, 微信), 以及 PC 端 IE,edge 浏览器查看效果, 日期顺序会首尾颠倒. 原因是日历数据是存储在对象中的. 对象有一个缺点无法保证对象属性的顺序. 高级的主流浏览器, chrome 等 webkit 内核浏览器以及火狐浏览器渲染正常
欢迎大神拍砖指点
html 代码
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
/* 日历 start*/
#calendar{
float:left;
margin:0px 15px 0px 0px;
width: 350px;
height: 355px;
border-radius:5px;
border:1px solid #aaa;
background-color: #fff;
}
.calenderlayout{
width: 328px;
margin:0px auto;
color:#333;
}
.dateControl>div{
margin:0px 3px;
display: inline-block;
*display: inline;
*zoom:1;
padding:5px;
border:1px solid #cecfcf;
cursor:pointer;
}
.calenderTitle{
padding-left: 20px;
line-height: 40px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom: #EAEAEA 1px solid;
background-color: #f4f5f6;
height: 40px;
}
.dateControl{
word-spacing: -8px;
padding: 10px 0 10px 0;
border-bottom:2px solid #a9cfec;
position: relative;
}
#yearShow{/* 年 */
width: 60px;
}
#monthShow{
width: 38px;
}
#signDate{
width: 72px;
}
.slt-icon:after{/* 日历选择框下拉箭头 */
margin-top: 5px;
margin-left: 6px;
content: "";
position: absolute;
/* 画三角形 */
width: 0;
height: 0;
border-top: 5px solid #c2c3c3;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
/* 画三角形 */
}
.slt-icon:hover:after{
border-top: 5px solid #a9cfec;
}
.dateControl span{
text-align: center;
line-height: 25px;
width: 15px;
height: 25px;
display: inline-block;
cursor: pointer;
*display: inline;
*zoom:1;
}
.dateControl span:hover{
color:#a9cfec;
background: #AFEEEE;
}
.week{
padding: 0px 8px;
border-bottom: 1px solid #ccc;
}
@-moz-document url-prefix(){ /*fireFox*/
.week{
/* word-spacing: 1px;*/
}
}
.week li{
margin:5px 13px;
display: inline-block;
*display: inline;
*zoom:1;
}
#calendarShow {
font-size: 12px;
}
#calendarShow td{
text-align: center;
width: 45px;
height: 46px;
}
.yearWrap,.monthWrap{
position: relative;
}
.hideList{
white-space:nowrap;/* 强制不换行 */
left:-1px;
top:30px;
position: absolute;
border:1px solid #CDC5BF;
background: #FFF;
display:none;
}
.hideList>div{
padding:2px 10px;
display: none;
}
#yearList {
width: 70px;
height: 0px;
}
#monthList{
width: 48px;
height: 0px;
}
.hideList>div:hover{
background: #EBEBEB;
}
#calendarShow tbody td:hover{
cursor:pointer;
outline: 2px solid #EEEE00;
}
#signDate:hover:after{
content: "暂未开发";
text-align: center;
line-height: 30px;
position: absolute;
top:-30px;
left: 160px;
border:1px solid #ccc;
width: 80px;
height: 30px;
color:#fff;
background-color: red;
}
/*reset.CSS start*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
padding: 0;
margin: 0;
}
body{
font-size: 12px;
font-family:"SimHei","Microsoft Yahei","Arial";
color:#666;
background: #eeedec;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset,img,button,input{
border: 0;
}
input{
font-family:"SimHei","Microsoft Yahei","Arial";
}
address,caption,cite,code,dfn,em,strong,th,var {
font-weight: normal;
font-style: normal;
}
ol,ul {
list-style: none;
}
caption,th {
text-align: left;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
}
img{
display: block;
}
.clearfix:after{
content:"";
display: block;
clear:both;
}
a{
font-family:"SimHei","Microsoft Yahei","Arial";
text-decoration: none;
color:#333;
}
/*reset.css end*/
/* 日历 end*/
</style>
<body>
<div id="calendar">
<div class="calenderTitle">日历</div>
<div class="calenderlayout">
<div class="dateControl">
<div class="yearWrap">
<div id="yearShow" class="slt-icon">* 年</div>
<div id="yearList" class="hideList">JavaScript 生成</div>
</div>
<span id="dateToLeft"><</span>
<div class="monthWrap">
<div id="monthShow" class="slt-icon">9 月</div>
<div id="monthList" class="hideList">9 月</div>
</div>
<span id="dateToRight">></span>
<div id="signDate" class="slt-icon">标注日期</div>
<div id="comeBakeToday">返回今天</div>
</div>
<div class="week">
<ul>
<li > 一</li>
<li > 二</li>
<li > 三</li>
<li > 四</li>
<li > 五</li>
<li > 六</li>
<li > 日</li>
</ul>
</div>
<table id="calendarShow"></table>
</div>
</div>
</body>
<script type="text/javascript">
/* 生成农历 start*/
var CalendarData = new Array(100);
var madd = new Array(12);
var tgString = "甲乙丙丁戊己庚辛壬癸";
var dzString = "子丑寅卯辰巳午未申酉戌亥";
var numString = "一二三四五六七八九十";
var monString = "正二三四五六七八九十冬腊";
var weekString = "日一二三四五六";
var sx = "鼠牛虎兔龙蛇马羊猴鸡狗猪";
var cYear, cMonth, cDay, TheDate;
CalendarData = new Array(0xA4B, 0x5164B, 0x6A5, 0x6D4, 0x415B5, 0x2B6, 0x957, 0x2092F, 0x497, 0x60C96, 0xD4A, 0xEA5, 0x50DA9, 0x5AD, 0x2B6, 0x3126E, 0x92E, 0x7192D, 0xC95, 0xD4A, 0x61B4A, 0xB55, 0x56A, 0x4155B, 0x25D, 0x92D, 0x2192B, 0xA95, 0x71695, 0x6CA, 0xB55, 0x50AB5, 0x4DA, 0xA5B, 0x30A57, 0x52B, 0x8152A, 0xE95, 0x6AA, 0x615AA, 0xAB5, 0x4B6, 0x414AE, 0xA57, 0x526, 0x31D26, 0xD95, 0x70B55, 0x56A, 0x96D, 0x5095D, 0x4AD, 0xA4D, 0x41A4D, 0xD25, 0x81AA5, 0xB54, 0xB6A, 0x612DA, 0x95B, 0x49B, 0x41497, 0xA4B, 0xA164B, 0x6A5, 0x6D4, 0x615B4, 0xAB6, 0x957, 0x5092F, 0x497, 0x64B, 0x30D4A, 0xEA5, 0x80D65, 0x5AC, 0xAB6, 0x5126D, 0x92E, 0xC96, 0x41A95, 0xD4A, 0xDA5, 0x20B55, 0x56A, 0x7155B, 0x25D, 0x92D, 0x5192B, 0xA95, 0xB4A, 0x416AA, 0xAD5, 0x90AB5, 0x4BA, 0xA5B, 0x60A57, 0x52B, 0xA93, 0x40E95);
madd[0] = 0;
madd[1] = 31;
madd[2] = 59;
madd[3] = 90;
madd[4] = 120;
madd[5] = 151;
madd[6] = 181;
madd[7] = 212;
madd[8] = 243;
madd[9] = 273;
madd[10] = 304;
madd[11] = 334;
function GetBit(m, n) {
return (m>> n) & 1;
}
function e2c() {
TheDate = (arguments.length != 3) ? new Date() : new Date(arguments[0], arguments[1], arguments[2]);
var total, m, n, k;
var isEnd = false;
var tmp = TheDate.getYear();
if (tmp <1900) {
tmp += 1900;
}
total = (tmp - 1921) * 365 + Math.floor((tmp - 1921) / 4) + madd[TheDate.getMonth()] + TheDate.getDate() - 38;
if (TheDate.getYear() % 4 == 0 && TheDate.getMonth()> 1) {
total++;
}
for (m = 0; ; m++) {
k = (CalendarData[m] <0xfff) ? 11 : 12;
for (n = k; n>= 0; n--) {
if (total <= 29 + GetBit(CalendarData[m], n)) {
isEnd = true; break;
}
total = total - 29 - GetBit(CalendarData[m], n);
}
if (isEnd) break;
}
cYear = 1921 + m;
cMonth = k - n + 1;
cDay = total;
if (k == 12) {
if (cMonth == Math.floor(CalendarData[m] / 0x10000) + 1) {
cMonth = 1 - cMonth;
}
if (cMonth> Math.floor(CalendarData[m] / 0x10000) + 1) {
cMonth--;
}
}
}
function GetcDateString() {
var tmp = "";
// tmp += tgString.charAt((cYear - 4) % 10);
// tmp += dzString.charAt((cYear - 4) % 12);
// tmp += "(";
// tmp += sx.charAt((cYear - 4) % 12);
// tmp += ")年";
// if (cMonth <1) {
// tmp += "(闰)";
// tmp += monString.charAt(-cMonth - 1);
// } else {
// tmp += monString.charAt(cMonth - 1);
// }
// tmp += "月";
tmp += (cDay < 11) ? "初" : ((cDay < 20) ? "十" : ((cDay < 30) ? "廿" : "三十"));
if (cDay % 10 != 0 || cDay == 10) {
tmp += numString.charAt((cDay - 1) % 10);
}
return tmp;
}
function GetLunarDay(solarYear, solarMonth, solarDay) {
//solarYear = solarYear<1900?(1900+solarYear):solarYear;
if (solarYear < 1921 || solarYear> 2020) {
return "";
} else {
solarMonth = (parseInt(solarMonth)> 0) ? (solarMonth - 1) : 11;
e2c(solarYear, solarMonth, solarDay);
return GetcDateString();
}
}
/* 生成农历 start end*/
function setMonth(year) {/* 将返回全年的日期数据 */
// var dat = new Date(year+"-01-01");
var returnData = {
"1 月":setdata(year,1),// 调用 setData 获取 1 月份数据
"2 月":setdata(year,2),
"3 月":setdata(year,3),
"4 月":setdata(year,4),
"5 月":setdata(year,5),
"6 月":setdata(year,6),
"7 月":setdata(year,7),
"8 月":setdata(year,8),
"9 月":setdata(year,9),
"10 月":setdata(year,10),
"11 月":setdata(year,11),
"12 月":setdata(year,12)
};
return returnData;
}
function setdata(_year,_month) {/* 设置日期, 将返回每个月每日的数据 */
var returnMonth = {};
var month = new Date(_year + "-" + _month +"-01");// 获取每月的 1 日
var dat = month;
var curMonthDays = new Date(month.getFullYear(),(month.getMonth()+1),0).getDate();// 获取每月的天数
for(var i = 0; i <curMonthDays; i++) {
returnMonth[dat.getDate()] = {
day : dat.getDate(),// 日期
week : dat.getDay(),// 周几
CTC : GetLunarDay(dat.getFullYear(),(dat.getMonth()+1),dat.getDate())// 调用 CTC.js 的方法获取农历
}
dat.setDate(dat.getDate()+1);// 自增当月日期
}
return returnMonth;
}
function calendarSupper(){
}
calendarSupper.prototype = {
dateSign : {
year:new Date().getFullYear(),// 年份, 输出如: 2016
month:new Date().getMonth()// 基数为 0. 如 9 月, 输出 8
},
yearClickSign : true,
monthClickSign : true,
timer :null,
signDateinfo:{},
sourse : {
2010:setMonth(2010),
2011:setMonth(2011),
2012:setMonth(2012),
2013:setMonth(2013),
2014:setMonth(2014),
2015:setMonth(2015),// 获取全年数据
2016:setMonth(2016),
2017:setMonth(2017),
2018:setMonth(2018),
2019:setMonth(2019),
2020:setMonth(2020)
}
}
function praperaCalenderData() {// 准备单月日历数据
var inherit = new calendarSupper();/* 继承 */
var sourse = inherit.sourse;/* 获取数据源 */
var showDateData = {};
var yearString = inherit.dateSign["year"];
var monthString = (inherit.dateSign["month"] + 1) + "月";
for(var year in sourse) {
if(year == yearString){
var thisYear = sourse[year];
for(var month in thisYear){
if(month == monthString){
showDateData = thisYear[month];
break;
}
}
}
}
randerCalender(showDateData);
}
todayflag = 1;
function randerCalender(data){/* 渲染表格 */
//data 的值为一整个月的数据
var inherit = new calendarSupper();
// console.log(data);
var showTable = document.getElementById('calendarShow');
// newLine 计算当月 1 号是星期几, 如果是周六, 则只需要打印 2 个 td, 所以将 newLine 设置为 2, 在后面的生成 tr 的 for 循环中
// 使用 newLineSign 自增来与 newLine 进行判断, 如果 2 个变量相等, 就换新的一行,
// 同时在打印第二行时就将 newLine 值设置为 7, 来达到每行打印 7 个 td 的目的;
var today = new Date().getDate();
showTable.innerHTML = "";
var newLine = data[1]["week"] ? ((7-(data[1]["week"]))+1) : 1;// 获取当月 1 号是星期几
var newLineSign = 1;
var emptyTd = 7 - newLine;// 空 Td 的数量
var praperaDiv = document.createElement("div");
var thisYearDayNumAll = Object.keys(data).length;// 获取对象属性的数量, 即这个月的天数, 用于解决打印空的第六行 tr 的 bug
//keys 可用 getOwnProperyNames()代替, 前者只输出可枚举属性, 后者把不可枚举属性也输出了
var daySign = 0;
var tr = showTable.insertRow(0);
for(var i = 0; i < emptyTd; i++){// 为首行添加空的 td 以填充格式
td = tr.insertCell(i);
td.innerHTML = "";
td.style.visibility = "hidden";
}
for(var day in data){ // 循环数据源
td = tr.insertCell();// 插入新列(td)
if(day == today){
if(todayflag == 1){
td.style.outline = "2px solid #EEEE00";
todayflag = 0;
};
}
var clone = praperaDiv.cloneNode(false);// 克隆准备好的空 Div. 克隆比 createElement(div)要快
clone.innerHTML = data[day]["CTC"];
td.innerHTML = data[day]["day"];// 写入日期
td.dataset.day = data[day]["day"];
td.dataset.year = inherit.dateSign["year"];
td.dataset.month = inherit.dateSign["month"];
td.dataset.checked = false;
td.appendChild(clone);
daySign++;
thisYearDayNumAll--;
if(newLineSign == newLine){
if(thisYearDayNumAll != 0){// 如果没有这个判断, 在某些特殊的月份, 比如 2016 年 7 月会打印 6 行 tr, 第六行 tr 是空的.
tr = showTable.insertRow(showTable.length);
newLineSign = 0;
newLine = 7;
}
}
newLineSign++;
}
// 一般情况下, tr 会有 5 行, 但有这样一个情况, 就是大月 (31 天) 当月的 1 号是周六日, 那么 tr 就有 6 行.
// 所以获取 Tr 的 length, 如果为 6, 日历的外包裹要增加 42PX(一个 td 高度为 42px)
var trNum = showTable.getElementsByTagName('tr');
if(trNum.length == 6) {
var calendar = document.getElementById('calendar');
calendar.style.height = 397 + "px";
}
if(trNum.length < 6) {// 如果小于 6 行, 恢复原来的 5 行的高度
var calendar = document.getElementById('calendar');
calendar.style.height = 355 + "px";
}
tdClickHlight();// 调用 td 点击高亮函数
}
function setConcrolShow() {// 设置年份的控制菜单
var yearShow = document.getElementById("yearShow");
var monthShow = document.getElementById('monthShow');
var dat = new Date();
monthShow.dataset.month = (dat.getMonth() + 1);
yearShow.dataset.year = dat.getFullYear();// 设置 dataSet 值
setControl();
yearHideList();
}
function yearHideList(){// 写入年列表
var yearList = document.getElementById('yearList');
var inherit = new calendarSupper();
var yearString = "";
var flag = true;
for(var year in inherit.sourse){// 循环数据源找出年份
yearString += "<div display='none'; data-year="+year+">"+year+"年</div>";
}
yearList.innerHTML = yearString;// 将年份写入 Dom 中
MonthHideList();
}
function yearShowHover() { // 点击年份菜单时的逻辑处理
var inherit = new calendarSupper();
var yearShow = document.getElementById("yearShow");
var yearList = document.getElementById("yearList");
var countYearNum = Object.keys(inherit.sourse).length;// 统计源数据有多少年的数据, 用于设置年份下拉列表高度
var yearShowHeight = countYearNum * 20;// 年份下拉列表高度
addEventHandler(yearShow,"click",function() {// 为 yearShow 绑定点击事件
// yearShow.onclick = function() {
if(inherit.yearClickSign){
inherit.yearClickSign = false;
yearList.style.display = "block";
yearList.style.height = 0 + "px";//js 无法获取 css 值, 所以预先设置一个 height
movement(yearList,yearShowHeight);// 调用缓冲运动
setTimeout(function() {
var hideYearDiv = yearList.getElementsByTagName('div');
for(var i = 0; i <hideYearDiv.length; i++) {
hideYearDiv[i].style.display = "block";
}
changeYear();
},500);
}else{
var hideYearDiv = yearList.getElementsByTagName('div');
for(var i = 0; i < hideYearDiv.length; i++) {
hideYearDiv[i].style.display = "none";
}
yearList.style.height = yearShowHeight + "px";
movement(yearList,0);
inherit.yearClickSign = true;
}
})
}
function changeYear() {
var inherit = new calendarSupper();
var yearList = document.getElementById("yearList");
var hideYearDiv = yearList.getElementsByTagName('div');
var monthShow = document.getElementById('monthShow');
console.log(inherit.dateSign["year"]);
for(var i = 0; i < hideYearDiv.length; i++) {
hideYearDiv[i].onclick = function() {
inherit.dateSign["year"] = parseInt(this.getAttribute("data-year"));// 修改父类年份标记
inherit.dateSign["month"] = parseInt(monthShow.getAttribute("data-month")-1);// 修改父类月份标记
setControl();
praperaCalenderData();// 调用 praperaCalenderDath 函数, 准备选中的年份数据以供渲染函数使用
yearList.style.display = "none";
}
}
}
function MonthHideList() {// 设置月份隐藏列表
var inherit = new calendarSupper();
var monthList = document.getElementById('monthList');
var yearShow = document.getElementById("yearShow");
var yeardataSet = yearShow.dataset.year;// 获取选中年份的 dataset 值
var monthString = "";
for(var year in inherit.sourse) {// 循环数据源, 找出选中年份对应的月份列表
if(year == yeardataSet) {
var thisYear = inherit.sourse[year];// 将找到的选中年份的数据源赋值给 thisYear
for(var month in thisYear) {// 循环 thisYear, 找到月份列表
//month 的值是 "xx 月", 但设置 dataset 是最好只要月份的数字,
// 所以用正则表达式来筛选, 但其返回的是数组, 所以用 toString()将数组转化成字符串, 但转化成的字符串是 "10,," 这类型的, 所以用 parseInt()将字符串转化成数字
monthString += "<div data-month='"+parseInt(month.match(/[^ 月]*/g).toString())+"'>"+month + "</div>";
}
break;// 跳出 For 循环
}
}
monthList.innerHTML = monthString;// 写入月份列表
}
function monthShowHover() {// 点击月份菜单时的逻辑处理
var inherit = new calendarSupper();
var monthShow = document.getElementById('monthShow');
var monthList = document.getElementById('monthList');
monthShow.onclick = function() {
if(inherit.monthClickSign){
inherit.monthClickSign = false;
monthList.style.display = "block";
monthList.style.height = 0 + "px";
movement(monthList,240);// 调用缓冲运动
setTimeout(function() {
var hideMonthDiv = monthList.getElementsByTagName('div');
for(var i = 0; i <hideMonthDiv.length; i++) {
hideMonthDiv[i].style.display = "block";
}
},500);
changeMonth();
}else{
var hideMonthDiv = monthList.getElementsByTagName('div');
for(var i = 0; i < hideMonthDiv.length; i++) {
hideMonthDiv[i].style.display = "none";
}
monthList.style.height = 240 + "px";
movement(monthList,0);
inherit.monthClickSign = true;
}
}
}
function changeMonth() {// 月份列表改变逻辑处理
var inherit = new calendarSupper();
var monthList = document.getElementById("monthList");
var hideMonthDiv = monthList.getElementsByTagName('div');
var yearShow = document.getElementById('yearShow');
for(var i = 0; i < hideMonthDiv.length; i++) {
hideMonthDiv[i].onclick = function() {
monthList.style.display = "none";
inherit.dateSign["year"] = parseInt(yearShow.getAttribute("data-year"));
inherit.dateSign["month"] = parseInt(this.getAttribute("data-month")-1);
setControl();
praperaCalenderData();
}
}
}
function clickDateToLeft() {// 日期左箭头点击逻辑处理
var inherit = new calendarSupper();
var dat = new Date();
var monthSign = 0;// 原型上的月份标记
var yearSign = 0;// 原型上的年份标记
var toLeftBt = document.getElementById("dateToLeft");// 按钮
toLeftBt.onclick = function() {
monthSign = inherit.dateSign["month"];// 获取原型上记录的月份值
yearSign = inherit.dateSign["year"];// 获取原型上记录的年份值
// console.log(inherit.dateSign["month"])
monthSign -= 1;// 想左按钮每点一次, 月份记录值减 1
console.log("monthSign"+monthSign);
if(monthSign == -1){
inherit.dateSign["month"] = 11;
inherit.dateSign["year"] = parseInt((yearSign - 1));
setControl();
praperaCalenderData();
return;
}
inherit.dateSign["month"] = monthSign;// 将新的月份值赋值给原型
// 作用是点击左右按钮时, 如果原型上的数据匹配 Date()当天数据成功,
// 就修改 todayflag 的值为 1(值为 1 时才会渲染高亮当天 TD)
if(inherit.dateSign["year"] == dat.getFullYear() && inherit.dateSign["month"] == dat.getMonth()){
todayflag = 1;
}
setControl();
praperaCalenderData();// 调用准备数据的函数,
// 准备完数据后 praperaCalenderData()会在函数内部调用渲染函数
}
}
function clickDateToRight() {// 日期左箭头点击逻辑处理
var inherit = new calendarSupper();
var monthSign = 0;
var yearSign = 0;
var toRightBt = document.getElementById("dateToRight");
var dat = new Date();
toRightBt.onclick = function() {
monthSign = inherit.dateSign["month"];// 获取原型上记录的月份值
yearSign = inherit.dateSign["year"];// 获取原型上记录的年份值
// console.log(inherit.dateSign["month"])
monthSign += 1;// 想左按钮每点一次, 月份记录值减 1
if(monthSign == 12){
inherit.dateSign["month"] = 0;
inherit.dateSign["year"] = parseInt((yearSign + 1));
setControl();
praperaCalenderData();
return;
}
inherit.dateSign["month"] = monthSign;// 将新的月份值赋值给原型
setControl();
// 作用是点击左右按钮时, 如果原型上的数据匹配 Date()当天数据成功,
// 就修改 todayflag 的值为 1(值为 1 时才会渲染高亮当天 TD)
if(inherit.dateSign["year"] == dat.getFullYear() && inherit.dateSign["month"] == dat.getMonth()){
todayflag = 1;
}
praperaCalenderData();// 调用准备数据的函数,
// 准备完数据后 praperaCalenderData()会在函数内部调用渲染函数
}
}
function tdClickHlight() {// 为每一个 TD 绑定点击就高亮的特效
var table = document.getElementById('calendarShow');
var td = table.getElementsByTagName('td');
for(var i = 0; i < td.length; i++) {
td[i].onclick = function() {
this.style.outline = "2px solid #EEEE00";
this.dataset.checked = true;
}
}
}
function signDate() {// 标注日期的逻辑处理
var inherit = new calendarSupper();
var signDate = document.getElementById("signDate");
var judge = null;
signDate.onclick = function() {
var table = document.getElementById("calendarShow");
var tr = table.getElementsByTagName('td');
for(var i = 0; i < tr.length; i++) {
judge = tr[i].getAttribute("data-checked");
if(judge == "true") {
var day = tr[i].getAttribute("data-day");
var month = tr[i].getAttribute("data-month");
var year = tr[i].getAttribute("data-year");
inherit.signDateinfo = Object(day);
for(var day in inherit.signDateinfo){
inherit.signDateinfo[day] = window.Object(month);
for(var month in inherit.signDateinfo[day]){
inherit.signDateinfo[day][month] = window.Object(year);
for(var year in inherit.signDateinfo[day][month]) {
inherit.signDateinfo[day][month][year] = 1;
}
}
}
}
}
console.log(inherit.signDateinfo);
}
}
function returnToday() {// 返回今天
var returnTodayBT = document.getElementById("comeBakeToday");
returnTodayBT.onclick = function() {
var inherit = new calendarSupper();
var dat = new Date();
inherit.dateSign["year"] = dat.getFullYear();
inherit.dateSign["month"] = dat.getMonth();
setControl();
todayflag = 1;// 复原, 为高亮当天日期
praperaCalenderData();
}
}
function setControl() {// 设置控制菜单的年份, 月份
var inherit = new calendarSupper();
var yearShow = document.getElementById("yearShow");
var monthShow = document.getElementById("monthShow");
yearShow.dataset.year = inherit.dateSign["year"];
monthShow.dataset.month = (inherit.dateSign["month"] + 1);
yearShow.innerHTML = inherit.dateSign["year"] + "年";
monthShow.innerHTML = (inherit.dateSign["month"] + 1) + "月";
}
function movement(element,_height) {// 缓冲运动
var inherit = new calendarSupper();
var transition = 0;
clearInterval(inherit.timer);
inherit.timer = setInterval(function() {
var speed = (_height-parseInt(element.style.height))/5;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(parseInt(element.style.height) == _height){
window.clearInterval(inherit.timer);
}else{
element.style.height = parseInt(element.style.height) + speed + "px";
}
},30)
}
function addEventHandler(target,type,func){ // 夸浏览器绑定方法
if(target.addEventListener){
// 监听 IE9, 谷歌和火狐
target.addEventListener(type, func, false);
}else if(target.attachEvent){
target.attachEvent("on" + type, func);
}else{
target["on" + type] = func;
}
}
function calendarOnload(){// 用来放页面加载完成时执行的函数
praperaCalenderData();// 执行准备数据的函数
setConcrolShow();// 预设设置控制菜单的选项
yearShowHover();// 为年份菜单添加点击监听事件
monthShowHover();// 为月份菜单添加点击监听事件
clickDateToLeft();// 月份向左箭头添加监听事件
clickDateToRight();// 月份向右箭头添加监听事件
tdClickHlight();//td 点击高亮
returnToday();// 返回今天
signDate();// 标注日期
}
calendarOnload();
</script>
</html>
JavaScript
评论
2
喜欢
5
赞
3
评论 ( 2 )
走你
最新评论
来源: http://www.qdfuns.com/article/31180/72697469293ab3634cf94bebc349e517.html