基于JavaScript实现每日签到打卡轨迹功能


Posted in Javascript onNovember 29, 2018

本文实例为大家分享了js实现每日签到打卡轨迹功能的具体代码,供大家参考,具体内容如下

1. 核心文件 calendar.js 

var calUtil = {
 //当前日历显示的年份
 showYear:2018,
 //当前日历显示的月份
 showMonth:1,
 //当前日历显示的天数
 showDays:1,
 eventName:"load",
 //初始化日历
 init:function(signList){
  calUtil.setMonthAndDay();
  calUtil.draw(signList);
  
 },
 draw:function(signList){
  //绑定日历
  var str = calUtil.drawCal(calUtil.showYear,calUtil.showMonth,signList);
  $("#calendar").html(str);
  //绑定日历表头
  var calendarName=calUtil.showYear+"年"+calUtil.showMonth+"月";
  $(".calendar_month_span").html(calendarName); 
 },
 //获取当前选择的年月
 setMonthAndDay:function(){
  switch(calUtil.eventName)
  {
   case "load":
    var current = new Date();
    calUtil.showYear=current.getFullYear();
    calUtil.showMonth=current.getMonth() + 1;
    break;
   case "prev":
    var nowMonth=$(".calendar_month_span").html().split("年")[1].split("月")[0];
    calUtil.showMonth=parseInt(nowMonth)-1;
    if(calUtil.showMonth==0)
    {
      calUtil.showMonth=12;
      calUtil.showYear-=1;
    }
    break;
   case "next":
    var nowMonth=$(".calendar_month_span").html().split("年")[1].split("月")[0];
    calUtil.showMonth=parseInt(nowMonth)+1;
    if(calUtil.showMonth==13)
    {
      calUtil.showMonth=1;
      calUtil.showYear+=1;
    }
    break;
  }
 },
 getDaysInmonth : function(iMonth, iYear){
  var dPrevDate = new Date(iYear, iMonth, 0);
  return dPrevDate.getDate();
 },
 bulidCal : function(iYear, iMonth) {
  var aMonth = new Array();
  aMonth[0] = new Array(7);
  aMonth[1] = new Array(7);
  aMonth[2] = new Array(7);
  aMonth[3] = new Array(7);
  aMonth[4] = new Array(7);
  aMonth[5] = new Array(7);
  aMonth[6] = new Array(7);
  var dCalDate = new Date(iYear, iMonth - 1, 1);
  var iDayOfFirst = dCalDate.getDay();
  var iDaysInMonth = calUtil.getDaysInmonth(iMonth, iYear);
  var iVarDate = 1;
  var d, w;
  aMonth[0][0] = "日";
  aMonth[0][1] = "一";
  aMonth[0][2] = "二";
  aMonth[0][3] = "三";
  aMonth[0][4] = "四";
  aMonth[0][5] = "五";
  aMonth[0][6] = "六";
  for (d = iDayOfFirst; d < 7; d++) {
  aMonth[1][d] = iVarDate;
  iVarDate++;
  }
  for (w = 2; w < 7; w++) {
  for (d = 0; d < 7; d++) {
   if (iVarDate <= iDaysInMonth) {
   aMonth[w][d] = iVarDate;
   iVarDate++;
   }
  }
  }
  return aMonth;
 },
 ifHasSigned : function(signList,day){
  var signed = false;
  $.each(signList,function(index,item){
  if(item.signDay == day) {
   signed = true;
   return false;
  }
  });
  return signed ;
 },
 drawCal : function(iYear, iMonth ,signList) {
  var myMonth = calUtil.bulidCal(iYear, iMonth);
  var htmls = new Array();
  htmls.push("<div class='sign_main' id='sign_layer'>");
  htmls.push("<div class='sign_succ_calendar_title'>");
  htmls.push("<div class='calendar_month_span'></div>");
  htmls.push("</div>");
  htmls.push("<div class='sign' id='sign_cal'>");
  htmls.push("<table>");
  var d, w;
  for (w = 1; w < 7; w++) {
  htmls.push("<tr>");
  for (d = 0; d < 7; d++) {
   var ifHasSigned = calUtil.ifHasSigned(signList,myMonth[w][d]);
   console.log(ifHasSigned);
   if(ifHasSigned){
   htmls.push("<td class='on'>" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + "</td>");
   } else {
   htmls.push("<td>" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + "</td>");
   }
  }
  htmls.push("</tr>");
  }
  htmls.push("</table>");
  htmls.push("</div>");
  htmls.push("</div>");
  return htmls.join('');
 }
};

