基于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 相关文章推荐
JQuery 拾色器插件发布-jquery.icolor.js
Oct 20 Javascript
初窥JQuery(一)jquery选择符 必备知识点
Nov 25 Javascript
jQuery中判断一个元素是否为另一个元素的子元素(或者其本身)
Mar 21 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
May 09 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
Sep 06 Javascript
微信小程序 获取相册照片实例详解
Nov 16 Javascript
Angular2平滑升级到Angular4的步骤详解
Mar 29 Javascript
vue登录注册及token验证实现代码
Dec 14 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
Dec 20 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
May 20 Javascript
详解Vue3 Teleport 的实践及原理
Dec 02 Vue.js
JavaScript中MutationObServer监听DOM元素详情
Nov 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中函数的形参与实参的问题说明
2010/09/01 PHP
通过php添加xml文档内容的方法
2015/01/23 PHP
PHP读取配置文件类实例(可读取ini,yaml,xml等)
2015/07/28 PHP
Zend Framework教程之资源(Resources)用法实例详解
2016/03/14 PHP
thinkphp3.2框架中where条件查询用法总结
2019/08/13 PHP
laravel 实现用户登录注销并限制功能
2019/10/24 PHP
Flash+XML滚动新闻代码 无图片 附源码下载
2007/11/22 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
2014/06/27 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
2015/03/04 Javascript
javascript白色简洁计算器
2015/05/04 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
2016/01/27 Javascript
浅析JS动态创建元素【两种方法】
2016/04/20 Javascript
Angular2使用Augury来调试Angular2程序
2017/05/21 Javascript
javascript 封装Date日期类实例详解
2017/05/28 Javascript
Javascript中JSON数据分组优化实践及JS操作JSON总结
2017/12/22 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
2018/09/20 Javascript
详解如何使用koa实现socket.io官网的例子
2018/11/04 Javascript
Vue动态生成表格的行和列
2019/07/18 Javascript
实例讲解python函数式编程
2014/06/09 Python
Django objects.all()、objects.get()与objects.filter()之间的区别介绍
2017/06/12 Python
Python3一行代码实现图片文字识别的示例
2018/01/15 Python
对python模块中多个类的用法详解
2019/01/10 Python
使用PyTorch实现MNIST手写体识别代码
2020/01/18 Python
python实现QQ邮箱发送邮件
2020/03/06 Python
在python中修改.properties文件的操作
2020/04/08 Python
详解scrapy内置中间件的顺序
2020/09/28 Python
html5指南-2.如何操作document metadata
2013/01/07 HTML / CSS
英国电气世界:Electrical World
2019/09/08 全球购物
斯洛伐克最大的婴儿食品和用品网上商店:Feedo.sk
2020/12/21 全球购物
迪士尼法国在线商店:shopDisney FR
2020/12/03 全球购物
香奈儿美国官网:CHANEL美国
2020/05/20 全球购物
个人自我剖析材料
2014/02/07 职场文书
乳制品整治工作方案
2014/05/29 职场文书
科学发展观活动总结
2014/08/28 职场文书
教师批评与自我批评总结
2014/10/16 职场文书
王亚平太空授课观后感
2015/06/12 职场文书