jQuery实现日历每日签到网页特效-js教程-PHP中文网

首页

web前端

js教程

jQuery实现日历每日签到网页特效

小云云

Mar 22, 2018 pm 01:06 PM

jquery 签到

本文主要和大家分享jQuery实现日历每日签到网页特效，主要以代码的形式和大家分享，希望能帮助到大家。

index.html

代码：

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery简洁的日历签到插件 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css" href="css/sign2.css">

<script type="text/javascript" src="js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="js/calendar2.js"></script>
<script type="text/javascript">
$(function(){
  //ajax获取日历json数据
  var signList=[{"signDay":"09"},{"signDay":"11"},{"signDay":"12"},{"signDay":"13"}];
   calUtil.init(signList);
});
</script>

</head>
<body>
	
<p style="" id="calendar"></p>

<p id="sign_note" style="text-align:center;position: relative;padding: 15px;    font-size: 14px;">
	<span style="color:red;">*规则：本月签到21天即可领取奖品</span>
</p>


</body>
</html>

登录后复制

calendar2.js

var calUtil = {
  //当前日历显示的年份
  showYear:2015,
  //当前日历显示的月份
  showMonth:1,
  //当前日历显示的天数
  showDays:1,
  eventName:"load",
  //初始化日历
  init:function(signList,s=&#39;&#39;){
    calUtil.setMonthAndDay();
    if (typeof(s) == &#39;undefined&#39;){
    }else{
      signList.splice(&#39;&#39;,&#39;&#39;,s);
    }
    calUtil.draw(signList);
    calUtil.bindEnvent(signList);
  },
  draw:function(signList){
    //绑定日历
    //alert(signList.length);
    console.log(signList);
    if(signList.length > 21){
      //alert(21);
      $("#sign_note").empty();
      $("#sign_note").html(&#39;<button class="sign_contener" type="button"><i class="fa fa-calendar-check-o" aria-hidden="true"></i> 已达标，获取1次抽奖</button>&#39;);
    }
    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(signList){
    // //绑定上个月事件
    // $(".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);
    // });
    
    $(".calendar_record").click(function(){
      //ajax获取日历json数据
      //alert(typeof(signList)+"yxy");
    	//var signList=[{"signDay":"10"},{"signDay":"11"},{"signDay":"12"},{"signDay":"13"}];
    	//var tmp = {"signDay":$(this).html()};
      //if (typeof(signList) == &#39;undefined&#39;){
        //不做处理
      //}else{
      //  signList.splice(&#39;&#39;,&#39;&#39;,tmp);
      //  console.log(signList);
      //  calUtil.init(signList);
     // }
     //alert($(this).html());
    var tmp = {"signDay":$(this).html()};
    calUtil.init(signList,tmp);
     
      
      
    });
  },
  //获取当前选择的年月
  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();
  },
  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("<p class=&#39;sign_main&#39; id=&#39;sign_layer&#39;>");
   htmls.push("<p class=&#39;sign_succ_calendar_title&#39;>");
   //htmls.push("<p class=&#39;calendar_month_next&#39;>下月</p>");
   //htmls.push("<p class=&#39;calendar_month_prev&#39;>上月</p>");
   htmls.push("<p class=&#39;calendar_month_span&#39;></p>");
   htmls.push("</p>");
   htmls.push("<p class=&#39;sign_equal&#39; id=&#39;sign_cal&#39;>");
   htmls.push("<p class=&#39;sign_row&#39;>");
   htmls.push("<p class=&#39;th_1 bold&#39;>" + myMonth[0][0] + "</p>");
   htmls.push("<p class=&#39;th_2 bold&#39;>" + myMonth[0][1] + "</p>");
   htmls.push("<p class=&#39;th_3 bold&#39;>" + myMonth[0][2] + "</p>");
   htmls.push("<p class=&#39;th_4 bold&#39;>" + myMonth[0][3] + "</p>");
   htmls.push("<p class=&#39;th_5 bold&#39;>" + myMonth[0][4] + "</p>");
   htmls.push("<p class=&#39;th_6 bold&#39;>" + myMonth[0][5] + "</p>");
   htmls.push("<p class=&#39;th_7 bold&#39;>" + myMonth[0][6] + "</p>");
   htmls.push("</p>");
   var d, w;
   for (w = 1; w < 6; w++) {
    htmls.push("<p class=&#39;sign_row&#39;>");
    for (d = 0; d < 7; d++) {

     var ifHasSigned = calUtil.ifHasSigned(signList,myMonth[w][d]);
     console.log("001:"+ifHasSigned);
     if(ifHasSigned && typeof(myMonth[w][d]) != &#39;undefined&#39;){
      htmls.push("<p class=&#39;td_"+d+" on&#39;>" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + "</p>");
     } else {
      htmls.push("<p class=&#39;td_"+d+" calendar_record&#39;>" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + "</p>");
     }
    }
    htmls.push("</p>");
   }
   htmls.push("</p>");
   htmls.push("</p>");
   htmls.push("</p>");
   return htmls.join(&#39;&#39;);
  }
};

登录后复制

sign2.css

.singer_r_img {
	display: block;
	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: &#39;Hiragino Sans GB&#39;,&#39;Microsoft YaHei&#39;,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_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: block;
}

.calendar_month_span {
	display: inline;
	line-height: 40px;
	font-size: 16px;
	color: #656565;
	letter-spacing: 2px;
	font-weight: bold;
}

.sign_equal {
	display:table;
	border-collapse:separate;
	width: 100%;
}

.sign_row {
	display:table-row;
}
.sign_row p {
	display:table-cell;
	width:14.3%;
	border-top: 1px solid #e3e3e3;
	/*border-bottom: 1px solid #e3e3e3;*/
	border-left: 1px solid #e3e3e3;
	height: 40px;
    text-align: center;
    line-height: 40px;
}
.sign_row .bold{
	font-weight: bold;
}
.sign_row p:last-child { 
	border-right: 1px solid #e3e3e3;
}
.sign_equal .sign_row:last-child p{
	border-bottom: 1px solid #e3e3e3;
}
.sign_equal .on {
	background: url(../images/sign_have.gif) no-repeat center;
}

.sign_contener,.sign_contener:visited {
	line-height: 30px;
	background: #00a0e9;
	border: none;
	color: white;
	border-radius: 30px;
	padding: 0 10px;
	font-size: 16px;
}

.sign_contener:hover{
	background-color: red;
}

登录后复制

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7684

Java教程

1639

CakePHP 教程

1393

Laravel 教程

1287

PHP教程

1229

显示更多

Related knowledge

如何防止Excel删除前导零 Feb 29, 2024 am 10:00 AM

自动从Excel工作簿中删除前导零是否令人沮丧？当您在单元格中输入数字时，Excel通常会删除数字前面的前导零。默认情况下，它将缺少显式格式的单元格条目视为数值。前导零在数字格式中通常被认为是无关紧要的，因此被省略。此外，前导零可能会在某些数值运算中造成问题。因此，零被自动删除。本文将教你如何在Excel中保留前导零，以确保输入的帐号、邮政编码、电话号码等数字数据格式正确。在Excel中，如何允许数字前面有零？您可以在Excel工作簿中保留数字的前导零，有多种方法可供选择。您可以通过设置单元格格

jQuery引用方法详解：快速上手指南 Feb 27, 2024 pm 06:45 PM

jQuery引用方法详解：快速上手指南jQuery是一个流行的JavaScript库，被广泛用于网站开发中，它简化了JavaScript编程，并为开发者提供了丰富的功能和特性。本文将详细介绍jQuery的引用方法，并提供具体的代码示例，帮助读者快速上手。引入jQuery首先，我们需要在HTML文件中引入jQuery库。可以通过CDN链接的方式引入，也可以下载

jQuery中如何使用PUT请求方式？ Feb 28, 2024 pm 03:12 PM

jQuery中如何使用PUT请求方式？在jQuery中，发送PUT请求的方法与发送其他类型的请求类似，但需要注意一些细节和参数设置。PUT请求通常用于更新资源，例如更新数据库中的数据或更新服务器上的文件。以下是在jQuery中使用PUT请求方式的具体代码示例。首先，确保引入了jQuery库文件，然后可以通过以下方式发送PUT请求：$.ajax({u

jQuery如何移除元素的height属性？ Feb 28, 2024 am 08:39 AM

jQuery如何移除元素的height属性？在前端开发中，经常会遇到需要操作元素的高度属性的需求。有时候，我们可能需要动态改变元素的高度，而有时候又需要移除元素的高度属性。本文将介绍如何使用jQuery来移除元素的高度属性，并提供具体的代码示例。在使用jQuery操作高度属性之前，我们首先需要了解CSS中的height属性。height属性用于设置元素的高度

jQuery小技巧：快速修改页面所有a标签的文本 Feb 28, 2024 pm 09:06 PM

标题：jQuery小技巧：快速修改页面所有a标签的文本在网页开发中，我们经常需要对页面中的元素进行修改和操作。在使用jQuery时，有时候需要一次性修改页面中所有a标签的文本内容，这样可以节省时间和精力。下面将介绍如何使用jQuery快速修改页面所有a标签的文本，同时给出具体的代码示例。首先，我们需要引入jQuery库文件，确保在页面中引入了以下代码：&lt

使用jQuery修改所有a标签的文本内容 Feb 28, 2024 pm 05:42 PM

标题：使用jQuery修改所有a标签的文本内容jQuery是一款流行的JavaScript库，被广泛用于处理DOM操作。在网页开发中，经常会遇到需要修改页面上链接标签（a标签）的文本内容的需求。本文将介绍如何使用jQuery来实现这个目标，并提供具体的代码示例。首先，我们需要在页面中引入jQuery库。在HTML文件中添加以下代码：

如何判断jQuery元素是否具有特定属性？ Feb 29, 2024 am 09:03 AM

如何判断jQuery元素是否具有特定属性？在使用jQuery操作DOM元素时，经常会遇到需要判断元素是否具有某个特定属性的情况。这种情况下，我们可以借助jQuery提供的方法来轻松实现这一功能。下面将介绍两种常用的方法来判断一个jQuery元素是否具有特定属性，并附上具体的代码示例。方法一：使用attr()方法和typeof操作符//判断元素是否具有特定属

了解jQuery中eq的作用及应用场景 Feb 28, 2024 pm 01:15 PM

jQuery是一种流行的JavaScript库，被广泛用于处理网页中的DOM操作和事件处理。在jQuery中，eq()方法是用来选择指定索引位置的元素的方法，具体使用方法和应用场景如下。在jQuery中，eq()方法选择指定索引位置的元素。索引位置从0开始计数，即第一个元素的索引是0，第二个元素的索引是1，依此类推。eq()方法的语法如下：$("s

See all articles

jQuery实现日历每日签到网页特效

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题