2. 页面Js引入

<script src="jquery.min.js"></script>
<script src="~calendar.js"></script>

3.0 后台拉取会员已经签到的打卡轨迹,填充到表格中去。 

var signList=[{"signDay":"23"},{"signDay":"24"},{"signDay":"25"},{"signDay":"26"},{"signDay":"30"}]; 
//填充到日历表格中
calUtil.init(signList);

4. 效果图

 基于JavaScript实现每日签到打卡轨迹功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery中常用的SET和GET
Jan 13 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
Dec 29 Javascript
Java File类的常用方法总结
Mar 18 Javascript
全面解析bootstrap格子布局
May 22 Javascript
JS实现数字格式千分位相互转换方法
Aug 01 Javascript
详解npm 配置项registry修改为淘宝镜像
Sep 07 Javascript
vue实现自定义日期组件功能的实例代码
Nov 06 Javascript
vue-for循环嵌套操作示例
Jan 28 Javascript
vue项目中监听手机物理返回键的实现
Jan 18 Javascript
如何在 ant 的table中实现图片的渲染操作
Oct 28 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
Oct 29 Javascript
JavaScript获取URL参数的方法分享
Apr 07 Javascript
Next.js项目实战踩坑指南(笔记)
Nov 29 #Javascript
js canvas实现二维码和图片合成的海报
Nov 19 #Javascript
详解@angular/cli 改变默认启动端口两种方式
Nov 29 #Javascript
js实现每日签到功能
Nov 29 #Javascript
Vue.js的复用组件开发流程完整记录
Nov 29 #Javascript
javascript实现考勤日历功能
Nov 29 #Javascript
vsCode安装使用教程和插件安装方法
Aug 24 #Javascript
You might like
基于mysql的bbs设计(一)
2006/10/09 PHP
php实现的发送带附件邮件类实例
2014/09/22 PHP
PHP中常用的字符串格式化函数总结
2014/11/19 PHP
Laravel框架之解决前端显示图片问题
2019/10/24 PHP
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
2007/02/15 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
2013/12/13 Javascript
jQuery实用函数用法总结
2014/08/29 Javascript
了不起的node.js读书笔记之mongodb数据库交互
2014/12/22 Javascript
js查找节点的方法小结
2015/01/13 Javascript
JS给超链接加确认对话框的方法
2015/02/24 Javascript
浅谈JavaScript正则表达式分组匹配
2015/04/10 Javascript
jquery实现未经美化的简洁TAB菜单效果
2015/08/28 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
2016/06/17 Javascript
理解JavaScript原型链
2016/10/25 Javascript
JavaScript实现鼠标点击导航栏变色特效
2017/02/08 Javascript
node操作mysql数据库实例详解
2017/03/17 Javascript
详解如何理解vue的key属性
2019/04/14 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
2020/05/11 Javascript
JavaScript实现多文件下载方法解析
2020/08/07 Javascript
[06:04]DOTA2国际邀请赛纪录片:Just For LGD
2013/08/11 DOTA
使用优化器来提升Python程序的执行效率的教程
2015/04/02 Python
[原创]使用豆瓣提供的国内pypi源
2017/07/02 Python
django 外键model的互相读取方法
2018/12/15 Python
python matplotlib画图库学习绘制常用的图
2019/03/19 Python
Python3.x+pyqtgraph实现数据可视化教程
2020/03/14 Python
基于 Python 实践感知器分类算法
2021/01/07 Python
H5新属性audio音频和video视频的控制详解(推荐)
2016/12/09 HTML / CSS
英国网络托管和域名领导者:Web Hosting UK
2017/10/15 全球购物
Shell如何接收变量输入
2016/08/06 面试题
汽车专业毕业生自荐信
2013/11/03 职场文书
怎么写有吸引力的自荐信
2013/11/17 职场文书
服装设计行业个人的自我评价
2013/12/20 职场文书
博士毕业生自我鉴定范文
2014/04/13 职场文书
科级干部群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
计划生育汇报材料
2014/12/26 职场文书
MySQL Server层四个日志的实现
2022/03/31 MySQL