首先需要引入animate动画组件下载css样式

animate动画库下载提取码: k9qz

html

<template><div class="sign"><!-- 遮罩层 --><div class="shade" v-bind:style="show"><div  class="shadearray animated bounceInDown">  <div><img src="signimg/backgroundcard.png" style="max-width:324px;" alt=""></div><div><img src="signimg/close.png" style="max-width:29px;" alt="" @click="close"></div></div></div><img class="banner-img" src="signimg/signbanner.png" alt="" /><div class="header-title"><div><img style="width: 8px; height: 15px" src="signimg/upicon.png" alt="" /></div><div>每日签到</div></div><div class="header-array"><div><div class="header-card"><div>已坚持</div><div class="header-cardicon"><div><img  style="width:45px;height:62px" src="signimg/cardicon.png" alt="" /><div class="header-num">0</div></div><div><img  style="width:45px;height:62px" src="signimg/cardicon.png" alt="" /><div class="header-num">0</div></div><div><img  style="width:45px;height:62px" src="signimg/cardicon.png" alt="" /><div class="header-num">7</div></div></div><div>天签到</div></div><div class="header-text">连续签到有礼相伴~</div></div></div><div style="width: 100%; padding: 0px 15px 0px 15px;magrin-bottom:"><div class="signcard-header"><div><div>已连续签到</div><div style="font-size:20px;color:#ff4e00;">{{day}}</div><div>天</div></div><div class="signdatemonth"><div class="signdatemonth-padding"><div @click="pickPre(currentYear,currentMonth)"><img style="width:8px;height:15px" src="signimg/lasticon.png" alt=""></div><div style="font-size:16px"> {{ currentYear }}年{{ currentMonth }}月</div><div @click="pickNext(currentYear,currentMonth)"><img style="width:8px;height:15px" src="signimg/nexticon.png" alt=""></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"><!-- 这里是已签到的 --><div class="signagree" v-if="day.isSign && day.day.getMonth()+1 === currentMonth"><img style="max-width:27px" src="signimg/agreeicon.png" alt="">  <div style="color:rgb(85,195,109)"> {{ currentMonth }}.{{ day.day.getDate()}}</div></div><!-- 这里是未签到的 --><div class="signagree" v-if="!day.isSign && day.day.getMonth()+1 === currentMonth"><img style="max-width:27px" src="signimg/agreegrayicon.png" alt=""> <div>{{ currentMonth }}.{{ day.day.getDate()}}</div></div></div></div></div></div></div><div v-if="cardshow==1" class="card-buttonfrom animated rotateIn "><div @click="Sign">马上签到</div></div><div v-else-if="cardshow==2" class="card-buttonfromgrey animated swing "><div>签到成功</div></div></div></template>

scss

@import "../../animate/animate.min.css";
*{margin: 0;padding: 0;}
.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: white;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
}

js

import "./sign.scss";import Axios from 'axios'
export default {data(){return{cardshow:1,currentDay: 1, // 当前天currentMonth: 1, // 当前月currentYear: 1970,currentWeek: 1, // 一号所在的星期days: [], // 当月所有天数content: {},arrDate: [], // 当月签到日期num: 0,day: 4,show:{"display":"none",},datestatus:1,}},created(){this.getSign();},mounted(){},methods: {// getSign(){//     Axios.post('/api/test',).then((res)=>{//       const sign_days = res.data//       for (const i in sign_days) {//       this.arrDate.push(sign_days[i].day);//       }//       this.initData(null);//       console.log(this.arrDate)//       }).catch((err)=>{//           console.log(err)//       })// },getSign() {// 接口未完成，模拟数据const sign_days = [{ day: 5 }, { day: 1 }, { day: 2 },  { day: 4 }, { day: 6 }, { day: 7 }, { day: 8 }, { day: 9 }, { day: 10 }];for (const i in sign_days) {this.arrDate.push(sign_days[i].day);}this.initData(null);},initData(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);}},// 判断日期是否有签到isVerDate(v) {return this.arrDate.includes(v);},// 点击上个月进行的操作pickPre(year, month) {console.log(year,month)const d = new Date(this.formatDate(year, month, 1));d.setDate(0);this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));},// 点击下个月进行的操作pickNext(year, month) {console.log(year,month)const d = new Date(this.formatDate(year, month, 1));d.setDate(35);this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));},// 返回 类似 2020-01-01 格式的字符串formatDate(year, month, day) {month < 10 && (month = '0' + month);day < 10 && (day = '0' + day);const data = year + '-' + month + '-' + day;return data;},Sign() {this.datetrue=false,this.datefalse=true,this.show={ 'display':'block'}const now = new Date();this.arrDate.push(now.getDate());console.log(this.arrDate)this.initData();},close(){this.buttontext="签到完成"this.cardshow=2this.show={ 'display':'none'}},}
};
</script>

vue实现签到功能，带动画需引入animate，无接口相关推荐

vue实现签到功能，带动画需引入animate，有接口
首先需要引入animate动画组件下载css样式 animate动画库下载提取码: k9qz html <template><div class="sign"&g ...
jquery实现返回顶部按钮和scroll滚动功能[带动画效果] 转载
转载自:老驴的博客 jQuery脚本: 1 <script type="text/javascript">2$(function() {3 var scrollDiv ...
前端vue开发连续签到功能
前端vue开发连续签到功能 UI设计图参数说明 HTML部分渲染已经签到过的天数 js代码签到功能前端只需要调用两个接口完整代码 UI设计图参数说明 days_num:已经签到多少天 tod ...
vue3.0+ts+element-plus多页签应用模板：element-plus按需引入与动态换肤
目录系列链接一.安装element-plus 二.按需引入 1. 为什么要按需引入? 2. 如何按需引入? 3. 验证是否引入成功三.动态换肤 1. 制作自定义主题 2. 引入自定义主题 3. ...
Vue Cli 3 搭建一个可按需引入组件的组件库架子
Ant-design.Element 这些框架都有按需引入组件的功能.需要使用哪个组件,就引入哪个组件,这样那些没必要的组件就不会打包到我们的项目里了.跟着我下边的步骤,相信大家也能搭建出一个按需引入 ...
vue项目中按需引入viewUI
viewUI 一.按需引入二.忽略eslint编译器检测和编译检测 1.忽略编译器检测 2.编译器中忽略一.按需引入 npm install babel-plugin-import --save- ...
html引入vue不兼容ie11,关于vue.js:iview按需引入ie11不兼容报无效字符问题解决
筹备工作 //借助插件 npm install babel-plugin-import --save-dev // .babelrc { "plugins": [["im ...
vue伸缩效果_Vue2(三)实现子菜单展开收缩，带动画效果实现方法
以前做这种操作就是简单的display:block,但现在用户的要求也越来越高,需要美观和动画感. 现在介绍用一种简单的方式来实现子菜单从上向下展开子菜单. 看下效果图: 点开效果: 其实原理比较简单 ...
vue.js项目中，关于element-ui完整引入、按需引入的介绍
element-ui引入方式,简单说来有两种:完整引入.按需引入首先谈一下npm安装element-ui的方法: cmd到项目目录,然后执行cmd命令:npm i element-ui -S稍等片刻 ...

vue实现签到功能，带动画需引入animate，无接口

首先需要引入animate动画组件下载css样式

html

scss

js

vue实现签到功能，带动画需引入animate，无接口相关推荐

最新文章

热门文章