利用monment库做一个日历表

先看完成品
点击上月和下月根据当前系统的时间进行变化
这是布局

 <div class="wapper"><div class="top"><div class="topTime"></div><div class="topDay"></div></div><div class="bottom"><div class="boTop clearFix"><div class="lf"></div><div class="rg"><span class="shang">上月</span><span class="xia">下月</span></div></div><div class="boCent clearFix"></div><div class="boCont clearFix"></div></div></div>

布局没啥好说的基本上就是简单的结构布局，里面的内容都是通过js生成的

然后是css样式表

*{padding: 0;margin: 0;list-style: none;
}
body{background: rgb(51, 51, 51);
}
.clearFix::after{clear: both;content: "";display: block;
}
.lf{float: left;
}
.rg{float:right;
}
.wapper{width: 420px;margin: 200px auto 0px;border-width: 1px;border-style: solid;border-color: rgb(68, 68, 68);background: rgb(45, 45, 45);color: rgb(239, 239, 239);
}
.wapper .top {padding: 20px 35px;border-bottom: 1px solid rgb(83, 83, 83);
}
.wapper .top .topTime{font-size: 40px;
}
.wapper .top .topDay{font-size: 14px;color: rgb(153, 153, 153);
}
.wapper .bottom{padding: 20px 20px;
}
.wapper .bottom .boTop .rg span{margin-right:14px;font-size: 16px;cursor: pointer;
}
.wapper .bottom .boTop{margin-bottom: 20px;padding:0 15px;}
.wapper .bottom .boTop .rg span:last-of-type{margin-right: 0;
}
.wapper .bottom .boCent {padding-left: 17px;
}
.wapper .bottom .boCent span{margin-right:38px;
}
.wapper .bottom .boCent span:last-of-type{margin-right: 0;
}
.wapper .bottom  .boCont{margin-top: 20px;
}
.wapper .bottom  .boCont li{float: left;width: 54px;height: 54px;
}
.wapper .bottom  .boCont li.color{color: rgb(110, 110, 110);
}
.wapper .bottom  .boCont li.active{background: rgb(0, 120, 215);
}
.wapper .bottom  .boCont li span{display: block;text-align: center;}

都是用css2来做的，这个布局可以用css3弹性盒子来做，目前还没掌握css3所以就用的传统布局
不过样式布局都好说主要是里面的js代码的实现过程

JS部分

这首先选中这些dom元素没啥好说的
日历的关键点在于如何生成上个月的结尾那几天和下个月开始那几天的天数，怎么得到这些天数
这里通过确定当月的第一天是在星期几，和当月有多少天来确定的上一个月和下一个月的开头和结尾部分
就在js里面打备注了

(function () {var topTime = document.querySelector('.topTime');var topDay = document.querySelector('.topDay');var boCent = document.querySelector('.boCent');var boCont = document.querySelector('.boCont');var nowMonth = document.querySelector('.boTop .lf');var shang = document.querySelector('.shang');var xia = document.querySelector('.xia');moment.locale('zh-cn'); //全局，中文环境function nowTime() {topTime.innerHTML = moment().format('LTS'); //这里是让当前的时间进行变化}//当前的日期和农历topDay.innerHTML = moment().format("YYYY年MMMDD日")  + nongBian(moment().year(),moment().month() + 1,moment().date()); nowTime();setInterval(nowTime, 1000);//遍历星期//星期每周只有七天所以就直接获取每一周的天数进行遍历，//没有直接生成的原因是因为考虑到另一个情况，用户参数可能为英文版的，周日是在第一天var nowWeek = moment.weekdaysMin(true);nowWeek.forEach(function (index) {boCent.innerHTML += '<span>' + index + '</span>';})function nowMonthDay(data) {return data.daysInMonth();//返回的是这个月的天数}function upMonthDay(data) {return data.startOf('month').weekday();//这个方法是找到当月第一天在星期几}// 遍历日历var today = moment();State(today);function State(data) {var upMonDay = nowMonthDay(data.clone().subtract(1,'month'))//上一个月的最后一天是多少日var nowMonDaycont = nowMonthDay(data);//当月的天数var nowFristWeekDay = upMonthDay(data.clone());//当月第一天在星期几，用于遍历上个月的那几天var lastMonDay = 0;//下个月的遍历用var str = ''for (var i = 0; i < 42; i++) {//就是让i一直加，比这个月第一天的星期几小就遍历几遍if (i < nowFristWeekDay) {//上个月的遍历str = '<li class="color">' +'<span> ' + upMonDay + '</span>' +'<span> ' + nongBian(data.year(),data.month(), upMonDay) + '</span>' +'</li>' + str;//防止顺遍历upMonDay --;}else if(i >= (nowMonDaycont + nowFristWeekDay)){//这是下个月的遍历//当月总天数加上当月第一天的星期几的索引位（上个月的天数）lastMonDay++;str +='<li class="color">' +'<span> ' + lastMonDay + '</span>' +//这是农历插件'<span>' + nongBian(data.year(),data.month() + 2,lastMonDay) +'</span>' +'</li>';}else{                       //i减去当月的第一天的索引位加1就是当月日期正排的循环数var cr = data.date() == (i - nowFristWeekDay + 1) ? "active" : "";//当天激活效果if(moment().year() != data.year() || moment().month() != data.month()){cr = '';}str +='<li class = "'  + cr + '">' +'<span> ' + (i - nowFristWeekDay + 1) + '</span>' +'<span>' +  nongBian(data.year(),data.month() + 1,i - nowFristWeekDay + 1) +'</span>' +'</li>';}}boCont.innerHTML = str;nowMonth.innerHTML = data.format('YYYY年MMM')}//上个月按钮shang.onclick = function(){State(today.subtract(1,'month'));}//下个月按钮xia.onclick = function(){State(today.add(1,'month'))}// 农历遍历，农历遍历是用的另外一个库，这个function nongBian(year,month,day){var result = '';                     //这个month参数是按照1为索引，不是计算机里面的0就是1var dayCn = window.calendar.solar2lunar(year,month,day);if(dayCn.IDayCn == '初一'){result = dayCn.IMonthCn;}else if(dayCn.Term){result = dayCn.Term;}else if(dayCn.festival){result = dayCn.festival;}else if(dayCn.lunarFestival){result = dayCn.lunarFestival;}else{result = dayCn.IDayCn;}return result;}
}())

