欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-10-22 19:33:17
本文实例为大家分享了js实现每日签到打卡轨迹功能的具体代码,供大家参考,具体内容如下 1. 核心文件 calendar.js  var ca...

本文实例为大家分享了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实现每日签到打卡轨迹功能

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