<%=today%> <%=week%>
',o+='<%=dayTime%>
',o+='',o+="<%=lunarMonth%><%=lunarDay%><%=eraYear%>年 【<%=zodiac%>】<%=eraMonth%>月 <%=eraDay%>日
",o+='',o+='
";for(var l in r){var d=r[l].solarCalendar.year+"-"+r[l].solarCalendar.month+"-"+r[l].solarCalendar.day;if(d===a+"-"+n+"-"+t)break}var i=r[l];n=10>n?"0"+n:n,t=10>t?"0"+t:t;var s=i.almanac?i.almanac.y.split(".").slice(0,6).join("',o+='宜<%=yDay%>',o+='忌<%=jDay%>
',o+=""):"无",u=i.almanac?i.almanac.j.split(".").slice(0,6).join("
"):"无",p={today:a+"-"+n+"-"+t,dayTime:t,week:i.solarCalendar.week,lunarMonth:i.lunarCalendar.month,lunarDay:i.lunarCalendar.day,eraYear:i.chinaEra.year,eraMonth:i.chinaEra.month,eraDay:i.chinaEra.day,zodiac:i.chinaEra.zodiac,yDay:s,jDay:u};o=e.template(o,p),e(".op-calendar-new-right").html(o)}function r(a,n,t){for(var r=1899,o=2100,l={"default":"假期安排",i0101:"元旦 ",d0101:"春节 ",d0115:"元宵节",d0202:"龙头节",d0505:"端午节",d0707:"七夕节",d0715:"中元节",d0815:"中秋节",d0909:"重阳节",d1001:"寒衣节",d1015:"下元节",d1208:"腊八节",d1223:"小年"},d="",i=r+1;o>i;i++)d+='
16 |
117 |
118 |
--------------------------------------------------------------------------------
/doc/pdf/index.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mircode/calender/75c97da4df38c3ee17f190ead7aae2ce9056e74b/doc/pdf/index.pdf
--------------------------------------------------------------------------------
/doc/readme.txt:
--------------------------------------------------------------------------------
1 | =========================================
2 | 一、需求
3 | =========================================
4 |
5 | 有日期、星期、农历节气和国际节假日，能切换年、月、日。
6 | 界面好看，在手机上可以操作，有API可以扩展功能
7 |
8 | =========================================
9 | 二、万年历制作流程
10 | =========================================
11 | 1、选择一款日历UI（经过筛选，百度日历的UI比较简洁漂亮）。
12 | 2、编写JavaScript核心代码，实现农历、公历等日期信息参数的查询。
13 | 3、将JavaScript代码和UI界面，整合到一起。期间涉及DOM生成模块（实现模板功能），Event模块，CSS模块（切换主题和UI），日历算法核心模块，仿jQuery模块（工具类）。
14 | 4、使用gulp前端构建工具打包发布工程。
15 | 5、编写开发文档。
16 |
17 | =========================================
18 | 三、核心模块
19 | =========================================
20 | 1、核心算法模块（calender.js）
21 | 2、仿jQuery模块，提供工具函数（common.js）
22 | 3、Dom模块，生成HTML页面结构（dom.js）
23 | 4、Event模块，日历中各种事件（event.js）
24 | 5、入口模块（main.js）
25 |
26 | =========================================
27 | 四、构建环境
28 | =========================================
29 | 1、日历UI,UI和CSS样式,拔取的百度日历样式(时间和审美原因未能来及自己编写)
30 | 2、核心JS代码,按照模块编写
31 | 3、编辑工具HBuilder,项目构建工具gulp
32 |
33 | =========================================
34 | 五、接口说明
35 | =========================================
36 |
37 | 万年历接口
38 | Calendar
39 | |--init(Date) -- 入口函数,通过传入日期对象,构造日历
40 | |
41 | |--Holiday -- 法定假日,需要用过 loadCalendarLib加载,2014~2016年
42 | |
43 | |--HuangLi -- 黄历信息,需要用过loadCalendarLib加载 ,2008~2020年
44 | |
45 | |--debugCalendar(y,m) -- 用于在控制台输出日期信息,用于调试代码使用
46 | |
47 | |--getCalendar(y,m) -- 获取y年m月,对于的日期信息,包括农历,天干地支,节气,节假日等信息
48 | |
49 | |--getLunarCalendar(y,m,d) -- 获取到公历y年m月,对应的农历日期
50 | |
51 | |--getSolarCalendar(y,m,d) -- 获取到农历y年m月,对应的公历日期,m为润月的时候,会返回多个公历日期
52 | |
53 | |--loadCalendarLib(y,callback) -- 用于加载y年对应的黄历和法定假日信息,callback为库文件加载成功时候的回掉
54 | |
55 | |----Event对象 -- 暂时没有暴露任何事件方法
56 | |
57 | |----UI对象
58 | |
59 | |--calendarHTML(y,m) -- 用于生成y年m月对应的HTML结构视图,日历主体部分
60 | |
61 | |--detailHTML(y,m,d) -- 用于生成y年m月d日对应的HTML结构视图,日历右侧日期详情部分
62 | |
63 | |--dropDownHTML(y,m,d) -- 用于生成y年m月d日对应的HTML结构视图 ,下拉选择框年,月,节假日
64 | |
65 | |--getDropDown() -- 获取到下拉框的对应的年,月,节假日,以及当前日历选中的天
66 | |
67 | |--setDropDown(y,m,d) -- 设置下拉框的对应的年,月,以及当前日历选中的天
68 | |
69 | |--getFestival() -- 获取当前选中的节假日信息
70 | |
71 | |--setFestival(festival) -- 设置当前选中的节假日信息 eg: setFestival({date:'i0101',name'元旦'})
72 |
73 | DOM接口
74 | DOM
75 | |--each(obj) -- 静态方法,遍历元素或数组
76 | |
77 | |--template(html,json) -- 静态方法,根据html和json生成对应的HTML结构,使用JSP标签结构<%%>,<%=%>
78 | |
79 | |--getScript(urls,callback) -- 静态方法,动态加载JS
80 | |
81 | |----prototype对象 -- 实现jQuery的部分功能
82 | |
83 | |--html() -- 用于获取和设置Dom元素的内容
84 | |
85 | |--addClass() -- 给Dom元素添加类名
86 | |
87 | |--removeClass() -- 给Dom元素移除类名
88 | |
89 | |--hasClass() -- 判断Dom元素是否拥有类名
90 | |
91 | |--show() -- 显示Dom元素
92 | |
93 | |--hide() -- 隐藏Dom元素
94 | |
95 | |--toggle() -- 交替显示和隐藏 Dom元素
96 | |
97 | |--attr() -- 获取和设置元素的属性值
98 | |
99 | |--on(type,handler) -- 给Dom元素绑定事件
100 | |
101 | |--off(type,handler) -- 取消Dom元素事件
102 |
103 |
104 | =========================================
105 | 六、待优化
106 | =========================================
107 | 1、模块之间通过require加载。
108 | 2、 CSS通过Less等css编译工具编译完成。
109 | 3、只做了简单媒体查询样式代码的编写，移动端适配的功能有待完善和开发。
110 | 4、对HTML结构要求比较苛刻,暂不支持模板替换和主题替换。
111 |
112 |
113 | =========================================
114 | 七、作者
115 | =========================================
116 | 作者 魏国兴
117 | 邮箱 1607646162@qq.com
118 | 2016 年 04月 13日
119 |
120 |
121 |
122 |
123 |
124 |
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | /**
2 | *
3 | * gulpfile.js
4 | *
5 | * 采用Gulp构建项目
6 | *
7 | * 作者: 魏国兴
8 | * 日期: 20160412
9 | *
10 | * 组件安装
11 | * npm install gulp gulp-jshint gulp-minify-css gulp-uglify gulp-rename gulp-concat gulp-clean gulp-html-replace --save-dev
12 | *
13 | * 运行
14 | * gulp
15 | *
16 | */
17 |
18 | // 引入 gulp及组件
19 | var gulp = require('gulp'), //基础库
20 | minifycss = require('gulp-minify-css'), //css压缩
21 | jshint = require('gulp-jshint'), //js检查(这里并没有使用校验模块,有待优化)
22 | uglify = require('gulp-uglify'), //js压缩
23 | rename = require('gulp-rename'), //重命名
24 | concat = require('gulp-concat'), //合并文件
25 | clean = require('gulp-clean'), //清空文件夹
26 | htmlreplace = require('gulp-html-replace');//替换HTML中的路径
27 |
28 | // 样式处理
29 | gulp.task('css', function () {
30 | var cssSrc = './css/*.css',
31 | cssDst = './dist/css';
32 |
33 | gulp.src(cssSrc)
34 | .pipe(gulp.dest(cssDst))
35 | .pipe(rename({ suffix: '.min' }))
36 | .pipe(minifycss())
37 | .pipe(gulp.dest(cssDst));
38 | });
39 |
40 | // 图片处理
41 | gulp.task('img', function(){
42 | var imgSrc = './img/*',
43 | imgDst = './dist/img';
44 | gulp.src(imgSrc)
45 | .pipe(gulp.dest(imgDst));
46 | })
47 |
48 | // js处理
49 | gulp.task('js', function () {
50 | var jsSrc = './js/*.js',
51 | jsDst ='./dist/js';
52 |
53 | gulp.src(jsSrc)
54 | .pipe(concat('calendar.js'))
55 | .pipe(gulp.dest(jsDst))
56 | .pipe(rename({ suffix: '.min' }))
57 | .pipe(uglify())
58 | .pipe(gulp.dest(jsDst));
59 | });
60 | // lib依赖库文件
61 | gulp.task('lib', function () {
62 | var jsSrc = './lib/*.js',
63 | jsDst ='./dist/lib';
64 |
65 | gulp.src(jsSrc)
66 | .pipe(gulp.dest(jsDst));
67 | });
68 |
69 | // 替换html的路径
70 | gulp.task("html", function(){
71 | var htmlSrc = './*.html',
72 | htmlDst ='./dist';
73 |
74 | return gulp.src(htmlSrc)
75 | .pipe(htmlreplace({
76 | 'reset':'css/reset.min.css',
77 | 'css':'css/calendar.min.css',
78 | 'js': 'js/calendar.min.js'
79 | })).pipe(gulp.dest(htmlDst));
80 |
81 | });
82 |
83 | // 清空图片、样式、js
84 | gulp.task('clean', function() {
85 | gulp.src(['./dist/*.html','./dist/css/*', './dist/lib/*','./dist/js/*','./dist/img/*'], {read: false})
86 | .pipe(clean());
87 | });
88 |
89 | // 默认任务 清空图片、样式、js并重建 运行语句 gulp
90 | gulp.task('default', ['clean'], function(){
91 | // 延时500ms,清除目录有一定延时
92 | setTimeout(function(){
93 | gulp.start('html','css','lib','js','img');
94 | },500);
95 | });
96 |
97 | // 监听任务 运行语句 gulp watch
98 | gulp.task('watch',function(){
99 |
100 | server.listen(port, function(err){
101 | if (err) {
102 | return console.log(err);
103 | }
104 |
105 | // 监听css
106 | gulp.watch('./css/*.css', function(){
107 | gulp.run('css');
108 | });
109 | // 监听images
110 | gulp.watch('./img/*', function(){
111 | gulp.run('images');
112 | });
113 | // 监听js
114 | gulp.watch('./js/*.js', function(){
115 | gulp.run('js');
116 | });
117 | // 监听lib
118 | gulp.watch('./lib/*.js', function(){
119 | gulp.run('lib');
120 | });
121 | // 监听html
122 | gulp.watch('./*.html', function(){
123 | gulp.run('html');
124 | });
125 | });
126 | });
--------------------------------------------------------------------------------
/img/bk_polyicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mircode/calender/75c97da4df38c3ee17f190ead7aae2ce9056e74b/img/bk_polyicon.png
--------------------------------------------------------------------------------
/img/bk_polyicon1.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mircode/calender/75c97da4df38c3ee17f190ead7aae2ce9056e74b/img/bk_polyicon1.gif
--------------------------------------------------------------------------------
/img/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mircode/calender/75c97da4df38c3ee17f190ead7aae2ce9056e74b/img/favicon.ico
--------------------------------------------------------------------------------
/img/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mircode/calender/75c97da4df38c3ee17f190ead7aae2ce9056e74b/img/favicon.png
--------------------------------------------------------------------------------
/img/icons_0e814c16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mircode/calender/75c97da4df38c3ee17f190ead7aae2ce9056e74b/img/icons_0e814c16.png
--------------------------------------------------------------------------------
/img/icons_5c448026.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mircode/calender/75c97da4df38c3ee17f190ead7aae2ce9056e74b/img/icons_5c448026.gif
--------------------------------------------------------------------------------
/img/layericon.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mircode/calender/75c97da4df38c3ee17f190ead7aae2ce9056e74b/img/layericon.gif
--------------------------------------------------------------------------------
/img/layericon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mircode/calender/75c97da4df38c3ee17f190ead7aae2ce9056e74b/img/layericon.png
--------------------------------------------------------------------------------
/img/tip-arrow-bottom.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mircode/calender/75c97da4df38c3ee17f190ead7aae2ce9056e74b/img/tip-arrow-bottom.png
--------------------------------------------------------------------------------
/img/tip-arrow-top.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mircode/calender/75c97da4df38c3ee17f190ead7aae2ce9056e74b/img/tip-arrow-top.png
--------------------------------------------------------------------------------
/img/tip-bottom.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mircode/calender/75c97da4df38c3ee17f190ead7aae2ce9056e74b/img/tip-bottom.png
--------------------------------------------------------------------------------
/img/tip-left-bottom.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mircode/calender/75c97da4df38c3ee17f190ead7aae2ce9056e74b/img/tip-left-bottom.png
--------------------------------------------------------------------------------
/img/tip-left-top.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mircode/calender/75c97da4df38c3ee17f190ead7aae2ce9056e74b/img/tip-left-top.png
--------------------------------------------------------------------------------
/img/tip-left.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mircode/calender/75c97da4df38c3ee17f190ead7aae2ce9056e74b/img/tip-left.png
--------------------------------------------------------------------------------
/img/tip-right-bottom.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mircode/calender/75c97da4df38c3ee17f190ead7aae2ce9056e74b/img/tip-right-bottom.png
--------------------------------------------------------------------------------
/img/tip-right-top.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mircode/calender/75c97da4df38c3ee17f190ead7aae2ce9056e74b/img/tip-right-top.png
--------------------------------------------------------------------------------
/img/tip-right.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mircode/calender/75c97da4df38c3ee17f190ead7aae2ce9056e74b/img/tip-right.png
--------------------------------------------------------------------------------
/img/tip-top.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mircode/calender/75c97da4df38c3ee17f190ead7aae2ce9056e74b/img/tip-top.png
--------------------------------------------------------------------------------
/img/toplist_dot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mircode/calender/75c97da4df38c3ee17f190ead7aae2ce9056e74b/img/toplist_dot.png
--------------------------------------------------------------------------------
/install/setup.exe:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mircode/calender/75c97da4df38c3ee17f190ead7aae2ce9056e74b/install/setup.exe
--------------------------------------------------------------------------------
/js/calendar.js:
--------------------------------------------------------------------------------
1 | /**
2 | * 说明: 该模块实现了对万年历的数据模型(Model)的计算。
3 | *
4 | * 该算法主要实现了一下功能:
5 | *
6 | * 1、计算某月公历信息。
7 | * 2、计算某月每一天对应的农历,天干地支,国际节日,国内节日,节气,放假安排,黄历信息(每日宜忌)等信息。
8 | *
9 | * 作者: 魏国兴
10 | * 日期: 20160407
11 | */
12 |
13 |
14 | // 自执行匿名函数
15 | +function(){
16 |
17 |
18 | /**
19 | * 万年历支持查询的年份范围
20 | */
21 | var minYear = 1899;//最小年限
22 | var maxYear = 2100;//最大年限
23 |
24 | /**
25 | * 1899 - 2100 年的农历数据
26 | *
27 | * 数据格式: 0x04bd8是5个16进制数,20bit的数,代表公历日期为 1900年01月31日,农历日期为1900年01月01日
28 | *
29 | * 说明：农历中大月为30天,小月为29天
30 | *
31 | * 前4位(即0): 表示当年润月的大小月,为1则润大月,为0则润小月。
32 | * 中间12位(即4bd): 每位代表一个月,为1则为大月,为0则为小月。12位表示1到12个月
33 | * 后4位(即8): 代表这一年的润月月份,为0则不润。首4位要与末4位搭配使用
34 | */
35 | var lunarInfo=[ 0x0ab50,//1899
36 | 0x04bd8,0x04ae0,0x0a570,0x054d5,0x0d260,0x0d950,0x16554,0x056a0,0x09ad0,0x055d2,//1900-1909
37 | 0x04ae0,0x0a5b6,0x0a4d0,0x0d250,0x1d255,0x0b540,0x0d6a0,0x0ada2,0x095b0,0x14977,//1910-1919
38 | 0x04970,0x0a4b0,0x0b4b5,0x06a50,0x06d40,0x1ab54,0x02b60,0x09570,0x052f2,0x04970,//1920-1929
39 | 0x06566,0x0d4a0,0x0ea50,0x06e95,0x05ad0,0x02b60,0x186e3,0x092e0,0x1c8d7,0x0c950,//1930-1939
40 | 0x0d4a0,0x1d8a6,0x0b550,0x056a0,0x1a5b4,0x025d0,0x092d0,0x0d2b2,0x0a950,0x0b557,//1940-1949
41 | 0x06ca0,0x0b550,0x15355,0x04da0,0x0a5b0,0x14573,0x052b0,0x0a9a8,0x0e950,0x06aa0,//1950-1959
42 | 0x0aea6,0x0ab50,0x04b60,0x0aae4,0x0a570,0x05260,0x0f263,0x0d950,0x05b57,0x056a0,//1960-1969
43 | 0x096d0,0x04dd5,0x04ad0,0x0a4d0,0x0d4d4,0x0d250,0x0d558,0x0b540,0x0b6a0,0x195a6,//1970-1979
44 | 0x095b0,0x049b0,0x0a974,0x0a4b0,0x0b27a,0x06a50,0x06d40,0x0af46,0x0ab60,0x09570,//1980-1989
45 | 0x04af5,0x04970,0x064b0,0x074a3,0x0ea50,0x06b58,0x055c0,0x0ab60,0x096d5,0x092e0,//1990-1999
46 | 0x0c960,0x0d954,0x0d4a0,0x0da50,0x07552,0x056a0,0x0abb7,0x025d0,0x092d0,0x0cab5,//2000-2009
47 | 0x0a950,0x0b4a0,0x0baa4,0x0ad50,0x055d9,0x04ba0,0x0a5b0,0x15176,0x052b0,0x0a930,//2010-2019
48 | 0x07954,0x06aa0,0x0ad50,0x05b52,0x04b60,0x0a6e6,0x0a4e0,0x0d260,0x0ea65,0x0d530,//2020-2029
49 | 0x05aa0,0x076a3,0x096d0,0x04bd7,0x04ad0,0x0a4d0,0x1d0b6,0x0d250,0x0d520,0x0dd45,//2030-2039
50 | 0x0b5a0,0x056d0,0x055b2,0x049b0,0x0a577,0x0a4b0,0x0aa50,0x1b255,0x06d20,0x0ada0,//2040-2049
51 | 0x14b63,0x09370,0x049f8,0x04970,0x064b0,0x168a6,0x0ea50,0x06b20,0x1a6c4,0x0aae0,//2050-2059
52 | 0x0a2e0,0x0d2e3,0x0c960,0x0d557,0x0d4a0,0x0da50,0x05d55,0x056a0,0x0a6d0,0x055d4,//2060-2069
53 | 0x052d0,0x0a9b8,0x0a950,0x0b4a0,0x0b6a6,0x0ad50,0x055a0,0x0aba4,0x0a5b0,0x052b0,//2070-2079
54 | 0x0b273,0x06930,0x07337,0x06aa0,0x0ad50,0x14b55,0x04b60,0x0a570,0x054e4,0x0d160,//2080-2089
55 | 0x0e968,0x0d520,0x0daa0,0x16aa6,0x056d0,0x04ae0,0x0a9d4,0x0a2d0,0x0d150,0x0f252,//2090-2099
56 | 0x0d520];//2100
57 |
58 | // 二十四节气数据，节气点时间(单位是分钟)从0小寒起算
59 | var termInfo=[0,21208,42467,63836,85337,107014,128867,150921,173149,195551,218072,240693,263343,285989,308563,331033,353350,375494,397447,419210,440795,462224,483532,504758];
60 | // 二十四节气
61 | var solarTerm =['小寒','大寒','立春','雨水','惊蛰','春分','清明','谷雨','立夏','小满','芒种','夏至','小暑','大暑','立秋','处暑','白露','秋分','寒露','霜降','立冬','小雪','大雪','冬至'];
62 |
63 | // 农历月
64 | var monthCN=['正月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'];
65 | // 农历日
66 | var dayCN=['初一','初二','初三','初四','初五','初六','初七','初八','初九','初十','十一','十二','十三','十四','十五','十六','十七','十八','十九','二十','廿一','廿二','廿三','廿四','廿五','廿六','廿七','廿八','廿九','三十','卅一'];
67 |
68 | // 天干
69 | var heavenlyStems=['甲','乙','丙','丁','戊','己','庚','辛','壬','癸'];
70 | // 地支
71 | var earthlyBranches=['子','丑','寅','卯','辰','巳','午','未','申','酉','戌','亥'];
72 | // 地支十二生肖
73 | var chinaZodiac=['鼠','牛','虎','兔','龙','蛇','马','羊','猴','鸡','狗','猪'];
74 |
75 | // 星期
76 | var weekend=['星期一','星期二','星期三','星期四','星期五','星期六','星期日'];
77 |
78 | // 国内传统节日
79 | var domesticFestival={
80 | 'd0101':'春节 ',
81 | 'd0115':'元宵节',
82 | 'd0202':'龙头节',
83 | 'd0505':'端午节',
84 | 'd0707':'七夕节',
85 | 'd0715':'中元节',
86 | 'd0815':'中秋节',
87 | 'd0909':'重阳节',
88 | 'd1001':'寒衣节',
89 | 'd1015':'下元节',
90 | 'd1208':'腊八节',
91 | 'd1223':'小年'
92 | }
93 |
94 | // 国际节日
95 | var interFestival={
96 | 'i0202':'湿地日,1996',
97 | 'i0308':'妇女节,1975',
98 | 'i0315':'消费者权益日,1983',
99 | 'i0401':'愚人节,1564',
100 | 'i0422':'地球日,1990',
101 | 'i0501':'劳动节,1889',
102 | 'i0512':'护士节,1912',
103 | 'i0518':'博物馆日,1977',
104 | 'i0605':'环境日,1972',
105 | 'i0623':'奥林匹克日,1948',
106 | 'i1020':'骨质疏松日,1998',
107 | 'i1117':'学生日,1942',
108 | 'i1201':'艾滋病日,1988',
109 | 'i0101':'元旦',
110 | 'i0312':'植树节,1979',
111 | 'i0504':'五四青年节,1939',
112 | 'i0601':'儿童节,1950',
113 | 'i0701':'建党节,1941',
114 | 'i0801':'建军节,1933',
115 | 'i0903':'抗战胜利日,1945',
116 | 'i0910':'教师节,1985',
117 | 'i1001':'国庆节,1949',
118 | 'i1224':'平安夜',
119 | 'i1225':'圣诞节',
120 | 'i0214':'情人节',
121 | 'i0520':'母亲节,1913',
122 | 'i0630':'父亲节',
123 | 'i1144':'感恩节'
124 | }
125 |
126 | /**********************************************
127 | * 变量声明优化(待优化)
128 | * 1、通过一个var声明多个变量
129 | * 2、通过字符串存储数据,不使用数组存储数据
130 | **********************************************/
131 |
132 |
133 |
134 | /**
135 | * 返回制定年月的日期视图
136 | *
137 | * eg: var cal=getCalendar(2016,4);
138 | *
139 | * 28 29 30 31 1 2 3
140 | * 4 5 6 7 8 9 10
141 | * 11 12 13 14 15 16 17
142 | * 18 19 20 21 22 23 24
143 | * 25 26 27 28 29 30 01
144 | *
145 | * 说明: 示例中只显示了公历的日期,真实的返回内容要包括
146 | * 农历,天干地支,国际节日,国内节日,节气,放假安排,黄历信息(每日宜忌)
147 | *
148 | * @param {Number} y
149 | * @param {Number} m
150 | */
151 | function getCalendar(y,m){
152 | var view=[];
153 |
154 | y=parseInt(y,10);
155 | m=parseInt(m,10);
156 |
157 | var pYear=m==1?y-1:y;
158 | var pMonth=m==1?12:m-1;
159 | var nYear=m==12?y+1:y;
160 | var nMonth=m==12?1:m+1;
161 |
162 | // 当月第一天星期几
163 | var w=getWeek(y,m,1);
164 |
165 | // 获取当月天数
166 | var cDays=getMonthDays(y,m);
167 | // 获取上个月的天数
168 | var pDays=getMonthDays(pYear,pMonth);
169 |
170 | var pFill=w-1; // 需要向前补充的天数
171 | var nFill=7-((pFill+cDays)%7==0?7:(pFill+cDays)%7); // 需要向后补充的天数
172 |
173 |
174 | // 填充当月的公历日期
175 | for(var i=pDays-pFill+1;i<=pDays;i++){
176 | var week=getWeek(pYear,pMonth,i);
177 | view.push({solarCalendar:{year:pYear,month:pMonth,day:i,week:weekend[week-1],othermonth:true}});
178 | }
179 | for(var i=1;i<=cDays;i++){
180 | var week=getWeek(y,m,i);
181 | view.push({solarCalendar:{year:y,month:m,day:i,week:weekend[week-1],othermonth:false}});
182 | }
183 | for(var i=1;i<=nFill;i++){
184 | var week=getWeek(nYear,nMonth,i);
185 | view.push({solarCalendar:{year:nYear,month:nMonth,day:i,week:weekend[week-1],othermonth:true}});
186 | }
187 |
188 | // 遍历当月的每一天
189 | for(var i=0;i
17 |
18 |
26 | @魏国兴
19 |
20 | 2016-04-13 23:40
21 |
22 | 字数 1018
23 | 阅读 0
24 |
25 |
27 |
28 |
29 |
30 |
31 | 32 |
59 | 60 |
114 |
116 | 
万年历 Calender
30 | 31 | 32 |
一、摘要
33 |34 |
35 |
56 |
57 |
58 | 59 | 60 |
二、简介
61 |本款万年历实现了农历，公历，天干地支，24节气，国内国际假日，每日宜忌（08年~20年），节假日（14年~16年）的查询。
万年历界面采用百度日历UI界面，核心JS代码手动编写，没有依赖函数库。代码采用模块式开发，gulp构建，HBuilder开发。
62 | 另用node-webkit打包了一版桌面应用，方便使用。
三、开发流程
66 |-
67 |
- 选择一款日历UI（经过筛选，百度日历的UI比较简洁漂亮）。 68 |
- 编写JavaScript核心代码，实现农历、公历等日期信息参数的查询。 69 |
- 将JavaScript代码和UI界面，整合到一起。期间涉及DOM生成模块（实现模板功能），Event模块，CSS模块（切换主题和UI），日历算法核心模块，仿jQuery模块（工具类）。 70 |
- 使用gulp前端构建工具打包发布工程。 71 |
- 编写开发文档。 72 |
四、主要模块
75 |-
76 |
- 核心算法模块（calender.js） 77 |
- 仿jQuery模块，提供工具函数（common.js） 78 |
- Dom模块，生成HTML页面结构（dom.js） 79 |
- Event模块，日历中各种事件（event.js） 80 |
- 入口模块（main.js） 81 |
五、目录结构
84 |
六、接口文档
87 |日历主要有两个全局变量window.Calendar和window.DOM，Calender类主要实现了日历相关的功能，DOM类实现了主要的jQuery函数。
88 | 89 |1. Calendar类
90 |
2. Dom类
93 |
七、调试日历
96 |
八、移动适配
99 |100 |
/* 小屏幕（平板，大于等于 768px） */@media (max-width: 600px) {.op-calendar-new-right{display:none;}.c-container{width:409px;border-right: 2px solid #57abff;}}
九、后续开发
104 |-
105 |
- 模块之间通过require加载。 106 |
- CSS通过Less等css编译工具编译完成。 107 |
- 只做了简单媒体查询样式代码的编写，移动端适配的功能有待完善和开发。 108 |
- 对HTML结构要求比较苛刻,暂不支持模板替换和主题替换。 109 |
十、总结
112 |限于时间原因，不能更多的书写详细的文档，还希望各位大神拜读源码了。通过该项目又一次发现了自己技术的不足，需要继续学习....
113 |114 |
作者 魏国兴
邮箱 1607646162@qq.com
2016 年 04月 13日
<%=today%> <%=week%>
'; 151 | dtmpl+='<%=dayTime%>
'; 152 | dtmpl+=''; 153 | dtmpl+='<%=lunarMonth%><%=lunarDay%><%=eraYear%>年 【<%=zodiac%>】<%=eraMonth%>月 <%=eraDay%>日
'; 154 | dtmpl+='';
155 | dtmpl+='
';
159 |
160 |
161 | for(var i in month){
162 | var dateDay=month[i].solarCalendar.year+'-'+month[i].solarCalendar.month+'-'+month[i].solarCalendar.day;
163 | if(dateDay===y+'-'+m+'-'+d){
164 | break;
165 | }
166 | }
167 | var selectedDay=month[i];
168 |
169 | m=m<10?'0'+m:m;
170 | d=d<10?'0'+d:d;
171 |
172 | var yDay=selectedDay.almanac?selectedDay.almanac.y.split('.').slice(0,6).join(''; 156 | dtmpl+='宜<%=yDay%>'; 157 | dtmpl+='忌<%=jDay%>
'; 158 | dtmpl+=''):'无'; 173 | var jDay=selectedDay.almanac?selectedDay.almanac.j.split('.').slice(0,6).join('
'):'无'; 174 | var day={ 175 | today:y+'-'+m+'-'+d, 176 | dayTime:d, 177 | week:selectedDay.solarCalendar.week, 178 | lunarMonth:selectedDay.lunarCalendar.month, 179 | lunarDay:selectedDay.lunarCalendar.day, 180 | eraYear:selectedDay.chinaEra.year, 181 | eraMonth:selectedDay.chinaEra.month, 182 | eraDay:selectedDay.chinaEra.day, 183 | zodiac:selectedDay.chinaEra.zodiac, 184 | yDay:yDay, 185 | jDay:jDay 186 | } 187 | dtmpl=$.template(dtmpl,day); 188 | $('.op-calendar-new-right').html(dtmpl); 189 | 190 | } 191 | 192 | /** 193 | * 初始化年月,节日选择控件 194 | * @param {Number} y 195 | * @param {Number} m 196 | */ 197 | function dropDownHTML(y,m,d){ 198 | 199 | /** 200 | * 万年历支持查询的年份范围 201 | */ 202 | var minYear = 1899;//最小年限 203 | var maxYear = 2100;//最大年限 204 | 205 | // 国内传统节日 206 | var festival={ 207 | 'default':'假期安排', 208 | 'i0101':'元旦 ', 209 | 'd0101':'春节 ', 210 | 'd0115':'元宵节', 211 | 'd0202':'龙头节', 212 | 'd0505':'端午节', 213 | 'd0707':'七夕节', 214 | 'd0715':'中元节', 215 | 'd0815':'中秋节', 216 | 'd0909':'重阳节', 217 | 'd1001':'寒衣节', 218 | 'd1015':'下元节', 219 | 'd1208':'腊八节', 220 | 'd1223':'小年' 221 | }; 222 | var html=''; 223 | for(var i=minYear+1;i