基于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 插件学习实例1 插件制作说明与tableUI优化
Apr 02 Javascript
js写的评论分页(还不错)
Dec 23 Javascript
Bootstrap每天必学之响应式导航、轮播图
Apr 25 Javascript
详解浏览器渲染页面过程
Feb 09 Javascript
Vue二次封装axios为插件使用详解
May 21 Javascript
Vue源码探究之状态初始化
Nov 14 Javascript
详解微信小程序回到顶部的两种方式
May 09 Javascript
vue登录注册实例详解
Sep 14 Javascript
vue设置导航栏、侧边栏为公共页面的例子
Nov 01 Javascript
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
Element Tooltip 文字提示的使用示例
Jul 26 Javascript
react如何快速设置文件路径别名
Apr 28 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中Smarty模板初体验
2011/08/08 PHP
PHP文件上传问题汇总(文件大小检测、大文件上传处理)
2015/12/24 PHP
实现PHP框架系列文章(6)mysql数据库方法
2016/03/04 PHP
Yii 2.0中场景的使用教程
2017/06/02 PHP
jQuery实现强制cookie过期方法汇总
2015/05/22 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
2015/10/12 Javascript
JavaScript知识点总结(十)之this关键字
2016/05/31 Javascript
jQuery插件简单学习实例教程
2016/07/01 Javascript
老生常谈JavaScript 函数表达式
2016/09/01 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
2020/04/23 Javascript
Javascript将字符串日期格式化为yyyy-mm-dd的方法
2016/10/27 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
2017/05/03 Javascript
AngularJS日程表案例详解
2017/08/15 Javascript
Vue中对比scoped css和css module的区别
2018/05/17 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
2019/04/25 Javascript
微信小程序点击保存图片到本机功能
2019/12/13 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
2020/03/05 Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
2020/09/21 Javascript
在webstorm中配置less的方法详解
2020/09/25 Javascript
JavaScript实现鼠标经过表格某行时此行变色
2020/11/20 Javascript
python实现数组插入新元素的方法
2015/05/22 Python
python中的turtle库函数简单使用教程
2018/07/23 Python
Python面向对象类编写细节分析【类,方法,继承,超类,接口等】
2019/01/05 Python
Python基本socket通信控制操作示例
2019/01/30 Python
python base64库给用户名或密码加密的流程
2020/01/02 Python
python 图像判断,清晰度(明暗),彩色与黑白实例
2020/06/04 Python
使用Pycharm在运行过程中,查看每个变量的操作(show variables)
2020/06/08 Python
python实现感知机模型的示例
2020/09/30 Python
用CSS3将你的设计带入下个高度
2009/08/08 HTML / CSS
唤醒头发毛囊的秘密武器:Grow Gorgeous
2016/08/28 全球购物
澳大利亚首个在线预订旅游网站:Wotif
2017/07/19 全球购物
班长岗位职责
2013/11/10 职场文书
大学生毕业自我评价范文分享
2013/11/11 职场文书
会计电算化大学生职业规划书
2014/02/05 职场文书
师范生见习报告范文
2014/11/03 职场文书
2015质检员个人年终工作总结
2015/10/23 职场文书