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

使用Jquery实现每日签到功能

Posted in Javascript onApril 03, 2015

一直想做一个签到功能，但是百度了都没有自己想要的，所以就借着网上搜到的素材然后整合自己之前写的插件layerModel自己整合了一个，大家娱乐娱乐就好！

calendar.js

var calUtil = {
    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'>2015年04月</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('');
    }
};

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: url(images/sign_have.gif) no-repeat center;}
.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;/**background-color: #FBFEFE;**/border-top:1px solid #e3e3e3;font-family: "Microsoft YaHei",SimHei;display: none;}

sign.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>签到效果实现</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/jquery-1.8.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/resources/sign/sign.css"/>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/sign/calendar.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/layerModel/jquery.layerModel.js"></script>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/resources/layerModel/layerModel.css"/>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/resources/layerModel/layerModel.plugin.css"/>
<script type="text/javascript">
var ctx = "${pageContext.request.contextPath}";
/*签到模块日期捕捉：*/
function week(){
  var objDate= new Date();
  var week = objDate.getDay();
  switch(week)
    {
      case 0:
      week="周日";
      break;
      case 1:
      week="周一";
      break;
      case 2:
      week="周二";
      break;
      case 3:
      week="周三";
      break;
      case 4:
      week="周四";
      break;
      case 5:
      week="周五";
      break;
      case 6:
      week="周六";
      break;
    }
  $("#sing_for_number").html( week );
}
$(function(){
  week();
  var current = new Date();
  $(".singer_r_img").click(function(){
    var s = this;
    showLoading("正在签到...");
    $.ajax({
      url : "${pageContext.request.contextPath}/sign/doSign",
      type : "POST",
      dataType : "json",
      success : function(data) {
        loadingComplete();
        var rst = data.result;
        if(rst == 1) {
          showError("今天您已经签到，无须再次签到！",function(){
            var signList = data.signList;
            $(s).addClass("current");
            var str = calUtil.drawCal(current.getFullYear(),current.getMonth() + 1,signList);
            $(str).layerModel({title:"签到日历"});
          });
        } else {
          showSuccess("签到成功！",function(){
            var signList = data.signList;
            $(s).addClass("current");
            var str = calUtil.drawCal(current.getFullYear(),current.getMonth() + 1,signList);
            $(str).layerModel({title:"签到日历"});
          });
        }
      }
    });
  });
});
</script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/layerModel/jquery.layerModel.plugin.js"></script>
</head>
 
<body>
    <a class="singer_r_img" href="###">    
      <span id="sing_for_number">签到</span>
    </a>
</body>
</html>

SignController.java

package com.controller;
 
import java.util.Date;
import java.util.List;
 
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
 
import com.common.framework.controller.BaseController;
import com.common.util.RequestUtil;
import com.model.entity.SignEntity;
import com.model.service.SignService;
 
@Controller
@RequestMapping("/sign")
public class SignController extends BaseController {
  @Autowired
  private SignService signService;
   
  @RequestMapping("/doSign")
  public ModelAndView doSign(HttpServletRequest request, HttpServletResponse response) {
    ModelAndView view = super.createJsonView();
    try {
      // 先查询是否已经签到
      boolean ifHasSigned = signService.ifHasSigned();
      if(ifHasSigned) {
        view.addObject("result", "1");
      } else {
        SignEntity signEntity = new SignEntity();
        Date signDate = new Date();
        signEntity.setSignTime(signDate);
        signEntity.setSignDay(Long.valueOf(signDate.getDate()));
        signEntity.setSignIp(RequestUtil.getIpAddr(request));
        signEntity.setSigner("zhoukun");
        signService.signTX(signEntity);
        view.addObject("result", "0");
      }
      List<SignEntity> signList = signService.listSign();
      view.addObject("signList", signList);
    } catch (Exception e) {
      e.printStackTrace();
    }
    return view;
  }
  public static void main(String[] args) {
    System.out.println(new Date().getDate());
  }
}

演示图：

使用Jquery实现每日签到功能 

以上所述就是本文的全部内容了，希望大家能够喜欢。

使用Jquery实现每日签到功能

- Author -

