基于jquery实现日历签到功能


Posted in Javascript onSeptember 11, 2020

在一些任务游戏、贴吧管理中都会有一个签到功能,帮助大家记录登录天数,积累等级经验,这个日历签到功能是如何实现的,本文为大家进行演。

本文实例讲述了基于jquery实现日历签到功能。分享给大家供大家参考。具体如下:
运行效果截图如下:

基于jquery实现日历签到功能

具体代码如下:

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>签到效果实现</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="sign.css"/>
<script type="text/javascript" src="calendar.js"></script>
<script type="text/javascript">
$(function(){
 //ajax获取日历json数据
 var signList=[{"signDay":"10"},{"signDay":"11"},{"signDay":"12"},{"signDay":"13"}];
  calUtil.init(signList);
});
</script>
</head>
<body>
<div style="width:300px;height:300px;" id="calendar"></div>
</body>
</html>

sign.css

.singer_r_img{display:block;width:114px;height:52px;line-height:45px;background:url(images/sing_week.gif) right 2px no-repeat;vertical-align:middle;*margin-bottom:-10px;text-decoration:none;}
.singer_r_img:hover{background-position:right -53px;text-decoration:none;}
.singer_r_img span{margin-left:14px;font-size:16px;font-family:'Hiragino Sans GB','Microsoft YaHei',sans-serif !important;font-weight:700;color:#165379;}
.singer_r_img.current{background:url(images/sing_sing.gif) no-repeat 0 2px;border:0;text-decoration:none;}
.sign table{border-collapse: collapse;border-spacing: 0;width:100%;}
.sign th,.sign td {width: 30px;height: 40px;text-align: center;line-height: 40px;border:1px solid #e3e3e3;}
.sign th {font-size: 16px;}
.sign td {color: #404040;vertical-align: middle;}  
.sign .on {background-color:red;}
.calendar_month_next,.calendar_month_prev{width: 34px;height: 40px;cursor: pointer;background:url(images/sign_arrow.png) no-repeat;}
.calendar_month_next {float: right;background-position:-42px -6px;}
.calendar_month_span {display: inline;line-height: 40px;font-size: 16px;color: #656565;letter-spacing: 2px;font-weight: bold;}
.calendar_month_prev {float: left;background-position:-5px -6px;}
.sign_succ_calendar_title {text-align: center;width:398px;border-left:1px solid #e3e3e3;border-right:1px solid #e3e3e3;background:#fff;}
.sign_main {width: 400px;border-top:1px solid #e3e3e3;font-family: "Microsoft YaHei",SimHei;}

calendar.js

var calUtil = {
 //当前日历显示的年份
 showYear:2015,
 //当前日历显示的月份
 showMonth:1,
 //当前日历显示的天数
 showDays:1,
 eventName:"load",
 //初始化日历
 init:function(signList){
  calUtil.setMonthAndDay();
  calUtil.draw(signList);
  calUtil.bindEnvent();
 },
 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); 
 },
 //绑定事件
 bindEnvent:function(){
  //绑定上个月事件
  $(".calendar_month_prev").click(function(){
   //ajax获取日历json数据
   var signList=[{"signDay":"10"},{"signDay":"11"},{"signDay":"12"},{"signDay":"13"}];
   calUtil.eventName="prev";
   calUtil.init(signList);
  });
  //绑定下个月事件
  $(".calendar_month_next").click(function(){
   //ajax获取日历json数据
   var signList=[{"signDay":"10"},{"signDay":"11"},{"signDay":"12"},{"signDay":"13"}];
   calUtil.eventName="next";
   calUtil.init(signList);
  });
 },
 //获取当前选择的年月
 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_next'>下月</div>");
  htmls.push("<div class='calendar_month_prev'>上月</div>");
  htmls.push("<div class='calendar_month_span'></div>");
  htmls.push("</div>");
  htmls.push("<div class='sign' id='sign_cal'>");
  htmls.push("<table>");
  htmls.push("<tr>");
  htmls.push("<th>" + myMonth[0][0] + "</th>");
  htmls.push("<th>" + myMonth[0][1] + "</th>");
  htmls.push("<th>" + myMonth[0][2] + "</th>");
  htmls.push("<th>" + myMonth[0][3] + "</th>");
  htmls.push("<th>" + myMonth[0][4] + "</th>");
  htmls.push("<th>" + myMonth[0][5] + "</th>");
  htmls.push("<th>" + myMonth[0][6] + "</th>");
  htmls.push("</tr>");
  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('');
 }
};

希望本文所述对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
容易被忽略的JS脚本特性
Sep 13 Javascript
ScrollDown的基本操作示例
Jun 09 Javascript
JavaScript检测字符串中是否含有html标签实现方法
Jul 01 Javascript
jQuery中 delegate使用的问题
Jul 03 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
Oct 16 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
Jun 05 Javascript
实例解析jQuery工具函数
Dec 01 Javascript
js实现tab选项卡切换功能
Jan 13 Javascript
js判断是否是手机页面
Mar 17 Javascript
微信小程序自定义轮播图
Nov 04 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
Apr 17 Javascript
移动端JS实现拖拽两种方法解析
Oct 12 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
Nov 24 #Javascript
如何解决ligerUI布局时Center中的Tab高度大小
Nov 24 #Javascript
JS实现图片高亮展示效果实例
Nov 24 #Javascript
JS截取字符串实例详解
Nov 24 #Javascript
超漂亮的jQuery图片轮播特效
Nov 24 #Javascript
jquery实现移动端点击图片查看大图特效
Sep 11 #Javascript
jquery解析json格式数据的方法(对象、字符串)
Nov 24 #Javascript
You might like
php 文件上传实例代码
2012/04/19 PHP
Codeigniter上传图片出现“You did not select a file to upload”错误解决办法
2014/06/12 PHP
Javascript技术技巧大全(五)
2007/01/22 Javascript
javascript concat数组累加 示例
2009/09/03 Javascript
Javascript解决常见浏览器兼容问题的12种方法
2010/01/04 Javascript
初学js插入节点appendChild insertBefore使用方法
2011/07/04 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
2012/03/29 Javascript
密码强度检测效果实现原理与代码
2013/01/04 Javascript
javaScript arguments 对象使用介绍
2013/10/18 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
2015/02/17 Javascript
jQuery操作JSON的CRUD用法实例
2015/02/25 Javascript
JavaScript操作Cookie详解
2015/02/28 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
2016/06/21 Javascript
详解JS-- 浮点数运算处理
2016/11/28 Javascript
Vue 仿QQ左滑删除组件功能
2018/03/12 Javascript
Angular5集成eventbus的示例代码
2018/07/19 Javascript
Python使用MD5加密字符串示例
2014/08/22 Python
低版本中Python除法运算小技巧
2015/04/05 Python
自己编程中遇到的Python错误和解决方法汇总整理
2015/06/03 Python
Python和JavaScript间代码转换的4个工具
2016/02/22 Python
Numpy中矩阵matrix读取一列的方法及数组和矩阵的相互转换实例
2018/07/02 Python
Python实现网站表单提交和模板
2019/01/15 Python
Python操作Mongodb数据库的方法小结
2019/09/10 Python
python自动提取文本中的时间(包含中文日期)
2020/08/31 Python
纯CSS3实现Material Design效果
2017/03/09 HTML / CSS
HTML5 Canvas概述
2009/08/26 HTML / CSS
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
2018/08/28 HTML / CSS
牵手50香港:专为黄金岁月的单身人士而设的交友网站
2020/08/14 全球购物
Hibernate持久层技术
2013/12/16 面试题
土木工程建筑专业毕业生求职信
2013/10/21 职场文书
干部培训自我鉴定
2014/01/22 职场文书
小学教师听课制度
2014/02/01 职场文书
公务员培的训心得体会
2014/09/01 职场文书
课堂打架检讨书200字
2014/11/21 职场文书
python+opencv实现视频抽帧示例代码
2021/06/11 Python
Pandas自定义选项option设置
2021/07/25 Python