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

chenyajun  2020-01-29 15:17:44  阅读 2680 次 评论 0 条
<!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>jQuery简洁的日历签到插件</title>
<script type="text/javascript">

$(function(){

  //ajax获取日历json数据

  var signList=[{"signDay":"09"},{"signDay":"11"},{"signDay":"12"},{"signDay":"13"}];

   calUtil.init(signList);

});

</script>
<script type="text/javascript">
var calUtil = {

  //当前日历显示的年份

  showYear:2015,

  //当前日历显示的月份

  showMonth:1,

  //当前日历显示的天数

  showDays:1,

  eventName:"load",

  //初始化日历

  init:function(signList,s=''){

    calUtil.setMonthAndDay();

    if (typeof(s) == 'undefined'){

    }else{

      signList.splice('','',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('<button class="sign_contener" type="button"><i class="fa fa-calendar-check-o" aria-hidden="true"></i> 已达标,获取1次抽奖</button>');

    }

    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) == 'undefined'){

        //不做处理

      //}else{

      //  signList.splice('','',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='sign_main' id='sign_layer'>");

   htmls.push("<p class='sign_succ_calendar_title'>");

   //htmls.push("<p class='calendar_month_next'>下月</p>");

   //htmls.push("<p class='calendar_month_prev'>上月</p>");

   htmls.push("<p class='calendar_month_span'></p>");

   htmls.push("</p>");

   htmls.push("<p class='sign_equal' id='sign_cal'>");

   htmls.push("<p class='sign_row'>");

   htmls.push("<p class='th_1 bold'>" + myMonth[0][0] + "</p>");

   htmls.push("<p class='th_2 bold'>" + myMonth[0][1] + "</p>");

   htmls.push("<p class='th_3 bold'>" + myMonth[0][2] + "</p>");

   htmls.push("<p class='th_4 bold'>" + myMonth[0][3] + "</p>");

   htmls.push("<p class='th_5 bold'>" + myMonth[0][4] + "</p>");

   htmls.push("<p class='th_6 bold'>" + myMonth[0][5] + "</p>");

   htmls.push("<p class='th_7 bold'>" + myMonth[0][6] + "</p>");

   htmls.push("</p>");

   var d, w;

   for (w = 1; w < 6; w++) {

    htmls.push("<p class='sign_row'>");

    for (d = 0; d < 7; d++) {

 

     var ifHasSigned = calUtil.ifHasSigned(signList,myMonth[w][d]);

     console.log("001:"+ifHasSigned);

     if(ifHasSigned && typeof(myMonth[w][d]) != 'undefined'){

      htmls.push("<p class='td_"+d+" on'>" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + "</p>");

     } else {

      htmls.push("<p class='td_"+d+" calendar_record'>" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + "</p>");

     }

    }

    htmls.push("</p>");

   }

   htmls.push("</p>");

   htmls.push("</p>");

   htmls.push("</p>");

   return htmls.join('');

  }

};
</script>

<style type="text/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: '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_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;

}
</style>
</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>


本文地址:https://www.chenyajun.net/index.php/post/21.html
版权声明:本文为原创文章,版权归 chenyajun 所有,欢迎分享本文,转载请保留出处!

评论已关闭!