首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

基于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程序设计有所帮助。

基于jquery实现日历签到功能

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js压缩利器
Feb 20 Javascript
JS下拉框内容左右移动效果的具体实现
Jul 10 Javascript
Jquery中val()表单取值赋值的实例代码
Aug 15 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
Oct 23 Javascript
AngularJS内置指令
Feb 04 Javascript
JavaScript输出当前时间Unix时间戳的方法
Apr 06 Javascript
详解springmvc 接收json对象的两种方式
Dec 06 Javascript
Bootstrap select多选下拉框实现代码
Dec 23 Javascript
VUE 3D轮播图封装实现方法
Jul 03 Javascript
javascript中call,apply,callee,caller用法实例分析
Jul 24 Javascript
vue搜索页开发实例代码详解（热门搜索，历史搜索，淘宝接口演示）
Apr 11 Javascript
vue 动态添加class,三个以上的条件做判断方式
Nov 02 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
Ruby面试题(15) Delphi面试题(13) 自我鉴定(671) 自我评价(886) J2EE面试题(19) Servlet面试题(20) SOA面试题(9) MySQL面试题(19) 自荐信(981) UNIX面试题(27)
You might like
据说是雅虎的一份PHP面试题附答案
2009/01/07 PHP
php下正则来匹配dede模板标签的代码
2010/08/21 PHP
PHP 5.6.11 访问SQL Server2008R2的几种情况详解
2016/08/08 PHP
PHP5.5安装PHPRedis扩展及连接测试方法
2017/01/22 PHP
thinkphp3.2.0 setInc方法 源码全面解析
2018/01/29 PHP
checkbox 多选框 联动实现代码
2008/10/22 Javascript
某人初学javascript的时候写的学习笔记
2010/12/30 Javascript
jquery高效反选具体实现
2013/05/05 Javascript
Google (Local) Search API的简单使用介绍
2013/11/28 Javascript
ECMAScript6函数默认参数
2015/06/12 Javascript
jQuery选择器用法实例详解
2015/12/17 Javascript
Extjs实现下拉菜单效果
2016/04/01 Javascript
jQuery 实现评论等级好评差评特效
2016/05/06 Javascript
js 实现数值的千分位及保存小数方法(推荐)
2016/08/01 Javascript
AngularJS基础 ng-value 指令简单示例
2016/08/03 Javascript
Angularjs 制作购物车功能实例代码
2016/09/14 Javascript
教你用十行node.js代码读取docx的文本
2017/03/08 Javascript
webpack项目调试以及独立打包配置文件的方法
2018/02/28 Javascript
JavaScript复制变量三种方法实例详解
2020/01/09 Javascript
基于Vue+Webpack拆分路由文件实现管理
2020/11/16 Javascript
JS模拟实现京东快递单号查询
2020/11/30 Javascript
深入理解Django自定义信号（signals)
2018/10/15 Python
Python3.5文件修改操作实例分析
2019/05/01 Python
python日志模块logbook使用方法
2019/09/19 Python
利用Python脚本批量生成SQL语句
2020/03/04 Python
什么是Python变量作用域
2020/06/03 Python
使用OpenCV实现人脸图像卡通化的示例代码
2021/01/15 Python
巴西宠物店在线：Geração Pet
2017/05/31 全球购物
信息部岗位职责
2013/11/12 职场文书
建筑工程技术应届生求职信
2013/11/17 职场文书
最新奶茶店创业计划书
2014/01/25 职场文书
精彩的广告词
2014/03/19 职场文书
社区工作者个人总结
2015/02/28 职场文书
个人工作能力自我评价
2015/03/05 职场文书
Nginx利用Logrotate实现日志分割
2022/05/20 Servers
win10音频服务未响应怎么解决?win10音频服务未响应未修复的解决方法
2022/08/14 数码科技