基于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四则运算函数代码
Jul 21 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
Jul 17 Javascript
js实现的常用的左侧导航效果
Oct 17 Javascript
javascript字符串替换及字符串分割示例代码
Dec 12 Javascript
基于javascript实现样式清新图片轮播特效
Mar 30 Javascript
需要牢记的JavaScript基础知识
Sep 25 Javascript
简易的JS计算器实现代码
Oct 18 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
Feb 22 Javascript
微信小程序-滚动消息通知的实例代码
Aug 03 Javascript
Angular2 组件间通过@Input @Output通讯示例
Aug 24 Javascript
微信网页授权并获取用户信息的方法
Jul 30 Javascript
vue展示dicom文件医疗系统的实现代码
Aug 27 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动态图像的创建
2006/10/09 PHP
php 读取文件头判断文件类型的实现代码
2013/08/05 PHP
php编写的一个E-mail验证类
2015/03/25 PHP
php创建无限级树型菜单
2015/11/05 PHP
WordPress中获取所使用的模板的页面ID的简单方法
2015/12/31 PHP
PHP简单字符串过滤方法示例
2016/09/04 PHP
php cookie用户登录的详解及实例代码
2017/01/03 PHP
javascript hasFocus使用实例
2010/06/29 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
2012/03/15 Javascript
js自定义方法通过隐藏iframe实现文件下载
2013/02/21 Javascript
JQuery获取样式中的background-color颜色值的问题
2013/08/20 Javascript
Javascript实现视频轮播在pc端与移动端均可
2013/09/29 Javascript
Javascript原型链和原型的一个误区
2014/10/22 Javascript
常用的JavaScript模板引擎介绍
2015/02/28 Javascript
原生ajax处理json格式数据的实例代码
2016/12/25 Javascript
AngularJS实现表单元素值绑定操作示例
2017/10/11 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
2018/05/22 Javascript
使用javascript函数编写简单银行取钱存钱流程
2018/05/26 Javascript
在angularJs中进行数据遍历的2种方法
2018/10/08 Javascript
JavaScript如何实现元素全排列实例代码
2019/05/14 Javascript
vue2.x 对象劫持的原理实现
2020/04/19 Javascript
[06:30]DOTA2英雄梦之声_第15期_死亡先知
2014/06/21 DOTA
[27:39]Ti4 循环赛第二日 LGD vs Fnatic
2014/07/11 DOTA
pyqt和pyside开发图形化界面
2014/01/22 Python
python 列表,数组和矩阵sum的用法及区别介绍
2018/06/28 Python
Python简易版图书管理系统
2019/08/12 Python
Python xlrd模块导入过程及常用操作
2020/06/10 Python
Lookfantastic日本官网:英国知名护肤、化妆品和头发护理购物网站
2018/04/21 全球购物
大都会艺术博物馆商店:The Met Store
2018/06/22 全球购物
Public Desire美国/加拿大:全球性的在线鞋类品牌
2018/12/17 全球购物
简单而又朴实的个人求职信分享
2013/12/12 职场文书
大学生职业生涯规划书范文
2014/01/04 职场文书
教师产假请假条范文
2014/04/10 职场文书
辞旧迎新演讲稿
2014/09/15 职场文书
见习报告格式范文
2014/11/08 职场文书
2016大学军训心得体会
2016/01/11 职场文书