hebedich

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

Javascript 相关文章推荐
jQuery源码中的chunker 正则过滤符分析
Jul 31 Javascript
javascript if条件判断方法小结
May 17 Javascript
jQuery中live()方法用法实例
Jan 19 Javascript
javascript判断数组内是否重复的方法
Apr 21 Javascript
支持移动端原生js轮播图
Feb 16 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
Apr 13 Javascript
bootstrap Table的一些小操作
Nov 01 Javascript
从setTimeout看js函数执行过程
Dec 19 Javascript
JS实现的合并多个数组去重算法示例
Apr 11 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
Aug 22 Javascript
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
Oct 26 Javascript
react基本安装与测试示例
Apr 27 Javascript
JavaScript获取按钮所在form表单id的方法
Apr 02 #Javascript
JavaScript获取表单内所有元素值的方法
Apr 02 #Javascript
jQuery简单实现QQ空间点赞已经取消点赞
Apr 02 #Javascript
JavaScript获取网页支持表单字符集的方法
Apr 02 #Javascript
JavaScript获取网页表单action属性的方法
Apr 02 #Javascript
使用jquery清空、复位整个输入域
Apr 02 #Javascript
JavaScript获取表单enctype属性的方法
Apr 02 #Javascript
TcpServer(1) pt-archiver(1) 存储过程(3) 增删改查(2) redo log(1) binlog(2) 优化(1) 忘记密码(1) B+树(2) instantclient(1)
You might like
使用 MySQL Date/Time 类型
2008/03/26 PHP
PHPThumb PHP 图片缩略图库
2012/03/11 PHP
从零开始学YII2框架（六）高级应用程序模板
2014/08/20 PHP
php正则preg_replace_callback函数用法实例
2015/06/01 PHP
ThinkPHP3.2.2实现持久登录(记住我)功能的方法
2016/05/16 PHP
PHP的mysqli_select_db()函数讲解
2019/01/23 PHP
Laravel如何创建服务器提供者实例代码
2019/04/15 PHP
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
2013/02/05 Javascript
Jquery同辈元素选中/未选中效果的实例代码
2013/08/01 Javascript
学习JavaScript设计模式之代理模式
2016/01/12 Javascript
AngularJS表单详解及示例代码
2016/08/17 Javascript
nodejs模块nodemailer基本使用-邮件发送示例(支持附件)
2017/03/28 NodeJs
vue单个组件实现无限层级多选菜单功能
2018/04/10 Javascript
js中对象与对象创建方法的各种方法
2019/02/27 Javascript
从0到1搭建Element的后台框架的方法步骤
2019/04/10 Javascript
使用express获取微信小程序二维码小记
2019/05/21 Javascript
你不可不知的Vue.js列表渲染详解
2019/10/01 Javascript
es6中Promise 对象基本功能与用法实例分析
2020/02/23 Javascript
python实现计算资源图标crc值的方法
2014/10/05 Python
Python实现把xml或xsl转换为html格式
2015/04/08 Python
Python使用Scrapy保存控制台信息到文本解析
2017/12/27 Python
详解python实现识别手写MNIST数字集的程序
2018/08/03 Python
浅谈Python中的可迭代对象、迭代器、For循环工作机制、生成器
2019/03/11 Python
Python多线程操作之互斥锁、递归锁、信号量、事件实例详解
2020/03/24 Python
Farfetch美国：奢侈品牌时尚购物平台
2019/05/02 全球购物
橄榄树药房：OLIVEDA
2019/09/01 全球购物
PHP面试题及答案二
2015/05/23 面试题
财务管理专业推荐信
2013/11/19 职场文书
倡议书格式范文
2014/04/14 职场文书
设计专业毕业生求职信
2014/06/25 职场文书
科技工作者先进事迹
2014/08/16 职场文书
入党积极分子批评与自我批评思想汇报
2014/09/14 职场文书
2014年党员自我评价材料
2014/09/22 职场文书
毕业实习证明（4篇）
2014/10/28 职场文书
感恩老师主题班会
2015/08/12 职场文书
2016年推广普通话宣传周活动总结
2016/04/06 职场文书