利用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就是1
var 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;
}
}())