基于百度万年历定制化 1

简介: 项目需求:某门户项目需要在右上角添置一个日期(yyyy-MM-dd)的显示,同时点击此时间可以弹出一个窗体,窗体内容为万年历。万年历需求:1、日志显示24节气,且24节气内容可配置2、对法定节假日可进行配置管理项目开发周期:一周项目技术选择:1、基于网上现存的万年历组件进行扩展2、.Net MVC 开发一个Web项目进行内容配置准备首先我需要在网上找到一个相对完善的万年历模板,经过多番寻找,总算是找到了一个见如下链接,组件默认实现了很多的功能。

项目需求:

某门户项目需要在右上角添置一个日期(yyyy-MM-dd)的显示,同时点击此时间可以弹出一个窗体,窗体内容为万年历。
万年历需求:
1、日志显示24节气,且24节气内容可配置
2、对法定节假日可进行配置管理

项目开发周期:

一周

项目技术选择:

1、基于网上现存的万年历组件进行扩展
2、.Net MVC 开发一个Web项目进行内容配置

准备

首先我需要在网上找到一个相对完善的万年历模板,经过多番寻找,总算是找到了一个见如下链接,组件默认实现了很多的功能。

img_cf6c0a007d8aa2e46bc9e0b9d156741a.png
image.png

下载下来之后我需要对其内容进行修改,当我们打开文件结构时,我们发现所有的页面元素都已经被压缩过了,这就使得代码很难阅读,不方便我们后期的更改。这个时候一个神奇就出现了,LZ在之前的文章中也提到过,Jsbeautifier JS代码美化库,通过使用此工具我们可以将前台的代码进行格式化输出,同理对目录下的其他文件也可使用此方法,最后结果如图2所示

img_49d4f6e7b6f90e0cec6c21012717bbcc.png
图1.png
img_0db6e99d56f091b3e963d38d049f2e55.png
图2.png

此时,代码阅读就很方便了。然后我们开始根据需求进行更改代码
1、首先我们不需要如下模块,将此模块内容更改为节日内容,如果点击日期是某个节气,显示具体内容,否则显示“无”。


img_527f500624513993f73c94789a49cfe6.png
image.png

2、下如所示“2015年假日安排”以及下拉框内容要将静态数据改为动态获取的方式,我们找到代码段见下图,将此处内容之后更改为AJAX动态获取。

img_fcaa89530f3652024f37e45feb97c0bb.png
image.png
img_73841d8f6aa6e0071d57db53fd86d442.png
image.png

思路

如图我们可以看到window.OB.RILi开头的内容对应的就是下拉框的显示数据以及各种前台绑定之。
dataRest:休息日
dataWork:工作日
dateFestival:假日
dateFestivalContent:节假日说明
dateAllFestival:所有的假期
jieqi24:新增加的节气

源程序内容,静态赋值

 window.OB = window.OB || {},
 window.OB.RiLi = window.OB.RiLi || {}, 
 window.OB.RiLi.dateRest = ["0101", "0102", "0103", "0218", "0219", "0220", "0221", "0222", "0223", "0224", "0404", "0405", "0406", "0501", "0502", "0503", "0620", "0621", "0622", "0903", "0904", "0905", "0926", "0927", "1001", "1002", "1003", "1004", "1005", "1006", "1007"],
  window.OB.RiLi.dateWork = ["0104", "0215", "0228", "0906", "1010"], 
  window.OB.RiLi.dateFestival = ["20150101||元旦", "20150219||春节", "20150405||清明节", "20150501||劳动节", "20150620||端午节", "20150903||抗战纪念日", "20150927||中秋节", "20151001||国庆节"], 
  window.OB.RiLi.dateAllFestival = ["正月初一|v,春节", "正月十五|v,元宵节", "二月初二|v,龙头节", "五月初五|v,端午节", "七月初七|v,七夕节", "七月十五|v,中元节", "八月十五|v,中秋节", "九月初九|v,重阳节", "十月初一|i,寒衣节", "十月十五|i,下元节", "腊月初八|i,腊八节", "腊月廿三|i,祭灶节", "0202|i,世界湿地日,1996", "0214|v,西洋情人节", "0308|i,国际妇女节,1975", "0315|i,国际消费者权益日,1983", "0422|i,世界地球日,1990", "0501|v,国际劳动节,1889", "0512|i,国际护士节,1912", "0518|i,国际博物馆日,1977", "0605|i,世界环境日,1972", "0623|i,国际奥林匹克日,1948", "0624|i,世界骨质疏松日,1997", "1117|i,世界学生日,1942", "1201|i,世界艾滋病日,1988", "0101|v,元旦", "0312|i,植树节,1979", "0504|i,五四青年节,1939", "0601|v,儿童节,1950", "0701|v,建党节,1941", "0801|v,建军节,1933", "0903|v,抗战胜利纪念日", "0910|v,教师节,1985", "1001|v,国庆节,1949", "1224|v,平安夜", "1225|v,圣诞节", "w:0520|v,母亲节,1913", "w:0630|v,父亲节", "w:1144|v,感恩节(美国)", "w:1021|v,感恩节(加拿大)"];

