jquery移动端实现阶段日历（非整年整月，只一个周期）

来源：互联网发布：申报华文数据库编辑：程序博客网时间：2024/05/22 02:15

jquery移动端实现阶段日历（非整年整月，只一个周期）

如有更好的解决方案，欢迎留言讨论切磋~

不知道能不能看懂标题。。。实在不知该怎么用标题描述。。。本文实现的是20天的移动端日历，能选择，带左右翻页，主要用于一个周期内选择时间，不需要展示整年整月以及农历，节假日。

下边上图以便更好理解本文内容。

HTML

div布一个表格，10天为一个展示，并列两个，可左右切换，可选择
css代码有需要的可以留言这里就不上css了

<div class="swiper-container">    <div class="swiper-wrapper">        <div class="swiper-slide">            <div class="time clearfix">                <div class="time_td "><span>周五</span>                    <p>09-02</p>                </div>                <div class="time_td"><span>周六</span>                    <p>09-03</p>                </div>                <div class="time_td"><span>周日</span>                    <p>09-04</p>                </div>                <div class="time_td choice_no"><span>周一</span>                    <p>09-05</p>                </div>                <div class="time_td"><span>周二</span>                    <p>09-06</p>                </div>                <div class="time_td"><span>周三</span>                    <p>09-07</p>                </div>                <div class="time_td"><span>周四</span>                    <p>09-08</p>                </div>                <div class="time_td"><span>周五</span>                    <p>09-09</p>                </div>                <div class="time_td"><span>周六</span>                    <p>09-10</p>                </div>                <div class="time_td"><span>周日</span>                    <p>09-11</p>                </div>            </div>        </div>        <div class="swiper-slide">            <div class="time clearfix">                <div class="time_td"><span>周一</span>                    <p>09-12</p>                </div>                <div class="time_td"><span>周六</span>                    <p>09-13</p>                </div>                <div class="time_td"><span>周日</span>                    <p>09-14</p>                </div>                <div class="time_td"><span>周一</span>                    <p>09-15</p>                </div>                <div class="time_td"><span>周二</span>                    <p>09-16</p>                </div>                <div class="time_td"><span>周三</span>                    <p>09-17</p>                </div>                <div class="time_td"><span>周四</span>                    <p>09-18</p>                </div>                <div class="time_td"><span>周五</span>                    <p>09-19</p>                </div>                <div class="time_td"><span>周六</span>                    <p>09-20</p>                </div>                <div class="time_td"><span>周日</span>                    <p>09-21</p>                </div>            </div>        </div>    </div></div>

js

哪个都是干嘛的注释上都有，这里就不写了

/********************时间页面切换********************///==================右$("#yuejia").click(function() {    $(this).addClass("opacity");    $("#yuejian").removeClass("opacity");    $(".swiper-slide:first").animate({        left: "-100%"    });    $(".swiper-slide:last").animate({        right: "99%"    })});//==================左$("#yuejian").click(function() {    $(this).addClass("opacity");    $("#yuejia").removeClass("opacity");    $(".swiper-slide:first").animate({        left: "0%"    });    $(".swiper-slide:last").animate({        right: "0%"    })});/********************时间选择********************/$(".time_td").click(function() {    if($(this).hasClass("choice_no")) {        $(this).removeClass("choice_yes");    } else {        $(this).addClass("choice_yes").siblings().removeClass("choice_yes");        $(this).addClass("choice_yes").parents().siblings().find(".time_td").removeClass("choice_yes");    }});/********************弹框选择********************/$(".choice_time li .choice").click(function() {    $(this).addClass("choice_yes").siblings().removeClass("choice_yes");});$(".im_tab p").click(function() {    $(this).addClass("active").siblings().removeClass("active");    $(".date").eq($(this).index()).show().siblings(".date").hide();    $(".tab").eq($(this).index()).addClass("active").siblings().removeClass("active");});/********************日期********************//********************************************/var day = new Date()var weekday = new Array(7)weekday = ["周日", "周一", "周二", "周三", "周四", "周五", "周六", ]var week = day.getDay(); //获取当前星期var year = day.getFullYear(); //年var mon = day.getMonth() + 1; //获取当前月份var days = day.getDate(); //获取当前日数var leap_year = year % 4 //判断是否为闰年var time_s = $(".time_td span");var l_today = $("#l_today");var time_p = $(".time_td p");/********************日历周几赋值********************/for(var i = 0; i < 20; i++) { //20天一循环    var week2 = 0;    week2 = (week + i) % 7;// 求余    time_s.eq(i).html(weekday[week2]);}/********************日历日期表赋值********************/for(var j = 0; j < 20; j++) {    days_f = parseFloat(days) + j;    if(mon == 2 && leap_year == 0) { //闰年闰月        //alert("润二月")        if(days_f > 29) {            days_f = parseFloat(days_f) - 29;            mon2 = parseFloat(mon) + 1;            time_p.eq(j).html(mon2 + "-" + days_f);        } else {            time_p.eq(j).html(mon + "-" + days_f);        }    } else if(mon == 2 && leap_year != 0) {        //alert("平二月")        if(days_f > 28) {            days_f = parseFloat(days_f) - 28;            mon2 = parseFloat(mon) + 1;            time_p.eq(j).html(mon2 + "-" + days_f);        } else {            time_p.eq(j).html(mon + "-" + days_f);        }    } else if(mon == 4 || mon == 6 || mon == 9 || mon == 11) {        //alert("30天")        if(days_f > 30) {            days_f = parseFloat(days_f) - 30;            mon2 = parseFloat(mon) + 1;            time_p.eq(j).html(mon2 + "-" + days_f);        } else {            time_p.eq(j).html(mon + "-" + days_f);        }    } else {        //alert("正常")        if(days_f > 31) {            days_f = parseFloat(days_f) - 31;            mon2 = parseFloat(mon) + 1;            time_p.eq(j).html(mon2 + "-" + days_f);        } else {            time_p.eq(j).html(mon + "-" + days_f);        }    }}/********************标题日期********************/$("#today").html(mon + "-" + days);if(mon == 4 || mon == 6 || mon == 9 || mon == 11) { //判断当月天数为30天    if(days <= 11) {        days = parseFloat(days) + 19;        l_today.html(mon + "-" + days);    } else {        days = parseFloat(days) + 19 - 30;        if(mon == 12) {            mon = 1            l_today.html(mon + "-" + days);        } else {            mon = parseFloat(mon) + 1;            l_today.html(mon + "-" + days);        }    }} else if(mon == 2) { //判断二月份是否闰年    if(leap_year == 0) {        if(days <= 10) {            days = parseFloat(days) + 19;            l_today.html(mon + "-" + days);        } else {            days = parseFloat(days) + 19 - 29;            mon = parseFloat(mon) + 1;            l_today.html(mon + "-" + days);        }    } else {        if(days <= 9) {            days = parseFloat(days) + 19;            l_today.html(mon + "-" + days);        } else {            days = parseFloat(days) + 19 - 28;            mon = parseFloat(mon) + 1;            l_today.html(mon + "-" + days);        }    }} else { //31天的月份    if(days <= 12) {        days = parseFloat(days) + 19;        l_today.html(mon + "-" + days);    } else {        days = parseFloat(days) + 19 - 31;        if(mon == 12) {            mon = 1            l_today.html(mon + "-" + days);        } else {            mon = parseFloat(mon) + 1;            l_today.html(mon + "-" + days);        }    }}

0 0