基于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连接access数据库的方法
Nov 17 Javascript
JQuery将文本转化成JSON对象需要注意的问题
May 09 Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
Jun 21 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
Nov 19 Javascript
JavaScript利用正则表达式去除日期中的-
Jun 09 Javascript
JavaScript判断变量是对象还是数组的方法
Aug 28 Javascript
简单谈谈JavaScript的同步与异步
Dec 31 Javascript
JavaScript中使用参数个数实现重载功能
Sep 01 Javascript
详解vue表单——小白速看
Apr 08 Javascript
对angularJs中ng-style动态改变样式的实例讲解
Sep 30 Javascript
vue移动端实现手机左右滑动入场动画
Jun 17 Javascript
JavaScript实现身份证验证代码实例
Aug 26 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
基于PHP与XML的PDF文档生成技术
2006/10/09 PHP
TMDPHP 模板引擎使用教程
2012/03/13 PHP
php使用Session和文件统计在线人数
2015/07/04 PHP
php中实现用数组妩媚地生成要执行的sql语句
2015/07/10 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
浅析Cookie中的Path与domain
2013/12/18 Javascript
做好七件事帮你提升jQuery的性能
2014/02/06 Javascript
JavaScript利用append添加元素报错的解决方法
2014/07/01 Javascript
网页中表单按回车就自动提交的问题的解决方案
2014/11/03 Javascript
js+html5实现可在手机上玩的拼图游戏
2015/07/17 Javascript
AngularJS入门教程之控制器详解
2016/07/27 Javascript
Vue 换肤的示例实践
2018/01/23 Javascript
python中执行shell的两种方法总结
2017/01/10 Python
Python人脸识别初探
2017/12/21 Python
python使用itchat库实现微信机器人(好友聊天、群聊天)
2018/01/04 Python
Python cookbook(数据结构与算法)将名称映射到序列元素中的方法
2018/03/22 Python
python函数装饰器之带参数的函数和带参数的装饰器用法示例
2019/11/06 Python
Python实现点云投影到平面显示
2020/01/18 Python
django 取消csrf限制的实例
2020/03/13 Python
Python多线程Threading、子线程与守护线程实例详解
2020/03/24 Python
在ipython notebook中使用argparse方式
2020/04/20 Python
详解python datetime模块
2020/08/17 Python
Python中的特殊方法以及应用详解
2020/09/20 Python
CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
2013/06/03 HTML / CSS
CSS3条纹背景制作的实战攻略
2016/05/31 HTML / CSS
html5实现九宫格抽奖可固定抽中某项奖品
2020/06/15 HTML / CSS
ONLY德国官方在线商店:购买时尚女装
2017/09/21 全球购物
个性化皮包、小袋、生活配件:Mon Purse
2019/03/26 全球购物
排序都有哪几种方法?请列举。用JAVA实现一个快速排序
2014/02/16 面试题
理财投资建议书
2014/03/12 职场文书
兴趣小组活动总结
2014/05/05 职场文书
事业单位人员的自我评价范文
2014/09/21 职场文书
2015年外联部工作总结
2015/04/03 职场文书
使用 Docker Compose 构建复杂的多容器App
2022/04/30 Servers
vue css 相对路径导入问题级踩坑记录
2022/06/05 Vue.js
Centos7 Shell编程之正则表达式、文本处理工具详解
2022/08/05 Servers