<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自制日历</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.calendar{
position: relative;
width: 350px;
height: 50px;
}
.header{
border: 1px solid black;
position: relative;
width: 342px;
text-align: center;
}
.year{
display: inline-block;
width: ;
}
.month{
display: inline-block;
}
.week{
padding: 0;
margin: 0;
}
.item{
float: left;
list-style: none;
width: 48px;
height: 21px;
text-align: center;
padding: 0;
margin: 0;
border-left:1px solid black ;
border-bottom: 1px solid black;
}
.item:last-child{
border-right: 1px solid black;
}
ul{
margin: 0;
padding: 0;
height: 21px;
}
.active{
background-color: dodgerblue;
}
.last,.prev{
background-color: #ccc;
}
</style>
</head>
<body>
<div id="app">
<div class="calendar">
<div class="header">
<div class="year">{{year+"年"}}</div>
<div class="month">{{month+"月"}}</div>
</div>
<ul class="week">
<li class="item">一</li>
<li class="item">二</li>
<li class="item">三</li>
<li class="item">四</li>
<li class="item">五</li>
<li class="item">六</li>
<li class="item">日</li>
</ul>
<ul class="dayList" v-for="(line,lineIndex) in showData" >
<li class="item" v-for="(showDay,dayIndex) in line" :class="{active:day==showDay}">{{showDay}}</li>
</ul>
</div>
<!--按钮组-->
<button type="button" @click="nextMonth">下一月</button>
<button type="button" @click="nextYear">下一年</button>
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
//记录年月日
year:"",
month:"",
day:"",
//要展示和绑定的数据
showData:[[],[],[],[],[],[]],
prevDay:-1,//第1行占多少天
weekDay:7,//星期天数
allDay:42,//6行一共的天数
monthDay:[],//保存当前年每月的天数
},
created:function(){
var date = new Date();
this.year = date.getFullYear();
this.month = date.getMonth()+1;
this.day = date.getDate();
this.monthDay = this.getMonthDay(this.year);
this.week = this.getWeek(this.year);
//初始化数据
this.changeDay();
},
methods:{
//判断是不是闰年
isLearYear:function(year){
var condition1 = year % 4 == 0;
var condition2 = year % 100 !=0;
var condition3 = year % 400 ==0;
return condition1 && condition2 || condition3;
},
//获得当前年的每月的天数
getMonthDay:function(year){
var _arr=[31,31,30,31,30,31,31,30,31,30,31];
if(this.isLearYear(year)){
//闰年
_arr.splice(1,0,29);
return _arr;
}else{
//平年
_arr.splice(1,0,28);
return _arr;
}
},
//当前年的一月一日是星期几
getWeek:function(year){
var _arr=["Mon","Web","Sat","Thu","Fri","Sat","Sun"];
var week = new Date(year+","+1+","+1).toString().split(" ")[0];
return _arr.indexOf(week);
}
,
//修改天数数据
changeDay:function(){
var _arr=[[],[],[],[],[],[]];
var index = Number(this.month-1);
var day =1;
//初始化
if(index == 0 ){
//1月
this.prevDay == this.week;
this.$set(this,"prevDay",this.week);
}else{
var allPrevDay=0;
for(var i=0;i<index;i++){
allPrevDay+=this.monthDay[i];
}
this.prevDay = (allPrevDay+this.week) % this.weekDay;
}
//第一行
for(var i=0;i<7;i++){
if(i<this.prevDay){
_arr[0].push("");
}else{
_arr[0].push(day);
day++;
}
}
//第二到第四行
for(var j=0;j<3;j++){
for(var k=0;k<7;k++){
_arr[j+1].push(day);
day++;
}
}
//第五行
for(var q=0;q<7;q++){
if(day > this.monthDay[index]){
_arr[4].push("");
}else{
_arr[4].push(day);
day++;
}
}
//第六行
for(var s=0;s<7;s++){
if(day>this.monthDay[index]){
_arr[5].push("");
}else{
_arr[5].push(day);
day++
}
}
//第五和第六可以合并成2层嵌套循环
this.$set(this,"showData",_arr);
},
nextMonth:function(e){
if(this.month == 12){
this.$set(this,"month",1);
this.$set(this,"year",this.year+1);
this.$set(this,"monthDay",this.getMonthDay(this.year));
this.week = this.getWeek(this.year);
}else{
this.$set(this,"month",this.month+1);
}
this.day=1;
this.changeDay();
},
nextYear:function(e){
this.$set(this,"year",this.year+1);
this.$set(this,"monthDay",this.getMonthDay(this.year));
this.week = this.getWeek(this.year);
this.day=1;
this.changeDay();
},
}
});
</script>
</html>
