基于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 相关文章推荐
打开超链需要“确认”对话框的方法
Mar 08 Javascript
JavaScript 组件之旅(一)分析和设计
Oct 28 Javascript
JS与框架页的操作代码
Jan 17 Javascript
JQuery实现倒计时按钮的实现代码
Mar 23 Javascript
js 跳出页面的frameset框架示例介绍
Dec 23 Javascript
Jquery实现自定义tooltip示例代码
Feb 12 Javascript
JQuery 图片滚动轮播示例代码
Mar 24 Javascript
JS实现来回出现文字的状态栏特效代码
Oct 31 Javascript
javascript实现保留两位小数的多种方法
Dec 18 Javascript
Node.js批量给图片加水印的方法
Nov 15 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
Mar 08 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
Dec 11 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
法国:浪漫之都的咖啡文化
2021/03/03 咖啡文化
模板引擎正则表达式调试小技巧
2011/07/20 PHP
php 数组字符串搜索array_search技巧
2016/07/05 PHP
PHPCMS V9 添加二级导航的思路详解
2016/10/20 PHP
PHP实现的62进制转10进制,10进制转62进制函数示例
2019/06/06 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
2010/09/12 Javascript
NodeJS url验证(url-valid)的使用方法
2013/11/18 NodeJs
使用JS取得焦点(focus)元素代码
2014/03/22 Javascript
Javascript连接多个数组不用concat来解决
2014/03/24 Javascript
JS根据变量保存方法名并执行方法示例
2014/04/04 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
2015/05/25 Javascript
JQuery的Pager分页器实现代码
2016/05/03 Javascript
Ionic如何实现下拉刷新与上拉加载功能
2016/06/03 Javascript
Bootstrap3 Grid system原理及应用详解
2016/09/30 Javascript
JS常用加密编码与算法实例总结
2016/12/22 Javascript
BootStrap入门学习第一篇
2017/08/28 Javascript
webpack vue项目开发环境局域网访问方法
2018/03/20 Javascript
Python中函数的多种格式和使用实例及小技巧
2015/04/13 Python
在Django框架中编写Context处理器的方法
2015/07/20 Python
python判断数字是否是超级素数幂
2018/09/27 Python
在python中利用KNN实现对iris进行分类的方法
2018/12/11 Python
Django 用户认证组件使用详解
2019/07/23 Python
Django:使用filter的pk进行多值查询操作
2020/07/15 Python
python tkinter实现连连看游戏
2020/11/16 Python
paramiko使用tail实时获取服务器的日志输出详解
2020/12/06 Python
CSS3制作半透明边框(Facebox)类似渐变
2012/12/09 HTML / CSS
浅谈CSS3 动画卡顿解决方案
2019/01/02 HTML / CSS
快速实现一个简单的canvas迷宫游戏的示例
2018/07/04 HTML / CSS
HTML5 实现图片上传预处理功能
2020/02/06 HTML / CSS
怎样让char类型的东西转换成int类型
2013/12/09 面试题
升国旗仪式主持词
2014/03/19 职场文书
园林专业毕业生自荐信
2014/07/04 职场文书
六年级小学生评语
2014/12/26 职场文书
经销商会议开幕词
2016/03/04 职场文书
nginx配置proxy_pass中url末尾带/与不带/的区别详解
2021/03/31 Servers