设为首页 加入收藏

TOP

vue日历/日程提醒/html5本地缓存(五)
2019-09-17 15:21:27 】 浏览:75
Tags:vue日历 日程 提醒 /html5 本地
);
z-index:2;
}
#curtain{
width:80%;
position: absolute;
right: 10%;
left: 10%;
margin: auto;

background-color:#fff;
border-radius:2px;
box-shadow: 0 0 8px rgba(0,0,0,0.2);
position:fixed;
bottom: 10%;
text-align:center;
}
.icon-shell{
width:80%;
margin: 0 auto;
}
.icon-true{
float: right;
width: 20px;
height: 30px;
border-bottom: 3px solid #00B8EC;
border-right:3px solid #00B8EC;
margin: 10px auto;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
.icon-true:hover{
opacity: 0.5;
}
.icon-false{
float: left;
padding-top: 18px;
font-size: 1.8em;
color: red;
}
.icon-false:hover{
opacity: 0.5;
}
#curtain label{
text-transform: uppercase;
background-color: #f4f4f4;
width: 30%;
height: 40%;
font-size: 1em;
display: inline-block;
padding: 10px;
margin: 10% 0;
}

#curtain input{
display: block;
border: 0;
font: inherit;
font-size: 1em;
padding: 6px;
outline: none;
text-align: center;
width: 100%;
margin: 10px auto;
background-color:#fff;
}


.clear{
clear: both;
}

 

 time.js

new Vue({
el: '#app',
data: {
//日历
currentYear: 2019,//
lockYear:2019,//返回当前年
currentMonth: 1,//
lockMonth:1,//返回当前月
currentDay: 1,//
lockDay:1,//返回当前日
setDay:1,//取月份默认从一号开始取
currentWeek: 2,//周几
setWeek:1,
days: [],//每月天数
week_day:[],//每周天数
today_key:1,//取today所在week为第一个week_day
scroll:0,//滚动高度
dayScrollTop:0,//日历需要隐藏的高度
showMonth:true,//上下拉切换月和周

//日历滑动换月
startX:0,//触摸点
endX:0,//松开点
startY:0,
endY:0,

//添加提醒设置时间
currentHour:0,
currentMinute:0,
getRemindTime:null,
eventId:1,

//点击显示
show:false,
selectTime:false,

//选项卡
tabtit: ["已设置提醒", "创建时间", "最后发言时间"],
tabmain: [new Array(), new Array(), new Array()],
num: 0,
selectIndex:-1,
},
created() {
this.initData(null);
},
watch: { //渲染完后,获取高度
days(){
this.$nextTick(function(){

/* console.log(this.$refs.daysBox.offsetHeight,this.$refs.daysBox.offsetTop); */
var daysBoxHeight=this.$refs.daysBox.offsetHeight;
var daysBoxHidden=daysBoxHeight/6*3;
var daysTop=this.$refs.daysBox.offsetTop;
this.dayScrollTop=daysTop+daysBoxHidden;
});
},
},
methods: {
initData(cur) {
var date;
if (cur) {
date = new Date(cur);
}
else {
date = new Date();
this.lockYear = date.getFullYear();
this.lockMonth = date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1;
this.lockDay = date.getDate() <10?'0'+date.getDate():date.getDate();
}

this.currentDay = date.getDate() <10?'0'+date.getDate():date.getDate();//showMonth=false
this.currentWeek = date.getDay();
date.setDate(1);
this.currentYear = date.getFullYear();
this.currentMonth = date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1;
/*this.currentWeek = date.getDay(); // 1...6,0*/
this.setWeek=date.getDay();
this.currentHour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
this.currentMinute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
var str=this.formatDate(this.currentYear , this.currentMonth, this.currentDay);
var set_str = this.formatDate(this.currentYear , this.currentMonth, 1);
/*console.log("today:" + str + "," + this.currentWeek);*/
this.days.length = 0;
this.week_day.length=0;
// 默认1号,从一号开始计算,负数代表上个月天数,超过本月天数为下月天数
for (var i = this.setWeek; i >= 0; i--) {
var d = new Date(set_str);
d.s

首页 上一页 2 3 4 5 6 下一页 尾页 5/6/6
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇JS核心之DOM操作 上 下一篇element-ui Upload 上传组件源码..

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目