扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript自定义日历实现签到功能
  • 528

0
分享到

JavaScript自定义日历实现签到功能

2024-04-02 19:04:59 528人浏览 独家记忆
摘要

本文实例为大家分享了javascript自定义日历签到功能的具体代码，供大家参考，具体内容如下 先看下效果图 红色块为已签到的日期，样式可以随意更改，清晰明了，话不多说上代码： &

本文实例为大家分享了javascript自定义日历签到功能的具体代码，供大家参考，具体内容如下

先看下效果图

红色块为已签到的日期，样式可以随意更改，清晰明了，话不多说上代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
     <head>
        <base href="<%=basePath%>" rel="external nofollow" >
        
        <title>My jsP 'index.jsp' starting page</title>
        <script type="text/javascript" src="js/Jquery.min.1.12.4.js"></script>
        <link rel="stylesheet" type="text/CSS" href="css/sign.css" rel="external nofollow" />
        <script type="text/javascript" src="js/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>

js文件：

var calUtil = {
  //当前日历显示的年份
  showYear:new Date().getFullYear(),
  //当前日历显示的月份
  showMonth:new Date().getMonth()+1,
  //当前日历显示的天数
  showDays:new Date().getDate(),
  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();
  },
  
  qiandao:function(){
      alert("签到成功");
      var signList=[{"signDay":"10"},{"signDay":"11"},{"signDay":"12"},{"signDay":"13"},{"signDay":"17"}];
      calUtil.init(signList);
  },
  
  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]);
     if(myMonth[w][d]==new Date().getDate()&&new Date().getMonth()+1==calUtil.showMonth&&!ifHasSigned){
         //当前月当前天，允许签到
         htmls.push("<td οnclick='calUtil.qiandao()' class='today'>" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + "</td>");
     }else{
         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('');
  }
};

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;}
.sign .today {background-color:#FFAA33;}
.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;}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

--结束END--

本文标题: JavaScript自定义日历实现签到功能

本文链接: https://lsjlt.com/news/166289.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JavaScript自定义日历实现签到功能
    本文实例为大家分享了JavaScript自定义日历签到功能的具体代码，供大家参考，具体内容如下 先看下效果图 红色块为已签到的日期，样式可以随意更改，清晰明了，话不多说上代码： &...
    99+
    2024-04-02
  • Android自定义view实现日历打卡签到
    本文实例为大家分享了Android自定义view实现日历打卡签到的具体代码，供大家参考，具体内容如下 1.说明 自己写一个view实现每天签到的功能，设置背景图片 源码下载 2.效果...
    99+
    2024-04-02
  • Android如何自定义view实现日历打卡签到
    这篇文章主要介绍Android如何自定义view实现日历打卡签到，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！Android是什么Android是一种基于Linux内核的自由及开放源代码的操作系统，主要使用于移动设备...
    99+
    2023-06-14
  • JavaScript怎么实现自定义日历效果
    本篇内容主要讲解“JavaScript怎么实现自定义日历效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“JavaScript怎么实现自定义日历效果”吧!实现思路：获取每个月的第一天是星期几，然...
    99+
    2023-06-25
  • Android实现自定义日历
    自定义日历控件，支持旧历、节气、日期标注、点击操作 （参考网络上的日历控件改写） 注：将下面的四张资源图片拷贝到所建包的下一个image目录中，如Calendar.java 所...
    99+
    2022-06-06
    自定义 Android
  • JavaScript自定义日历效果
    本文实例为大家分享了JavaScript自定义日历效果的具体代码，供大家参考，具体内容如下 实现思路：获取每个月的第一天是星期几，然后把前面的天数填充为空，在获取每个月有多少天，循环...
    99+
    2024-04-02
  • 微信小程序实现日历签到功能
    本文实例为大家分享了微信小程序实现日历签到的具体代码，供大家参考，具体内容如下 wxml: <!--pages/signin/signin.wxml--> <vi...
    99+
    2024-04-02
  • HTML5如何实现自定义样式与日历校验功能
    这篇文章给大家分享的是有关HTML5如何实现自定义样式与日历校验功能的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。1.日历控件自定义样式HTML5提供了日历控件功能，缩减了开发时...
    99+
    2024-04-02
  • js实现签到日历
    本文实例为大家分享了js实现签到日历的具体代码，供大家参考，具体内容如下 wxml代码 <view class="boxMain" style="height:{{dateL...
    99+
    2024-04-02
  • java简单实现自定义日历
    本文实例为大家分享了java自定义日历的具体代码，供大家参考，具体内容如下 效果图： 源码： package com.example; import java.text.Simp...
    99+
    2024-04-02
  • Android自定义实现日历控件
    本文实例为大家分享了Android自定义实现日历控件的具体代码，供大家参考，具体内容如下 1. Calendar类 2. 布局 创建calendar_layout.xml <...
    99+
    2024-04-02
  • Android自定义日历Calender代码实现
    产品要做签到功能，签到功能要基于一个日历来进行，所以就根据 要求自定义了一个日历 自定义控件相信做android都知道： （1）首先创建一个类，继承一个容器类或者是一个控...
    99+
    2022-06-06
    Android
  • Android Studio简单实现自定义日历
    本文实例为大家分享了Android Studio自定义日历的具体代码，供大家参考，具体内容如下 效果图： 目录树 1.DayBean.java用来存储每天的信息 package ...
    99+
    2024-04-02
  • javascript如何实现自定义事件功能
    这篇文章主要介绍了javascript如何实现自定义事件功能，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。概述自定义事件很难派上用场？为什么...
    99+
    2024-04-02
  • Android如何自定义实现日历控件
    这篇文章主要介绍Android如何自定义实现日历控件，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！具体内容如下1. Calendar类2. 布局创建calendar_layout.xml<LinearLayou...
    99+
    2023-06-25
  • vue实现签到日历效果
    本文实例为大家分享了vue实现签到日历效果的具体代码，供大家参考，具体内容如下 先看看我们的效果图： 一、页面部分： <template>   <div clas...
    99+
    2024-04-02
  • JavaScript自定义插件实现tabs切换功能
    本文实例为大家分享了JavaScript实现tabs切换功能的具体代码，供大家参考，具体内容如下 自定义插件实现tabs切换功能 这是HTML代码： <script src...
    99+
    2024-04-02
  • 怎么用javascript实现自定义事件功能
    这篇文章主要介绍“怎么用javascript实现自定义事件功能”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“怎么用javascript实现自定义事件功能”文章能帮助大家解决问题。概述自定义事件很难派...
    99+
    2023-06-17
  • Vue.js实现日历功能
    本文实例为大家分享了Vue.js实现日历功能的具体代码，供大家参考，具体内容如下 Github 功能需求 使用 Vue.js 实现指定年月的日历表，配合后台接口数据，添加对应日期的...
    99+
    2024-04-02
  • java实现日历功能
    本文实例为大家分享了java实现日历功能的具体代码，供大家参考，具体内容如下 完成一个 java application应用程序，输出一份当前所在时区当前时间的一个月的日历（1号到2...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作