前期回顾：
用原生JS实现Windows日历（一）
用原生JS实现Windows日历（二）
切换视图
也就是日视图切换到月视图再切换到年视图。
//获取切换按钮
var optionBtn = document.querySelector('#option');
var optionType = 0;//定义0为日视图 1为月视图 2为年视图
var optionFlag;
optionBtn.onclick = function(){
optionFlag = optionType+1;
if(optionFlag > 2){
//超出之后保持在年视图
optionType = 2;
}else{
createView();
}
}
//渲染视图
//加进出动画效果在从日到年，还有另外从年到日
function createView(){
//这里是为了在一开始打开页面时候没有点击切换按钮情况去调用日视图渲染
if(optionFlag == undefined){
optionBtn.innerHTML = checkYear+'年'+addZero(checkMonth+1)+'月';
renderDayView(checkMonth,checkYear,main);
return;
}
//从日视图进月或月视图进年视图
if(optionType<optionFlag){
//动画效果div
bigMain.innerHTML = '<div class="toHide board"></div><div class="toShow board"></div>';
var dom = document.querySelectorAll('.board');
switch(optionFlag){
case 1:
//日视图切换到月份视图
optionBtn.innerHTML = checkYear+'年';
//月视图放在渐入div
renderMonth(checkYear,dom[1]);
//日视图放在逐渐消失的div
renderDayView(checkMonth,checkYear,dom[0]);
//记录当前视图处于哪个视图
optionType = optionFlag;
break;
case 2:
//月视图切换到年时图
var YearBegin = Math.floor(checkYear/10)*10;
optionBtn.innerHTML = YearBegin+'-'+(YearBegin+9)+'年';
//年视图准备进入
renderYear(checkYear,dom[1]);
//月视图逐渐消失
renderMonth(checkYear,dom[0]);
//记录当前视图处于哪个视图
optionType = optionFlag;
break;
}
}else{
//这种情况是出现在点击某个年份或者某个月份时候进入新视图
bigMain.innerHTML = '<div class="toBlow board"></div><div class="toNarrow board"></div>';
var dom = document.querySelectorAll('.board');
switch(optionFlag){
case 0:
//月视图切换到日视图
optionBtn.innerHTML = checkYear+'年'+addZero(checkMonth+1)+'月';
renderMonth(checkYear,dom[0]);
renderDayView(checkMonth,checkYear,dom[1]);
optionType = optionFlag;
break;
case 1:
//年视图切换到月时图
optionBtn.innerHTML = checkYear+'年';
renderMonth(checkYear,dom[1]);
renderYear(checkYear,dom[0]);
optionType = optionFlag;
break;
}
}
}
这里面的renderDayView()、renderMonth（）、renderYear（）三个方法进行了稍微的改进去适合加入动画效果以及适应切换视图后的变量调整，接下来看看调整后
//年，月，渲染节点
function renderDayView(month,year,dom){
var lastMonth = month+1;
if(lastMonth == 12){
lastMonth = 0;
}
//获取这个月有多少天
var dayNum = new Date(year,lastMonth,0).getDate();
//获取这个月第一天第一天周几
var weekIndex = new Date(year,month,1).getDay();
//获取上个月最后一天
var prevMonthDay = new Date(year,month,0).getDate();
//拼接ul
var insertUl = '<ul class="date">';
for(var i=0;i< showDay; i++){
//拼接上个月的
if(i<weekIndex){
insertUl += '<li class="date-cell other-date">'+ (prevMonthDay+i+1 - weekIndex ) +'</li>';
}else if(i-weekIndex<dayNum){
//今个月的
if(i +1 - weekIndex == dateNow && year == yearNow && month == monthNow){
// 就是·今日·
insertUl += '<li class="date-cell active">'+ (i +1 - weekIndex ) +'</li>';
}else{
insertUl += '<li class="date-cell">'+ (i +1 - weekIndex ) +'</li>';
}
}else{
//下个月的
insertUl += '<li class="date-cell other-date">'+ (i - dayNum-weekIndex+1) +'</li>';
}
}
dom.innerHTML = insertUl;
}
//渲染月份 参数 年，渲染节点
function renderMonth(year,dom){
var insertUl = '<ul class="month">';
for (var i =1;i<=12;i++){
if(i==monthNow+1 && year == yearNow){
insertUl += '<li class="month-cell active">'+i+'月</li>';
}else{
insertUl += '<li class="month-cell">'+i+'月</li>';
}
}
insertUl += '</ul>';
dom.innerHTML = insertUl;
var li = dom.querySelectorAll("li");
li.forEach(function(item){
item.onclick = function(){
//更换月份
checkMonth = parseInt(this.innerHTML)-1;
//比较视图为0，这样在createView方法里可以走月视图进入日视图
optionFlag = 0;
createView();
};
});
}
//渲染年份
//显示16个年份,10个今年的，最前面有前十年的（4个）,后面十年的2个
function renderYear(year,dom){
var nowYearBegin = Math.floor(year/10)*10;
var insertUl = '<ul class="year">';
for(i=0;i<16;i++){
if(i<4){
insertUl += '<li class="year-cell other-yaer">'+(nowYearBegin+i-4)+'</li>';
}else if(i-4<10){
if(nowYearBegin+i-4 == year){
insertUl += '<li class="year-cell active">'+(nowYearBegin+i-4)+'</li>';
}else{
insertUl += '<li class="year-cell">'+(nowYearBegin+i-4)+'</li>';
}
}else{
insertUl += '<li class="year-cell other-yaer">'+(nowYearBegin+i-4)+'</li>';
}
}
insertUl += '</ul>';
dom.innerHTML = insertUl;
var li = dom.querySelectorAll("li");
li.forEach(function(item){
item.onclick = function(){
//更换年份
checkYear = parseInt(this.innerHTML);
//同理
optionFlag = 1;
createView();
};
});
}
现在已经可以随意切换视图并且时间也正确了最后一步就是按上下去切换上一年/月/日或下一年/月/日。
上滑下滑效果
//上下切换
var prev = document.querySelector('#prev');
var next = document.querySelector('#next');
//上滑
prev.onclick = function(){
slideView(-1);
};
//下滑
next.onclick = function(){
slideView(1);
}
function slideView(index){
if(index<0){
//上滑
bigMain.innerHTML = '<div class="bottomOut board"></div><div class="board toBottom"></div>';
var board = bigMain.querySelectorAll(".board");
viewMove(index,board);
}else{
//下滑
bigMain.innerHTML = '<div class="topOut board"></div><div class="board toTop"></div>';
var board = bigMain.querySelectorAll(".board");
viewMove(index,board);
}
}
//上滑下滑视图对象封装
function viewMove(type,board){
//先看处于什么视图
switch(optionType){
case 0:
renderDayView(checkMonth,checkYear,board[0]);
//日视图
if(type<0){
checkMonth--;
}else{
// 月份加1
checkMonth++;
}
//实例化切换后的对象
slideDate(checkMonth,checkYear);
optionBtn.innerHTML = checkYear+'年'+addZero(checkMonth+1)+'月';
renderDayView(checkMonth,checkYear,board[1]);
break;
case 1:
//月视图
renderMonth(checkYear,board[0]);
if(type<0){
checkYear--;
}else{
checkYear++;
}
//实例化切换后的对象
slideDate(checkMonth,checkYear);
optionBtn.innerHTML = checkYear+'年';
renderMonth(checkYear,board[1]);
break;
case 2:
//年时图
renderYear(checkYear,board[0]);
if(type<0){
checkYear = checkYear-10;
}else{
checkYear = checkYear+10;
}
//实例化切换后的对象
slideDate(checkMonth,checkYear);
var YearBegin = Math.floor(checkYear/10)*10;
optionBtn.innerHTML = YearBegin+'-'+(YearBegin+9)+'年';
renderYear(checkYear,board[1]);
}
}
//重新实例化日期对象
function slideDate(month,year){
var date = new Date(year,month);
checkYear = date.getFullYear();
checkMonth = date.getMonth();
}
这个项目就到此为止了，学了js的一些基本知识和关于日期的知识后可以拿来练一练手。这个项目的源代码源代码链接
效果：JS实现Windows日历
喜欢的朋友们，可以点一个关注，谢谢你·~
1070
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