利用monment库做一个日历表相关推荐

python rsa 公钥解密_python利用rsa库做公钥解密的方法教程
前言对于RSA的解密,即密文的数字的 D 次方求mod N 即可,即密文和自己做 D 次乘法,再对结果除以 N 求余数即可得到明文.D 和 N 的组合就是私钥(private key). 算法的加密 ...
Py之pygame：有趣好玩——利用pygame库实现一个移动底座弹球的小游戏
Py之pygame:有趣好玩--利用pygame库实现一个移动底座弹球的小游戏目录输出结果实现代码输出结果实现代码 # -*- coding: utf-8 -*-#Py之pygame:有趣好 ...
pygame小游戏代码_Py之pygame：有趣好玩——利用pygame库实现一个移动底座弹球的小游戏...
Py之pygame:有趣好玩--利用pygame库实现一个移动底座弹球的小游戏目录输出结果实现代码输出结果实现代码 # -*- coding: utf-8 -*-#Py之pygame:有 ...
html与css编程证书,利用CSS布局做一个简单的荣誉证书（代码示例）
本篇文章将给大家介绍如何使用css布局制作一个简单的荣誉证书,有趣且实用,希望对需要的朋友有所帮助! 那么利用css布局实现简单荣誉证书样式的效果是非常简单的,主要用到以下几个基础属性: backgr ...
乐鑫Esp32学习之旅⑦ esp32上利用GPIO中断做一个按键的短按和长按的回调事件，再也无须担心触发源。（附带Demo）
本系列博客学习由非官方人员半颗心脏潜心所力所写,仅仅做个人技术交流分享,不做任何商业用途.如有不对之处,请留言,本人及时更改. 1. 爬坑学习新旅程,虚拟机搭建esp32开发环境,打印 " ...
计算机硬盘电机利用,如何利用坏硬盘来做一个超强风扇，变废为宝利用坏硬盘来做一个超强风扇，变废为宝的方法...
今天给大家带来如何利用坏硬盘来做一个超强风扇,变废为宝,利用坏硬盘来做一个超强风扇,变废为宝的方法,让您轻松解决问题. 店里好多坏硬盘,回收了又值不了几个钱.今天无事,突发奇想,为什么不做个7200风 ...
初学者笔记（三）：利用python列表做一个最简单的垃圾分类
系列文章目录初学者笔记(一):利用python求100的因数初学者笔记(二):利用python输出一个1-100的奇数列表提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档文章目 ...
TCP传输：利用socket服务做一个文本转换器
转载请注明出处,谢谢:http://blog.csdn.net/harryweasley/article/details/45665291 最近看了一个教学视频,学习socket编程,里面有一个例子感 ...
利用PCL库做简单的三维立体图形
利用PCL库画简单的三维立体图形需要知道各种图形的参数方程,然后给每个参数赋值便可以. 圆柱面的参数方程为:x = R*cos(θ); y = R*sin(θ); z = z;其中 θ范围是[-2*P ...

利用monment库做一个日历表

利用monment库做一个日历表

然后是css样式表

JS部分

利用monment库做一个日历表相关推荐

最新文章

热门文章