我们通过更改原来的方式,通过ajax获取数据,数据放在一个json文件中,文件内容见下图

img_0a62514abd1961e225fddc775c643a85.png
ajax调用.png

json文件内容

{
    "24jieqi": [
        {
            "name": "立春",
            "value": "斗指东北。太阳黄经为315度。是二十四个节气的头一个节气。其含义是开始进入春天,“阳和起蛰,品物皆春”,过了立春,万物复苏生机勃勃,一年四季从此开始了"
        },
        {
            "name": "雨水",
            "value": "斗指壬。太阳黄经为330°。这时春风遍吹,冰雪融化,空气湿润,雨水增多,所以叫雨水。人们常说:“立春天渐暖,雨水送肥忙”。"
        }
    ],
    "dateRest": [
        "0101",
        "0102",
        "0103",
        "0218",
        "0219",
        "0220",
        "0221",
        "0222",
        "0223",
        "0224",
        "0404",
        "0405",
        "0406",
        "0501",
        "0502",
        "0503",
        "0620",
        "0621",
        "0622",
        "0903",
        "0904",
        "0905",
        "0926",
        "0927",
        "1001",
        "1002",
        "1003",
        "1004",
        "1005",
        "1006",
        "1007"
    ],
    "dateWork": [
        "0104",
        "0215",
        "0228",
        "0906",
        "1010"
    ],
    "dateFestival": [
        "20150101||元旦",
        "20150219||春节",
        "20150405||清明节",
        "20150501||劳动节",
        "20150620||端午节",
        "20150927||中秋节",
        "20151001||国庆节"
    ],
    "dateFestivalContent": [
        {
            "name": "国庆节",
            "value": "10月1日至7日放假调休,共7天。10月10日(星期六)上班。"
        },
        {
            "name": "中秋节",
            "value": "9月27日放假。"
        },
        {
            "name": "端午节",
            "value": "6月20日放假,6月22日(星期一)补休。"
        },
        {
            "name": "劳动节",
            "value": "5月1日放假,与周末连休。"
        },
        {
            "name": "清明节",
            "value": "4月5日放假,4月6日(星期一)补休。"
        },
        {
            "name": "春节",
            "value": "2月18日至24日放假调休,共7天。2月15日(星期日)、2月28日(星期六)上班。"
        },
        {
            "name": "元旦",
            "value": "1月1日至3日放假调休,共3天。1月4日(星期日)上班。"
        }
    ],
    "dateAllFestival": [
        "正月初一|v,春节",
        "正月十五|v,元宵节",
        "二月初二|v,龙头节",
        "五月初五|v,端午节",
        "七月初七|v,七夕节",
        "七月十五|v,中元节",
        "八月十五|v,中秋节",
        "九月初九|v,重阳节",
        "十月初一|i,寒衣节",
        "十月十五|i,下元节",
        "腊月初八|i,腊八节",
        "腊月廿三|i,祭灶节",
        "0202|i,世界湿地日,1996",
        "0214|v,西洋情人节",
        "0308|i,国际妇女节,1975",
        "0315|i,国际消费者权益日,1983",
        "0422|i,世界地球日,1990",
        "0501|v,国际劳动节,1889",
        "0512|i,国际护士节,1912",
        "0518|i,国际博物馆日,1977",
        "0605|i,世界环境日,1972",
        "0623|i,国际奥林匹克日,1948",
        "0624|i,世界骨质疏松日,1997",
        "1117|i,世界学生日,1942",
        "1201|i,世界艾滋病日,1988",
        "0101|v,元旦",
        "0312|i,植树节,1979",
        "0504|i,五四青年节,1939",
        "0601|v,儿童节,1950",
        "0701|v,建党节,1941",
        "0801|v,建军节,1933",
        "0903|v,抗战胜利纪念日",
        "0910|v,教师节,1985",
        "1001|v,国庆节,1949",
        "1224|v,平安夜",
        "1225|v,圣诞节",
        "w:0520|v,母亲节,1913",
        "w:0630|v,父亲节",
        "w:1144|v,感恩节(美国)",
        "w:1021|v,感恩节(加拿大)"
    ]
}

