<!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>