html网站怎么做,优跃达官网网站建设项目,网站备案教育审批号,网站做外链多少钱使用Vue实现简单的日历。
原理分析#xff1a; 1.获取当前时间 2.显示当前时间 3.点击增加和减少月份 4.大月和小月的天数
效果演示
初始样式#xff08;显示现在的日期时间#xff09; 增加一个月 在程序开始之前一定注意#xff1a; 引入Vue.js架包
代码演示
Body…使用Vue实现简单的日历。
原理分析 1.获取当前时间 2.显示当前时间 3.点击增加和减少月份 4.大月和小月的天数
效果演示
初始样式显示现在的日期时间 增加一个月 在程序开始之前一定注意 引入Vue.js架包
代码演示
Body内容
script typetext/x-template idcalendar!-- 年份--div idyear!--月份 --div classmonthulli classarrow clickpickPre(currentYear,currentMonth)❮/lili classyear-month clickpickYear(currentYear,currentMonth)span classchoosen-year stylecolor:blue{{ currentYear }}/spanspan classchoosen-month stylecolor:blue{{ currentMonth }}月/span/lili classarrow clickpickNext(currentYear,currentMonth)❯/li/ul/div!-- 星期 --ul classweekdaysli一/lili二/lili三/lili四/lili五/lili stylecolor:red六/lili stylecolor:red日/li/ul!-- 日期 --ul classdays!-- 循环--li v-fordayobject in days!--本月--span v-ifdayobject.day.getMonth()1 ! currentMonth classother-month{{ dayobject.day.getDate() }}/span!--判断天数是否正确--span v-else!--今天--span v-ifdayobject.day.getFullYear() new Date().getFullYear() dayobject.day.getMonth() new Date().getMonth() dayobject.day.getDate() new Date().getDate()classactive{{ dayobject.day.getDate() }}/spanspan v-else{{ dayobject.day.getDate() }}/span/span/li/ul/div/scriptdiv idappcalendar/calendar/divCSS样式
* {margin: 0;padding: 0;}/*日历*/#calendar {width: 98%;border: 2px solid #A4A7B0;height: 335px;margin-left: 0.5%;}.month {width: 92%;height: 48px;border: 2px solid #FFFFFF;margin-left: 3%;margin-top: 20px;}.month ul {margin: 0;padding: 0;display: flex;margin-top: 11px;justify-content: space-between;}.year-month {flex-direction: column;align-items: center;justify-content: space-around;}.choosen-year {padding: 0 20px;font-size: 16px;font-weight: 200;}.choosen-month {text-align: center;font-size: 16px;font-weight: 200;}.arrow {width: 3%;height: 25px;}.arrow1 {background: url(left.png) no-repeat 0 0 /100% 100%;margin-left: 44px;}.arrow2 {background: url(right.png) no-repeat 0 0 /100% 100%;margin-right: 44px;}.month ul li {color: #999;font-size: 20px;text-transform: uppercase;letter-spacing: 3px;list-style: none;}.weekdays {margin: 0;color: #FFFFFF;background: #A4A7B0;width: 96.6%;margin-top: 26px;height: 34px;line-height: 34px;margin-left: 2.2%;}.weekdays li {display: inline-block;text-align: center;color: #11616f;font-size: 14px;font-weight: 100;width: 12.7%;}.days {padding: 0;margin: 0;display: flex;flex-wrap: wrap;justify-content: space-around;}.days li {list-style-type: none;display: inline-block;width: 14.2%;text-align: center;padding-bottom: 3px;padding-top: 7px;font-size: 12.78px;color: rgb(14, 220, 235);font-weight: 200;}.days li span span {height: 29.5px;width: 27px;line-height: 29.5px;display: inline-block;}.days li .class-30 {background: url(bg_30.png) no-repeat 0 0 /100% 100%;}.days li .class-60 {background: url(bg_60.png) no-repeat 0 0 /100% 100%;}.days li .class-3060 {background: url(bg_3060.png) no-repeat 0 0 /100% 100%;}.days li .other-month {padding: 5px;color: #84a8ae;}Vue.js内容
Vue.component(calendar, {template: #calendar,data: function() {return {currentDay: 1,currentMonth: 1,currentYear: 1970,currentWeek: 1,days: [],}},created() {let that this;that.initData(null);},methods: {initData: function(cur) {let that this;let leftcount 0;let date;if (cur) {date new Date(cur);} else {let now new Date();let d new Date(that.formatDate(now.getFullYear(), now.getMonth(), 1));d.setDate(35);date new Date(that.formatDate(d.getFullYear(), d.getMonth() 1, 1));}that.currentDay date.getDate();that.currentYear date.getFullYear();that.currentMonth date.getMonth() 1;that.currentWeek date.getDay(); // 1...6,0if (that.currentWeek 0) {that.currentWeek 7;}let str that.formatDate(that.currentYear, that.currentMonth, that.currentDay);that.days.length 0;//初始化for (let i that.currentWeek - 1; i 0; i--) {let d new Date(str);d.setDate(d.getDate() - i);let dayobject {}; dayobject.day d;that.days.push(dayobject); }for (let i 1; i 35 - that.currentWeek; i) {let d new Date(str);d.setDate(d.getDate() i);let dayobject {};dayobject.day d;that.days.push(dayobject);}},pickPre: function(year, month) {let that this;let d new Date(that.formatDate(year, month, 1));d.setDate(0);that.initData(that.formatDate(d.getFullYear(), d.getMonth() 1, 1));},pickNext: function(year, month) {let that this;let d new Date(that.formatDate(year, month, 1));d.setDate(35);that.initData(that.formatDate(d.getFullYear(), d.getMonth() 1, 1));},pickYear: function(year, month) {alert(year , month);},// 返回 类似 2016-01-02 格式的字符串formatDate: function(year, month, day) {let y year;let m month;if (m 10) m 0 m;let d day;if (d 10) d 0 d;return y - m - d},}})let vm new Vue({el: #app,})到此程序结束。 了解更多关注我呦