通过这样的方式将原来写死在页面上的数据,变为数据可通过json文件配置。
新增了一个点击事件——鼠标点击,如果为节气,显示节气内容,我们添加如下的一段内容即可

img_564cbddec6f89166a8bf404e667b8583.png
点击事件.png

到现在位置,功能已全部实现,只不过内容代码都是html+css+js基本结构,没有将数据可配置化在数据库中。

img_aaaee79d1453b5919f6935fc68d1bbe5.png
结果演示.png

代码下载地址:后续放开

目录
相关文章
|
2月前
|
存储 SQL 人工智能
新年将至,为大家推荐一款开源AI红包封面制作神器AiCover!
新年将至,为大家推荐一款开源AI红包封面制作神器AiCover!
|
29天前
|
小程序 前端开发 JavaScript
微信小程序|电影交流平台小程序的设计与实现
微信小程序|电影交流平台小程序的设计与实现
仿网易官网顶部展出的大幅广告代码,附效果演示
仿网易官网顶部展出的大幅广告代码,附效果演示
|
8月前
|
小程序 搜索推荐 前端开发
【开题报告】基于微信小程序的旅游攻略分享平台的设计与实现
【开题报告】基于微信小程序的旅游攻略分享平台的设计与实现
191 0
|
12月前
|
移动开发 前端开发 JavaScript
参考虎牙斗鱼开发娱乐游戏直播系统示例源码
在当今数字化互联网时代,娱乐游戏直播平台成为了全球范围内备受欢迎的娱乐形式。东莞梦幻网络科技有限公司以其开发的游戏直播系统源码而备受瞩目,该系统仿虎牙斗鱼等知名平台。本文将深入探讨该项目的开发和基础功能模块,以及提供的多种开播方式。
|
监控 测试技术 开发工具
移动端 iOS 年终工作总结-纯干货请自备酒水(下)
移动端 iOS 年终工作总结-纯干货请自备酒水(下)
248 0
移动端 iOS 年终工作总结-纯干货请自备酒水(下)
游戏+娱乐直播源码是干嘛的?为什么能轻松开发类似虎牙斗鱼平台
本文将深入探讨“东莞梦幻网络科技”的娱乐游戏直播源码的作用以及其为何能轻松开发类似平台,同时详解无需开发的优势和避免的风险。
|
JavaScript 小程序
微信小程序精准定位百度
微信小程序精准定位百度
91 0
|
移动开发 JavaScript Java
游戏转播平台源码分享(类虎牙斗鱼系统源码)
数字化时代,娱乐游戏产业蓬勃发展,游戏转播平台成为了各类游戏爱好者分享游戏乐趣的热门选择。为满足市场需求,东莞梦幻网络科技开发了一款全功能的游戏转播平台源码,该源码可供开发者搭建类似于虎牙斗鱼平台的系统。具备APP安卓端、APP苹果端、H5网页端和PC端的游戏转播平台,提供游戏转播、视频模块、社区论坛、新闻话题等多样化功能。采用了PHP、Java、Vue和Objective-C 编程语言开发。
|
小程序 数据库 Android开发
微信小程序云开发校园社交二手物品跳蚤平台表白动态求助寻物组队
微信小程序云开发校园社交二手物品跳蚤平台表白动态求助寻物组队
185 1
微信小程序云开发校园社交二手物品跳蚤平台表白动态求助寻物组队