js 日历，节假日，添加日志

闲着没事，做着玩的，希望对有需要的朋友有帮助

代码已上传至github，　https://github.com/LyyZzzz/calendar.git

 1 <div id="tip">
 2   <div class="festival-content">
 3     <span class="img festival-icon">span>
 4     <span class="tip-today">今日span>
 5   div>
 6   <div class="tip-content">
 7     <span class="part">
 8       <span class="tip-week">星期六span>
 9       <span class="tip-weekEng">Saturdayspan>
10     span>
11     <span class="part">
12       <span>（
13         <span class="zodiac">狗span>）
14         <span class="tip-annals">戊戌年span>
15       span>
16       <span class="tip-lunarCalendar">农历冬月廿六span>
17     span>
18   div>
19   <div class="tip-journal">
20     <div class="journal-title"><span class="img record">span>日志：div>
21     <div class="journal-msg">div>
22   div>
23 div>

 

/*calendar.js*/

  1 $(function () {
  2 
  3   //必要的数据
  4   //今天的年 月 日 ；本月的总天数；本月第一天是周几？？？
  5   var iNow = 0;
  6   var year = 0;
  7   var month = 0;
  8   var today = 0;
  9   var clickDay = 0; //点击了哪一天
 10   var todayJournal = "";
 11   var hasFestival = ""; //当天是否有节日
 12 
 13   function run(n) {
 14 
 15     var oDate = new Date(); //定义时间
 16     oDate.setMonth(oDate.getMonth() + n); //设置月份
 17     year = oDate.getFullYear(); //年
 18     month = oDate.getMonth(); //月
 19     today = oDate.getDate(); //日
 20 
 21     //公历节日
 22     var gregorianFestivals = {
 23       '0101': '元旦',
 24       '0214': '情人节',
 25       '0308': '妇女节',
 26       '0312': '植树节',
 27       '0401': '愚人节',
 28       '0501': '劳动节',
 29       '0504': '青年节',
 30       '0512': '护士节',
 31       '0601': '儿童节',
 32       '0701': '建党节',
 33       '0801': '建军节',
 34       '0910': '教师节',
 35       '1001': '国庆节',
 36       '1224': '平安夜',
 37       '1225': '圣诞节',
 38     };
 39 
 40     var lunarFestivals = {
 41       '腊月三十': '除夕',
 42       '正月初一': '春节',
 43       '正月十五': '元宵节',
 44       '五月初五': '端午节',
 45       '七月初七': '七夕节',
 46       '八月十五': '中秋节',
 47       '九月初九': '重阳节',
 48     }
 49 
 50 
 51 
 52     //计算本月有多少天
 53     var allDay = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
 54 
 55     //判断闰年
 56     if (month == 1) {
 57       if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
 58         allDay = 29;
 59       }
 60     }
 61 
 62     //判断本月第一天是星期几
 63     oDate.setDate(1); //时间调整到本月第一天
 64     var week = oDate.getDay(); //读取本月第一天是星期几
 65 
 66     //console.log(week);
 67     $(".dateList").empty(); //每次清空
 68     //插入空白
 69 
 70     for (var i = 0; i < week; i++) {
 71       $(".dateList").append("
");
 72     }
 73 
 74     //日期插入到dateList
 75     for (var i = 1; i <= allDay; i++) {
 76       hasFestival = "";
 77       $(".dateList").append("
" + i + "" + festivalView(getLunarCalendar(i),month + 1,i) + "
")
 78       $(`.date${i}`).attr("festival",hasFestival)
 79     }
 80     //标记颜色=====================
 81     $(".dateList .each-date").each(function (i, elm) {
 82       var val = $(this).find(".num").text();
 83       //console.log(val);
 84       if (n == 0) {
 85         if (val < today) {
 86           $(this).addClass('gray')
 87         } else if (val == today) {
 88           $(this).children().first().addClass("pink")
 89         } else if (i % 7 == 0 || i % 7 == 6) {
 90           $(this).addClass('weekend')
 91         }
 92       } else if (n < 0) {
 93         $(this).addClass('gray')
 94       } else if (i % 7 == 0 || i % 7 == 6) {
 95         $(this).addClass('weekend')
 96       }
 97     });
 98 
 99     //定义标题日期
100     $("#calendar .title").text(year + "年" + (month + 1) + "月");
101     $(".each-date").click(function () {
102       clickDay = parseInt($(this).text());
103       var pageDay = {
104         year: year,
105         month: month,
106         date: clickDay
107       };
108       // console.log(pageDay);
109       var detail = dateDetail({
110         'timeStamp': new Date(pageDay.year, pageDay.month, pageDay.date).getTime()
111       });
112       $("#journal").val(todayJournal);
113 
114     });
115 
116     /**
117      * 获取农历
118      */
119     function getLunarCalendar(date) {
120       let detail = dateDetail({
121         'timeStamp': new Date(year, month, date).getTime()
122       }).aL.lunarCalendar;
123       // return [detail.slice(0, 2),detail.slice(2, 4)]
124       return detail
125     }
126 
127     /**
128      * 获取当日是否是农历假日
129      */
130     function festivalView(lunarCalendar,month,date) {
131       if(Object.keys(lunarFestivals).indexOf(lunarCalendar) != -1) {
132         hasFestival = lunarFestivals[lunarCalendar]
133         return lunarFestivals[lunarCalendar]
134       } else {
135         let day = ( month > 9 ? month + '' : "0" + month) + ( date > 9 ? date + '' : "0" + date);
136         if(Object.keys(gregorianFestivals).indexOf(day) != -1) {
137           hasFestival = gregorianFestivals[day]
138           return gregorianFestivals[day]
139         }else {
140           return lunarCalendar.slice(2, 4)
141         }
142       }
143     }
144 
145     /**
146      * 滚动页面时防止tip定位出错
147      */
148     var contentTop = document.getElementById("content").getBoundingClientRect().top;
149     var scrollTop = contentTop > 0 ? 0 : document.documentElement.scrollTop;
150     window.onscroll = function() {
151       contentTop = document.getElementById("content").getBoundingClientRect().top;
152       scrollTop = contentTop > 0 ? 0 : document.documentElement.scrollTop;
153     };
154 
155     var x = 10;
156     var y = 20;
157     $(".each-date").mouseenter(function (e) {
158       let date = $(this).find(".num").text();
159       if (date) {
160         let journal = window.localStorage.getItem("yyJournal");
161         let obj = journal?JSON.parse(journal):{};
162         todayJournal = "";
163         let day = new Date(year,month,date).getTime() + '';
164         if(obj && Object.keys(obj).indexOf(day) != -1) {
165           todayJournal = obj[day];
166         }
167         let arr = "鼠牛虎兔龙蛇马羊猴鸡狗猪".split(/(?!\b)/);
168         let todayMsg = dateDetail({
169           'timeStamp': new Date(year, month, date).getTime()
170         });
171         let festival = $(this).attr("festival");
172         if(festival) {
173           $(".festival-content").show();
174           $(".festival-icon").show();
175           $(".tip-today").html(festival);
176         } else {
177           if (n == 0 && date == today) {
178             $(".festival-content").show();
179             $(".festival-icon").hide();
180             $(".tip-today").html("今日");
181           } else {
182             $(".festival-content").hide();
183           }
184         }
185         $("#tip .tip-week").html(todayMsg.week);
186         $("#tip .tip-weekEng").html(todayMsg.weekEng);
187         $("#tip .tip-annals").html(todayMsg.aL.annals);
188         $("#tip .zodiac").html(arr[(year - 1912) % 12]);
189         $("#tip .tip-lunarCalendar").html("农历" + todayMsg.aL.lunarCalendar);
190         if(todayJournal) {
191           $(".journal-msg").html(todayJournal);
192           $(".tip-journal").show();
193         } else {
194           // $(".journal-msg").html("点击添加日志");
195           $(".tip-journal").hide();
196         }
197         $("#tip").css({
198           "top": (e.pageY - scrollTop + y) + "px",
199           "left": (e.pageX + x) + "px"
200         }).show(); //设置x坐标和y坐标，并且显示
201       }
202     }).mousemove(function (e) {
203       if(e.pageX + x + 300 >= document.body.clientWidth) {
204         $("#tip").css({
205           "top": (e.pageY - scrollTop + y) + "px",
206           "left": (e.pageX - 200) + "px"
207         }); //设置x坐标和y坐标，并且显示
208       } else {
209         $("#tip").css({
210           "top": (e.pageY - scrollTop + y) + "px",
211           "left": (e.pageX + x) + "px"
212         });
213       }
214     }).mouseleave(function () {
215       $("#tip").hide(); //移除
216     });
217 
218     $(".btn-primary").click(function () {
219       let journal = $("#journal").val();
220       let day = new Date(year,month,clickDay).getTime();
221       yyJournal = window.localStorage.getItem("yyJournal");
222       let obj = yyJournal?JSON.parse(yyJournal):{};
223       obj[day] = journal;
224       window.localStorage.setItem('yyJournal',JSON.stringify(obj))
225     })
226   };
227 
228 
229 
230   run(0);
231 
232   $(".a1").click(function () {
233     iNow--;
234     run(iNow);
235     $("#calendar .calendar-bg").css("background-image", `url("img/${month}.jpg")`)
236     $(".calendarImg").css("background-image", `url("img/${month}.jpg")`)
237   });
238 
239   $(".a2").click(function () {
240     iNow++;
241     run(iNow);
242     $("#calendar .calendar-bg").css("background-image", `url("img/${month}.jpg")`)
243     $(".calendarImg").css("background-image", `url("img/${month}.jpg")`)
244   });
245 
246   $(".home-btn").click(function () {
247     iNow = 0;
248     run(iNow);
249   });
250 
251   $(".a1").hover(function () {
252     $(".left-circle").css("background-image",'url("img/left-circle.png")')
253   },function () {
254     $(".left-circle").css("background-image",'url("img/left-circle1.png")')
255   })
256 
257   $(".a2").hover(function () {
258     $(".right-circle").css("background-image",'url("img/right-circle.png")')
259   },function () {
260     $(".right-circle").css("background-image",'url("img/right-circle1.png")')
261   })
262 
263   $(".home-btn").hover(function () {
264     $(".home-btn").css("background-image",'url("img/home.png")')
265   },function () {
266     $(".home-btn").css("background-image",'url("img/home1.png")')
267   })
268 });

 

/*dateDetail.js*/

  1 (function (win) {
  2   var sWeek = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
  3   var weekEng = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
  4   var dNow = new Date();
  5   var CalendarData = new Array(100);
  6   var madd = new Array(12);
  7   var tgString = "甲乙丙丁戊己庚辛壬癸";
  8   var dzString = "子丑寅卯辰巳午未申酉戌亥";
  9   var numString = "一二三四五六七八九十";
 10   var monString = "正二三四五六七八九十冬腊";
 11   var weekString = "日一二三四五六";
 12   var sx = "鼠牛虎兔龙蛇马羊猴鸡狗猪";
 13   var cYear, cMonth, cDay, TheDate;
 14   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,
 15       0x49B, 0x41497, 0xA4B, 0xA164B, 0x6A5, 0x6D4, 0x615B4, 0xAB6, 0x957, 0x5092F,
 16       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);
 17   madd[0] = 0;
 18   madd[1] = 31;
 19   madd[2] = 59;
 20   madd[3] = 90;
 21   madd[4] = 120;
 22   madd[5] = 151;
 23   madd[6] = 181;
 24   madd[7] = 212;
 25   madd[8] = 243;
 26   madd[9] = 273;
 27   madd[10] = 304;
 28   madd[11] = 334;
 29 
 30   function GetBit(m, n) {
 31     return (m >> n) & 1;
 32   }
 33 
 34   function e2c() {
 35     TheDate = (arguments.length != 3) ? new Date() : new Date(arguments[0], arguments[1], arguments[2]);
 36     var total, m, n, k;
 37     var isEnd = false;
 38     var tmp = TheDate.getFullYear();
 39     total = (tmp - 1921) * 365 + Math.floor((tmp - 1921) / 4) + madd[TheDate.getMonth()] + TheDate.getDate() - 38;
 40     if (TheDate.getYear() % 4 == 0 && TheDate.getMonth() > 1) {
 41       total++;
 42     }
 43     for (m = 0; ; m++) {
 44       k = (CalendarData[m] < 0xfff) ? 11 : 12;
 45       for (n = k; n >= 0; n--) {
 46         if (total <= 29 + GetBit(CalendarData[m], n)) {
 47           isEnd = true;
 48           break;
 49         }
 50         total = total - 29 - GetBit(CalendarData[m], n);
 51       }
 52       if (isEnd) break;
 53     }
 54     cYear = 1921 + m;
 55     cMonth = k - n + 1;
 56     cDay = total;
 57     if (k == 12) {
 58       if (cMonth == Math.floor(CalendarData[m] / 0x10000) + 1) {
 59         cMonth = 1 - cMonth;
 60       }
 61       if (cMonth > Math.floor(CalendarData[m] / 0x10000) + 1) {
 62         cMonth--;
 63       }
 64     }
 65   }
 66 
 67   var annals = "";
 68 
 69   /**
 70    * 计算纪年 农历
 71    */
 72   function GetcDateString() {
 73     var tmp = "";
 74     //计算纪年
 75     // tmp += tgString.charAt((cYear - 4) % 10);
 76     // tmp += dzString.charAt((cYear - 4) % 12);
 77     // tmp += "年 ";
 78 
 79     if (cMonth < 1) {
 80       tmp += "(闰)";
 81       tmp += monString.charAt(-cMonth - 1);
 82     } else {
 83       tmp += monString.charAt(cMonth - 1);
 84     }
 85     tmp += "月";
 86     tmp += (cDay < 11) ? "初" : ((cDay < 20) ? "十" : ((cDay == 20)?"二十" : ((cDay < 30) ? "廿" : "三十")));
 87     if (cDay % 10 != 0 || cDay == 10) {
 88       tmp += numString.charAt((cDay - 1) % 10);
 89     }
 90     // return tmp;
 91     return {
 92       annals: tgString.charAt((cYear - 4) % 10) + dzString.charAt((cYear - 4) % 12) + '年',
 93       lunarCalendar: tmp
 94     }
 95   }
 96 
 97   function GetLunarDay(solarYear, solarMonth, solarDay) {
 98     // if (solarYear < 1921 || solarYear > 2020) {
 99     //   return "";
100     // } else {
101     //   solarMonth = (parseInt(solarMonth) > 0) ? (solarMonth - 1) : 11;
102     //   e2c(solarYear, solarMonth, solarDay);
103     //   return GetcDateString();
104     // }
105 
106     solarMonth = (parseInt(solarMonth) > 0) ? (solarMonth - 1) : 11;
107     e2c(solarYear, solarMonth, solarDay);
108     return GetcDateString();
109   }
110 
111   var D = new Date();
112   var yy = D.getFullYear();
113   var mm = D.getMonth() + 1;
114   var dd = D.getDate();
115   var ww = D.getDay();
116   var ss = parseInt(D.getTime() / 1000);
117 
118   function getFullYear(d) {// 修正firefox下year错误
119     yr = d.getYear();
120     if (yr < 1000)
121       yr += 1900;
122     return yr;
123   }
124 
125   /**
126    * @param timeStamp 传值时间戳，不传则默认为今日
127    * @returns {{year: number, month: number, date: number, week: string, annalsAndLunarCalendar: (string|*), dayDetail: string}}
128    */
129   var dateDetail = function ($) {
130     if ($.timeStamp) {
131       dNow = new Date($.timeStamp);
132     }
133     // var sValue = getFullYear(dNow) + "年" + (dNow.getMonth() + 1) + "月" + dNow.getDate() + "日" + " " + sWeek[dNow.getDay()] + " ";
134     // sValue += GetLunarDay(yy, mm, dd);
135     let lunarDay = GetLunarDay(getFullYear(dNow), dNow.getMonth() + 1, dNow.getDate());
136     return {
137       year: getFullYear(dNow),
138       month: dNow.getMonth() + 1,
139       date: dNow.getDate(),
140       week: sWeek[dNow.getDay()], //星期
141       weekEng: weekEng[dNow.getDay()], //星期英文
142       aL: lunarDay,  //annals：纪年   lunarCalendar：农历
143       dayDetail: getFullYear(dNow) + "年" + (dNow.getMonth() + 1) + "月" + dNow.getDate() + "日" + " " + sWeek[dNow.getDay()] + " " + lunarDay.annals + " " + lunarDay.lunarCalendar
144     }
145   };
146 
147   window.dateDetail = dateDetail;
148 })(window)

 

转载于:https://www.cnblogs.com/Lee242050/p/10289028.html