首页
所有分类
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 相关文章推荐
鼠标左键单击冲突的问题解决方法(防止冒泡)
May 14 Javascript
jquery常用操作小结
Jul 21 Javascript
jquery实现动态操作select选中
Feb 11 Javascript
理解Javascript的call、apply
Dec 16 Javascript
小心！AngularJS结合RequireJS做文件合并压缩的那些坑
Jan 09 Javascript
Web打印解决方案之证件套打的实现思路
Aug 29 Javascript
浅谈webpack 构建性能优化策略小结
Jun 13 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
vue实现登录页面的验证码以及验证过程解析(面向新手)
Aug 02 Javascript
js针对图片加载失败的处理方法分析
Aug 24 Javascript
在vue-cli创建的项目中使用sass操作
Aug 10 Javascript
JS轻量级函数式编程实现XDM二
Jun 16 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
random(1) pygame(3) 结构体(1) DFA(1) map(4) 指针(1) vue-esign(1) WeUI(1) Slice(1) 切片(1)
You might like
收听困难？教您超简便短波广播抗干扰方法！
2021/03/01 无线电
php上传文件,创建递归目录的实例代码
2013/10/18 PHP
PHP中mysqli_affected_rows作用行数返回值分析
2014/12/26 PHP
PHP框架laravel的.env文件配置教程
2017/06/07 PHP
php+lottery.js实现九宫格抽奖功能
2019/07/21 PHP
js png图片(有含有透明)在IE6中为什么不透明了
2010/02/07 Javascript
javascript 学习笔记(onchange等)
2010/11/14 Javascript
jquery 学习之二 属性(html()与html(val))
2010/11/25 Javascript
深入理解Javascript闭包 新手版
2010/12/28 Javascript
jQuery 隐藏和显示 input 默认值示例
2014/06/03 Javascript
JavaScript中操作Mysql数据库实例
2015/04/02 Javascript
jQuery实现的经典滑动门效果
2015/09/22 Javascript
关于JS 预解释的相关理解
2016/06/28 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
2016/11/07 Javascript
Node连接mysql数据库方法介绍
2017/02/07 Javascript
js实现时间轴自动排列效果
2017/03/09 Javascript
详解Angular结合zTree异步加载节点数据
2018/01/20 Javascript
vue中echarts引入中国地图的案例
2020/07/28 Javascript
js实现炫酷光感效果
2020/09/05 Javascript
[01:08:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS LGD-CDEC
2014/05/22 DOTA
python3简单实现微信爬虫
2015/04/09 Python
简单介绍Python中的floor()方法
2015/05/15 Python
python3实现暴力穷举博客园密码
2016/06/19 Python
Python实现多态、协议和鸭子类型的代码详解
2019/05/05 Python
4行Python代码生成图像验证码(2种)
2020/04/07 Python
python 牛顿法实现逻辑回归（Logistic Regression）
2020/10/15 Python
Django通过设置CORS解决跨域问题
2020/11/26 Python
美国球鞋寄卖网站：Stadium Goods
2018/05/09 全球购物
新员工欢迎词
2014/01/12 职场文书
超市5.1促销活动
2014/01/15 职场文书
党校培训自我鉴定范文
2014/04/10 职场文书
幼儿园家长安全责任书
2014/07/22 职场文书
安全生产工作汇报
2014/10/28 职场文书
2014年财务工作总结范文
2014/11/11 职场文书
2014年银行员工工作总结
2014/11/12 职场文书
Python的property属性详细讲解
2022/04/11 Python