`Vue每日签到日历渲染`

`先上图`

`template`

<template><div class="sign"><div class="header-title"><div>每日签到</div></div><div style="width: 100%; padding: 0px 15px 0px 15px"><div class="signcard-header"><div><!-- <div>已连续签到</div><div style="font-size: 20px; color: #ff4e00">{{ signdata.days }}</div><div>天</div> --></div><div class="signdatemonth"><div class="signdatemonth-padding"><div @click="pickPre(currentYear, currentMonth)">上一月</div><div style="font-size: 16px">{{ currentYear }}年{{ currentMonth }}月</div><div @click="pickNext(currentYear, currentMonth)">下一月</div></div></div><div class="signcard-section"><div class="signcard-title"><div>周日</div><div>周一</div><div>周二</div><div>周三</div><div>周四</div><div>周五</div><div>周六</div></div></div><div class="signcard-footer"><div class="signcard-list"><div v-for="day in days" :key="day.item"><!-- 这里是已签到的 --><divclass="signagree"v-if="day.isSign && day.day.getMonth() + 1 === currentMonth"><div style="color: rgb(85, 195, 109)"><!-- {{ currentMonth }}. -->{{ day.day.getDate() }}</div></div><!-- 这里是未签到的 --><divclass="signagree"v-if="!day.isSign && day.day.getMonth() + 1 === currentMonth"><div><!-- {{ currentMonth }}. -->{{ day.day.getDate() }}</div></div></div></div></div></div></div><divv-if="datestatus == 0"class="card-buttonfrom animated rotateIn"@click="Sign"><div>马上签到</div></div><div v-else-if="datestatus == 1" class="card-buttonfromgrey animated swing"><div>签到成功</div></div></div>
</template>

`script`

