首页
所有分类
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 Ajax 全解析
Feb 08 Javascript
JavaScript高级程序设计 DOM学习笔记
Sep 10 Javascript
Javascript Web Slider 焦点图示例源码
Oct 10 Javascript
addEventListener 的用法示例介绍
May 07 Javascript
javascript实现画不相交的圆
Apr 07 Javascript
基于JS代码实现实时显示系统时间
Jun 16 Javascript
Vue方法与事件处理器详解
Dec 01 Javascript
原生js实现吸顶效果
Mar 13 Javascript
浅谈在Vue-cli里基于axios封装复用请求
Nov 06 Javascript
深入浅析JSONAPI在PHP中的应用
Dec 24 Javascript
详解ES6 Promise的生命周期和创建
Aug 18 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
Sep 05 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
variable_scope(1) 绘图(1) blinker(1) 三子棋(2) 信号库(1) Keras(3) 计时器(1) 神经网络(7) name_scope (1) turtle(1)
You might like
使用PHP socke 向指定页面提交数据
2008/07/23 PHP
PHP获取网址的顶级域名函数代码
2012/09/24 PHP
PHP导出EXCEL快速开发指南--PHPEXCEL的使用详解
2013/06/03 PHP
PHP常用文件操作函数和简单实例分析
2016/06/03 PHP
Django 中 cookie的使用
2017/08/17 PHP
图片延迟加载的实现代码(模仿懒惰)
2013/03/29 Javascript
jquery JSON的解析方式示例介绍
2014/07/27 Javascript
推荐9款炫酷的基于jquery的页面特效
2014/12/07 Javascript
javascript作用域问题实例分析
2015/07/13 Javascript
微信小程序 progress组件详解及实例代码
2016/10/25 Javascript
js实现获取鼠标当前的位置
2016/12/14 Javascript
JS Select下拉框(支持输入模糊查询)
2017/02/04 Javascript
浅谈vue2 单页面如何设置网页title
2017/11/08 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染（SSR）
2018/04/05 Javascript
详解Puppeteer前端自动化测试实践
2019/02/21 Javascript
微信小程序数据统计和错误统计的实现方法
2019/06/26 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
2019/09/09 Javascript
layui 实现表格某一列显示图标
2019/09/19 Javascript
详解如何在Vue项目中发送jsonp请求
2019/10/25 Javascript
Vue请求java服务端并返回数据代码实例
2019/11/28 Javascript
[40:03]RNG vs VG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
对python中的iter()函数与next()函数详解
2018/10/18 Python
Python+PyQT5的子线程更新UI界面的实例
2019/06/14 Python
Pandas之ReIndex重新索引的实现
2019/06/25 Python
django中账号密码验证登陆功能的实现方法
2019/07/15 Python
python实现拉普拉斯特征图降维示例
2019/11/25 Python
PyTorch实现ResNet50、ResNet101和ResNet152示例
2020/01/14 Python
Python+redis通过限流保护高并发系统
2020/04/15 Python
Nginx+Uwsgi+Django 项目部署到服务器的思路详解
2020/05/08 Python
python利用google翻译方法实例（翻译字幕文件）
2020/09/21 Python
Django多个app urls配置代码实例
2020/11/26 Python
档案接收函范文
2014/01/10 职场文书
大四自我鉴定
2014/02/08 职场文书
公司经营目标责任书
2015/01/29 职场文书
2016年端午节寄语
2015/12/04 职场文书
SpringDataJPA实体类关系映射配置方式
2021/12/06 Java/Android