首页
所有分类
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 相关文章推荐
用js得到网页中所有的div的id
Oct 19 Javascript
解javascript 混淆加密收藏
Jan 16 Javascript
实现超用户体验 table排序javascript实现代码
Jun 22 Javascript
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
Aug 05 Javascript
select标记美化--JS式插件、后期加载
Apr 01 Javascript
非jQuery实现照片散落桌子上，单击放大的LightBox效果
Nov 28 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪（放大缩小）
Dec 02 Javascript
微信小程序如何使用云开发
May 17 Javascript
深入理解JS异步编程-Promise
Jun 03 Javascript
javascript面向对象三大特征之封装实例详解
Jul 24 Javascript
一篇文章带你浅入webpack的DLL优化打包
Feb 20 Javascript
Vue filter 过滤器、以及在table中的使用介绍
Sep 07 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
JDBC(3) 缓冲区(1) Eclipse(1) pdf(1) 弹窗(1) cypress(1) JOIN(1) 变量提升(1) ant design(2) form表单(1)
You might like
PHP实现查询两个数组中不同元素的方法
2016/02/23 PHP
JS在IE和FF下attachEvent,addEventListener学习笔记
2009/11/26 Javascript
JavaScript 学习笔记（五）
2009/12/31 Javascript
jquery 与NVelocity 产生冲突的解决方法
2011/06/13 Javascript
jQuery回车实现登录简单实现
2013/08/20 Javascript
jQuery学习笔记之jQuery动画效果
2013/09/09 Javascript
javascript unicode与GBK2312(中文)编码转换方法
2013/11/14 Javascript
jquery ajax jsonp跨域调用实例代码
2013/12/11 Javascript
js闭包的用途详解
2014/11/09 Javascript
javascript中使用正则表达式清理table样式的代码
2020/04/01 Javascript
Nodejs进阶：express+session实现简易登录身份认证
2017/04/24 NodeJs
JS实现图片手风琴效果
2020/04/17 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
2018/01/05 Javascript
js实现轮播图特效
2020/05/28 Javascript
Vue 的 v-model用法实例
2020/11/23 Vue.js
[51:52]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
python中定义结构体的方法
2013/03/04 Python
从CentOS安装完成到生成词云python的实例
2017/12/01 Python
pandas数据预处理之dataframe的groupby操作方法
2018/04/13 Python
Python实现的查询mysql数据库并通过邮件发送信息功能
2018/05/17 Python
Python图像处理之gif动态图的解析与合成操作详解
2018/12/30 Python
pyspark操作MongoDB的方法步骤
2019/01/04 Python
django admin后台添加导出excel功能示例代码
2019/05/15 Python
基于Keras中Conv1D和Conv2D的区别说明
2020/06/19 Python
Python如何创建装饰器时保留函数元信息
2020/08/07 Python
CSS3之边框多颜色Border-color属性使用示例
2013/10/11 HTML / CSS
HTML5 canvas基本绘图之绘制五角星
2016/06/27 HTML / CSS
naturalizer加拿大官网：美国娜然女鞋
2017/04/04 全球购物
托管代码(Managed Code)和非托管代码(Unmanaged Code)有什么区别
2014/09/29 面试题
前台文员个人求职信范文
2014/01/05 职场文书
勾股定理课后反思
2014/04/26 职场文书
大专学生求职自荐信
2014/07/06 职场文书
2014年大堂经理工作总结
2014/11/21 职场文书
公司2014年度工作总结
2014/12/10 职场文书
法人代表资格证明书
2015/06/18 职场文书
SpringBoot深入分析讲解监听器模式下
2022/07/15 Java/Android