一、↓

1.引入css

css：

<style >ul {display: block;list-style-type: disc;margin-block-start: 1em;margin-block-end: 1em;margin-inline-start: 0px;margin-inline-end: 0px;padding-inline-start: 0px;}.riqi{width: 92%;margin: 10px 4%;height: 27rem;background: #f3f3ed;margin-bottom: 10px;border-radius:16px;}.riqi .yd{width: 92%;padding-left: 4%;padding-top: 15px;font-size:18px;height: 2rem;}.riqi ul{margin:0 auto;width:92%;height:21rem;overflow:hidden}.riqi ul li{display:flex;justify-content:center;align-items:center;float:left;position:relative;width:14%;height:03rem;line-height:0.85rem;text-align:center;font-size:0.28rem;color:#000}.riqi ul li p{width:2.24rem;height:2.24rem;line-height:2.24rem;text-align:center;border-radius:100%}.riqi ul li p i{position:absolute;top:0.34rem;left:-.145rem;background:rgb(255,255,255);width:1.68rem;height:0.72rem;right:unset}.riqi ul li p.succe{background:rgba(248,190,69,1);color:#fff}.riqi ul li p.succe i{position:absolute;top:1.46rem;right:-0.8rem;background:rgba(248,190,69,1);width:1.6rem;height:0.48rem;left:unset}.riqi ul li p.failed:after{content:"";color:red;position:absolute;top:-.2rem;right:0;font-weight:bold}.riqi .days{font-size: 16px;margin: 0px 15px;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}.riqi .days p{color: red;}.riqi .days p a{color: blue;}</style>

2.前端界面

html：

<template><div class="riqi"><div class="yd">{{nowYear}}年{{nowMonth}}月 &nbsp;  <a @click="syy(1)">上一月 </a>&nbsp;&nbsp; <a @click="xyy(1)"> 下一月</a></div><ul v-html="html" @click="addComment($event)"></ul><div class="days"><p>您本月已累计签到：{{signDate.length}}天</p><p><a href="#" >签到记录</a></p></div></div>
</template>

3.js

<script>export default {data() {return {nowYear:new Date().getFullYear(),//获取年份nowMonth:new Date().getMonth()+1,//获取月份signDate:[1,2,3,4,6,7,8,9,15,31],//从后台获取签到日期html:'',//代码块}},methods: {/*时间判断*/isLeap(year) {return year % 4 == 0 ? (year % 100 != 0 ? 1 : (year % 400 == 0 ? 1 : 0)) : 0;},/*点击上一页*/syy(id){if (this.nowMonth==1){this.nowYear=parseInt(this.nowYear)-1;this.nowMonth=12;this.aaa();return;}this.nowMonth=parseInt(this.nowMonth)-1;this.aaa();},/*点击下一页*/xyy(id){if (this.nowMonth==12){this.nowYear=parseInt(this.nowYear)+1;this.nowMonth=1;this.aaa();return;}this.nowMonth=parseInt(this.nowMonth)+1;this.aaa();},/*点击当前事件考勤事件*/addComment:function (event) {if(event.target.nodeName === 'P'){if(event.target.className==='succe'){alert("当天您已签到!今天是"+event.target.innerHTML+"号")return;}// 获取触发事件对象的属性console.log(event)console.log(event.target)console.log(event.target.nodeName)//获取标签console.log(event.target.className)//获取cssconsole.log(event.target.innerHTML)//获取内容console.log(event.target.innerText)//获取内容alert("当天暂无考勤记录");}},/*日历方法*/aaa(){//获取当前时间//alert(this.nowYear+"年"+this.nowMonth)console.log(this.signDate);var days_per_month = new Array(31, 28 + this.isLeap(this.nowYear), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); //每个月的天数var dateHtml = "<li>日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li>"; //日历头部var s=new Date(this.nowYear + '/' + this.nowMonth + '/' + '01').getDay();//获取本月的一号是星期几 0星期天//alert(s)if(s > 0) ;for(var i = s-1; i >= 0; i--) {// var s=days_per_month[this.nowMonth - 1];//获取当前月份的最大天数 最后一天var year=parseInt(this.nowMonth)-1;//获取当前月份if (year==0){year=12;}//alert(s+"--"+parseInt(days_per_month[year-1])+"--"+i); //days_per_month[year-1] 获取上个月的天数var maxnowMonth=parseInt(days_per_month[year-1])-i;dateHtml += "<li style='color: #9e9898'>"+maxnowMonth+"</li>";//获取上月末尾天数  补齐本月日历显示}/*循坏输出 日历访日 html中*/for(var j = 0; j < days_per_month[this.nowMonth - 1]; j++) {if(this.signDate.length>=1){ //有签到历史for(var n = 0; n < this.signDate.length; n++) {if(j == (this.signDate[n]-1)) {//判断前天数和 签到天数相同 进入 写人css区分var dateHtmlp = "<p class='succe' >" + (j+1) + "</p>";break} else {if(j < this.signDate[this.signDate.length - 1]) {dateHtmlp = "<p class='failed'>" + (j+1) + "</p>";} else {dateHtmlp = "<p>" + (j+1) + "</p>";}}}}else{dateHtmlp = "<p class='failed'>" + (j+1) + "</p>";   // 本月每天都没有签到}dateHtml += "<li>" + dateHtmlp + "</li>";}//console.log(dateHtml);/* $('#rili').append(dateHtml)*//*  $('#rili').html(dateHtml);*/this.html=dateHtml;}},created() {/*调用初始化当前考勤*/this.aaa();}}

总结

获取当前时间前端进行时间判断显示
vue赋值即可显示

移动端考勤签到前端考勤签到界面相关推荐

智慧课堂app（一）Flutter+springboot 实现考勤码+gps考勤签到功能
Flutter+springboot实现考勤码+gps考勤签到功能实现步骤和思路: 设计发布考勤任务签到考勤环境准备后端步骤: 1.教师发布考勤任务接口 2.rabbitmq收到教师发布考勤 ...
人脸识别签到_矿区签到出“新招” 人脸识别考勤上线
图为公司职工正在用门禁考勤面部识别系统打卡听说过手机刷脸解锁,购物刷脸支付,你知道现在矿区考勤签到也可以刷脸了吗?为进一步强化工作作风建设,严格执行上下班考勤制度,12月4日,公司正式启动覆盖全员的 ...
python基础教程：face++与python实现人脸识别签到（考勤）功能
@本文来源于公众号:csdn2299,喜欢可以关注公众号程序员学府这篇文章主要为大家详细介绍了face++与python实现人脸识别签到(考勤)功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一 ...
钉钉打卡如何破译人脸识别_疫情常态下，如何选择合适的考勤管理系统和考勤打卡工具？...
"考勤管理"对于任何企业来说都是不可缺少的,而且随着企业管理的不断加强,考勤管理的重要性日益提升."考勤管理"不仅可以维护工作秩序,提高工作效率,而且对于提升企 ...
学生考勤及行为管理系统_学生考勤管理系统_考勤管理系统-先知科技
考勤管理系统简介: 先知智慧校园考勤管理系统帮助各大院校解决教职工考勤,学生上课考勤多种方式考勤.可通过手机端app考勤,终端考勤机器考勤,刷卡通过人形通道考勤,电子班牌考勤,人脸识别考勤多种方式正对 ...
thinkphp开发的小程序、公众号H5、浏览器端H5、前端vue框架开发
需要程序代码的可以找我提供用户端包含:小程序.公众号H5.浏览器端H5 序号功能模块简介 1 商品商品分类支持两级分类,分类可添加分类图标,可设置排序和是否显示,支持分类搜索. 2 商品管理 ...
mysql 连续签到天数_签到功能实现，没有你想的那么复杂(一)
1 签到定义以及作用签到,指在规定的簿册上签名或写一"到"字,表示本人已经到达.在APP中使用此功能,可以增加用户粘性和活跃度.2 技术选型redis为主写入查询,mysql辅助查 ...
简单的签到代码_签到功能，用 MySQL 还是 Redis ？
现在的网站和app开发中,签到是一个很常见的功能,如微博签到送积分,签到排行榜. 如移动app ,签到送流量等活动. 用户签到是提高用户粘性的有效手段,用的好能事半功倍! 下面我们从技术方面看看常用的 ...
Redis BitMap结构实现签到、连续签到统计
文章目录一.利用BitMap结构实现签到功能 1.1 BitMap用法 1.2 代码实现签到功能 1.3 统计连续签到 1.3.1 如何得到本月到今天为止的所有签到数据 1.3.2 如何从后向前遍历 ...

移动端考勤签到前端考勤签到界面

一、↓

1.引入css

2.前端界面

3.js

总结

移动端考勤签到前端考勤签到界面相关推荐

最新文章

热门文章

移动端考勤签到 前端考勤签到界面

一、↓

1.引入css

2.前端界面

3.js

总结

移动端考勤签到 前端考勤签到界面相关推荐

最新文章

热门文章

移动端考勤签到前端考勤签到界面

移动端考勤签到前端考勤签到界面相关推荐