基于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 相关文章推荐
javascript实现的使用方向键控制光标在table单元格中切换
Nov 17 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
Apr 29 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
Mar 23 Javascript
JavaScript实现控制打开文件另存为对话框的方法
Apr 17 Javascript
jQuery实现带玻璃流光质感的手风琴特效
Nov 20 Javascript
jQuery获取DOM节点实例分析(2种方式)
Dec 15 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
Aug 10 Javascript
vuex的简单使用教程
Feb 02 Javascript
vue 自定义 select内置组件
Apr 10 Javascript
koa源码中promise的解读
Nov 13 Javascript
vue 实现强制类型转换 数字类型转为字符串
Nov 07 Javascript
Vue 的双向绑定原理与用法揭秘
May 06 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
无JS,完全php面向过程数据分页实现代码
2012/08/27 PHP
php图片处理函数获取类型及扩展名实例
2014/11/19 PHP
JS中==与===操作符的比较
2009/03/21 Javascript
一步一步教你写一个jQuery的插件教程(Plugin)
2009/09/03 Javascript
jQuery侧边栏随窗口滚动实现方法
2013/03/04 Javascript
ECMAScript6函数默认参数
2015/06/12 Javascript
简介alert()与console.log()的不同
2015/08/26 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
2015/10/23 Javascript
jquery.cookie.js用法实例详解
2015/12/25 Javascript
jQuery实现div拖拽效果实例分析
2016/02/20 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
2016/04/26 Javascript
jQuery Easyui datagrid连续发送两次请求问题
2016/12/13 Javascript
Bootstrap风格的zTree右键菜单
2017/02/17 Javascript
VueJS事件处理器v-on的使用方法
2017/09/27 Javascript
利用three.js画一个3D立体的正方体示例代码
2017/11/19 Javascript
vue引用js文件的多种方式(推荐)
2018/05/17 Javascript
Nodejs Express 通过log4js写日志到Logstash(ELK)
2018/08/30 NodeJs
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
2018/09/19 Javascript
js获取 gif 的帧数的代码实例
2019/09/10 Javascript
[01:25:09]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第二场
2014/05/24 DOTA
[44:37]完美世界DOTA2联赛PWL S3 Forest vs access 第一场 12.11
2020/12/13 DOTA
python中使用百度音乐搜索的api下载指定歌曲的lrc歌词
2014/07/18 Python
Python使用正则表达式过滤或替换HTML标签的方法详解
2017/09/25 Python
Python与人工神经网络:使用神经网络识别手写图像介绍
2017/12/19 Python
python 反向输出字符串的方法
2018/07/16 Python
python实现linux下抓包并存库功能
2018/07/18 Python
python查看模块,对象的函数方法
2018/10/16 Python
程序员写Python时的5个坏习惯,你有几条?
2018/11/26 Python
python求最大值,不使用内置函数的实现方法
2019/07/09 Python
HTML5 visibilityState属性详细介绍和使用实例
2014/05/03 HTML / CSS
介绍一下gcc特性
2015/10/31 面试题
钳工实习自我鉴定
2013/09/19 职场文书
房地产财务部员工岗位职责
2014/03/12 职场文书
岗位职责风险点
2014/03/12 职场文书
电力安全事故反思
2014/04/27 职场文书
学习焦裕禄同志为人民服务思想汇报
2014/09/10 职场文书