export default {data() {return {signdata: "",currentDay: "", // 当前天currentMonth: "", // 当前月currentYear: "",currentWeek: 1, // 一号所在的星期days: [], // 当月所有天数arrDate: [1], // 当月签到日期num: 0,datestatus: 0,};},created() {this.initData();},mounted() {this.getSingRecord(this.currentYear, this.currentMonth);},methods: {// 返回 类似 2020-01-01 格式的字符串formatDate(year, month, day) {month < 10 && (month = "0" + month);day < 10 && (day = "0" + day);const data = year + "-" + month + "-" + day;return data;},initData(cur) {console.log(cur);let date;if (cur) {// 切换日期date = new Date(cur);} else {var now = new Date();var d = new Date(this.formatDate(now.getFullYear(), now.getMonth() + 1, 1));date = new Date(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));}this.currentDay = date.getDate(); // 今日日期 几号this.currentYear = date.getFullYear(); // 当前年份this.currentMonth = date.getMonth() + 1; // 当前月份this.currentWeek = date.getDay(); // 0,1...6 星期const str = this.formatDate(this.currentYear,this.currentMonth,this.currentDay); // 2020-01-01this.days.length = 0; // 初始化日期for (var i = this.currentWeek; i > 0; i--) {const d = new Date(str);d.setDate(d.getDate() - i);var dayobject = {};dayobject.day = d;this.days.push(dayobject);}this.num = 0;for (var j = 0; j <= 36 - this.currentWeek; j++) {const d = new Date(str);d.setDate(d.getDate() + j);const dddd = d.getDate();if (dddd === 1) {this.num++;}if (this.num === 2) {return;}const dayobject = { day: d, isSign: this.isVerDate(dddd) };this.days.push(dayobject);}},// // 点击上个月进行的操作pickPre(year, month) {const d = new Date(this.formatDate(year, month, 1));d.setDate(0);this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));this.getSingRecord(this.currentYear, this.currentMonth);},// // 点击下个月进行的操作pickNext(year, month) {const d = new Date(this.formatDate(year, month, 1));d.setDate(35);this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));this.getSingRecord(this.currentYear, this.currentMonth);},// // 判断日期是否有签到isVerDate(v) {// console.log(v,'判断是否有签到')return this.arrDate.includes(v);},Sign() {this.$alert("签到成功");},getSingRecord(year, month) {// 这里是接口//   sign({//     id: 1,//     year: year,//     month: month,//   }).then((res) => {//   this.signdata = res;//   this.datestatus = res.status;//   var day = String(res.day);//   // 这里是签到的天数//   this.days.forEach((val) => {//     try {//       for (let i = 0; i < res.signlist.length; i++) {//         if (val.day.getDate() == res.signlist[i].day) {//           val.isSign = true;//         }//       }//     } catch {//       console.log("失败.");//     }//   });//   });},},
};

`style`

<style lang="scss" scoped>
.index {width: 100vw;height: 100vh;overflow: hidden;overflow-y: scroll;background: #f6f6f6;
}
.flex {display: flex;
}
.flex_s {display: flex;justify-content: space-between;
}
.flex_e {display: flex;justify-content: space-evenly;
}
.shade {width: 100%;height: 100vh;background-color: rgba(0, 0, 0, 0.5);position: fixed;align-items: center;flex-wrap: wrap;z-index: 2;padding-top: 60px;
}
.shadearray > div {width: 100%;display: flex;justify-content: center;
}
body {background-color: rgb(245, 245, 245);
}
.sign {display: flex;justify-content: center;flex-wrap: wrap;
}
.banner-img {width: 100%;height: 234px;position: absolute;top: 0px;z-index: -1;
}
.header-title {display: flex;justify-content: center;align-items: flex-end;position: relative;
}
.header-title {width: 100%;height: 67px;color: #333;font-size: 17px;img {position: absolute;left: 20px;bottom: 2px;}
}.header-array {width: 100%;margin-top: 33px;margin-bottom: 17px;height: 88px;padding: 0px 54px 0px 54px;
}.header-array > :first-child {height: 88px;width: 100%;display: flex;justify-content: center;align-items: center;flex-wrap: wrap;
}
.header-card {width: 100%;display: flex;justify-content: center;align-items: center;color: white;font-size: 18px;
}
.header-card > div:nth-child(1) {margin-right: 5px;
}
.header-card > div:nth-child(3) {margin-left: 5px;
}.header-text {width: 100%;line-height: 28px;color: white;text-align: center;font-size: 13px;
}
.header-cardicon {position: relative;div {margin: 0px 2px 0px 2px;display: flex;justify-content: center;align-items: center;}display: flex;justify-content: center;align-items: center;.header-num {position: absolute;font-size: 40px;color: #ff8400;}
}
.signcard-header {width: 100%;background-color: white;border-radius: 10px;padding-top: 5px;padding-bottom: 20px;overflow: hidden;letter-spacing: 1px;
}
.signcard-header > div:first-child {padding-left: 20px;font-size: 12px;display: flex;justify-content: start;align-items: center;color: rgb(139, 139, 139);
}
.signdatemonth {width: 100%;
}
.signdatemonth-padding {padding: 5px 20px 5px 20px;display: flex;justify-content: space-between;font-size: 16px;align-items: center;
}
.signcard-section {width: 100%;display: flex;justify-content: space-between;align-items: center;margin-top: 5px;margin-bottom: 5px;
}
.signcard-title {width: 100%;display: flex;justify-content: space-between;padding-left: 20px;padding-right: 20px;font-size: 12px;
}
.signcard-title > div {width: 14.2%;display: flex;justify-content: center;align-items: center;
}
.signcard-footer {width: 100%;display: flex;justify-content: space-between;align-items: center;
}
.signcard-list {width: 100%;display: flex;justify-content: start;padding-left: 20px;padding-right: 20px;font-size: 12px;flex-wrap: wrap;
}
.signcard-list > div {width: 14.2%;margin-top: 5px;margin-bottom: 5px;display: flex;justify-content: center;align-items: center;flex-wrap: wrap;position: relative;
}
.signagree {display: flex;justify-content: center;align-items: center;flex-wrap: wrap;
}
.signcard-list > div > img {z-index: 1;
}
.signdate {width: 100%;display: flex;justify-content: center;
}
.signsolid {width: 100%;height: 2px;background-color: #efefef;z-index: 0;position: absolute;top: 13px;
}.card-buttonfrom {margin-top: 26px;display: flex;justify-content: center;align-items: center;padding: 15px 80px 15px 80px;color: white;border-radius: 50px;font-size: 18px;background: linear-gradient(rgb(255, 118, 45), rgb(255, 79, 1));
}
.card-buttonfromgrey {margin-top: 26px;display: flex;justify-content: center;align-items: center;background: #b5b5b5;padding: 15px 80px 15px 80px;color: white;border-radius: 50px;font-size: 18px;letter-spacing: 2px;
}
</style>

Vue每日签到日历渲染相关推荐

html实现日历签到页面,jquery每日签到日历插件
这是一款使用jquery来实现的每日签到日历插件源代码.该每日签到插件可以实现签到功能,查看签到次数等,非常实用. 使用方法在页面中引入样式文件style.css,jquery.min.js和签到j ...
基于jQuery的日历+每日签到功能
公司要开发一个h5页面,里边有一个每日签到抽奖的功能,本以为这样的插件应该会有很多,结果找到的全都是仅生成日历的插件,于是乎就出现了下面这个东西.(前端菜鸟,请大神嘴下留情,也请小伙伴们多提宝贵意见) ...
vue 日历翻拍效果_Vue实现日历渲染
需求制作一个签到日历,先简单的将日历的效果做出来,直接分享一下源码,有需要直接取用就好. {{item}} {{item}} // 实现每行7个自动换行 .calenderTitle, .calend ...
每日签到html特效,jQuery实现日历每日签到网页特效
本文主要和大家分享jQuery实现日历每日签到网页特效,主要以代码的形式和大家分享,希望能帮助到大家. index.html 代码: jQuery简洁的日历签到插件 $(function(){ //a ...
js php 实现日历签到_js实现每日签到功能
本文实例为大家分享了js实现每日签到功能的具体代码,供大家参考,具体内容如下 js: var calUtil = { getDaysInmonth : function(iMonth, iYear){ ...
基于Vue开发一个日历组件
最近在做一个类似课程表的需求,需要自制一个日历来支持功能及展现,就顺便研究一下应该怎么开发日历组件. 更新 2.23修复了2026年2月份会渲染多一行的bug,谢谢@深蓝一人童鞋提出的bug,解决方案 ...
前端捕捉轨迹_基于JavaScript实现每日签到打卡轨迹功能
本文实例为大家分享了js实现每日签到打卡轨迹功能的具体代码,供大家参考,具体内容如下 1. 核心文件 calendar.js var calUtil = { //当前日历显示的年份 showYear: ...
Vue为何采用异步渲染
Vue为何采用异步渲染 Vue在更新DOM时是异步执行的,只要侦听到数据变化,Vue将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更,如果同一个watcher被多次触发,只会被推入到队列中一次 ...
html5 签到系统功能,项目实战之基于JavaScript实现每日签到打卡轨迹功能
今天扣丁学堂HTML5培训老师给大家介绍一下关于js实现每日签到打卡轨迹功能的具体代码,希望对同学们学习HTML5开发有所帮助,下面我们一起来看一下吧. 1.核心文件calendar.js var c ...

Vue每日签到日历渲染

Vue每日签到日历渲染

`Vue每日签到日历渲染`

`先上图`

`template`

`script`

`style`

Vue每日签到日历渲染相关推荐

最新文章

热门文章