Gunakan Jquery untuk melaksanakan fungsi daftar masuk harian

Saya sentiasa mahu membuat fungsi daftar masuk, tetapi Baidu tidak mempunyai apa yang saya mahu, jadi saya menggunakan bahan yang saya cari dalam talian dan menyepadukan lapisanModel pemalam yang saya tulis sebelum ini untuk menyepadukannya sendiri seronok!

kalendar.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]) &#63; myMonth[w][d] : " ") + "</td>");
          } else {
            htmls.push("<td>" + (!isNaN(myMonth[w][d]) &#63; myMonth[w][d] : " ") + "</td>");
          }
        }
        htmls.push("</tr>");
      }
      htmls.push("</table>");
      htmls.push("</div>");
      htmls.push("</div>");
      return htmls.join('');
    }
};

Salin selepas log masuk

tanda.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;}

Salin selepas log masuk

tanda.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>

Salin selepas log masuk

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());
  }
}

Salin selepas log masuk

Gambar demo:

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.

Gunakan Jquery untuk melaksanakan fungsi daftar masuk harian_jquery