zoukankan      html  css  js  c++  java
  • jQuery,月历,左右点击事件实现月份的改变

    html页面:

    <div class="recordbriefing-title-top-body">
    <span class="record-left"></span>
    <p class="record-Ptime"></p>
    <span class="record-right"></span>
    </div>

    css样式:

    .record-left{
    content: "";
    0;
    height: 0;
    float: left;
    border-top: 10px solid transparent;
    border-right: 10px solid red;
    border-bottom: 10px solid transparent;
    margin-top:5px;
    }
    .record-right{
    content: "";
    0;
    height: 0;
    float: right;
    border-top: 10px solid transparent;
    border-left: 10px solid red;
    border-bottom: 10px solid transparent;
    margin-top:5px;
    margin-right: 25px;
    }
    .record-Ptime{
    display:inline-block;
    80%;
    font-size: 16px;
    color: #000;
    text-align: center;
    line-height: 31px;
    }

    js部分:

    $(function() {
    var rsValue='';
    var todayData=new Date();
    var year= todayData.getFullYear();
    var month= todayData.getMonth();//月份从0开始
    // console.log(typeof month);
    var day=new Array(31,28,31,30,31,30,31,31,30,31,30,31);
    var todayDay;

    for(var i=0;i<day.length;i++){
    if(i==month){
    todayDay=day[i];
    }
    if((year%4)==0){
    if((month+1)==2){
    todayDay=29;
    }
    }
    }

    if(month>9){
    rsValue=year+'.'+(month+1)+'.01~'+year+'.'+(month+1)+'.'+todayDay;
    }else{
    rsValue=year+'.0'+(month+1)+'.01~'+year+'.0'+(month+1)+'.'+todayDay;
    }
    // console.log(rsValue);
    // 得到的拼接时间显示在页面上
    $(".record-Ptime").empty();
    $('.record-Ptime').append(rsValue);
    changeTime();

    // 上个月 左边改变时间事件
    var j=1;
    $(".record-left").on("click", function(){
    j--;

    // 判断月份是否>0,是13时就年份加1
    if((month+j)<=0){
    year-=1;
    month=11;
    j=1;
    }
    for(var i=0;i<day.length;i++){
    if(i==(month+j-1)){
    todayDay=day[i];
    }
    if((year%4)==0){
    if((month+j)==2){
    todayDay=29;
    }
    }
    }
    if((month+j)>9){
    rsValue=year+'.'+(month+j)+'.01~'+year+'.'+(month+j)+'.'+todayDay;
    }else{
    rsValue=year+'.0'+(month+j)+'.01~'+year+'.0'+(month+j)+'.'+todayDay;
    }
    // 得到的拼接时间显示在页面上
    $(".record-Ptime").empty();
    $('.record-Ptime').append(rsValue);
    changeTime();

    });


    // 下个月 右边改变时间事件
    $(".record-right").on("click", function(){
    j++;

    // 判断月份是否>12,是13时就年份加1
    if((month+j)>12){
    year+=1;
    month=0;
    j=1;
    }
    for(var i=0;i<day.length;i++){
    if(i==(month+j-1)){
    todayDay=day[i];
    }
    if((year%4)==0){
    if((month+j)==2){
    todayDay=29;
    }
    }
    }
    if((month+j)>9){
    rsValue=year+'.'+(month+j)+'.01~'+year+'.'+(month+j)+'.'+todayDay;
    }else{
    rsValue=year+'.0'+(month+j)+'.01~'+year+'.0'+(month+j)+'.'+todayDay;
    }
    // 得到的拼接时间显示在页面上
    $(".record-Ptime").empty();
    $('.record-Ptime').append(rsValue);
    changeTime();
    });

    });

  • 相关阅读:
    通联支付相关注意事项
    账号配置vue版本的扫码下单以及对店铺进行装修的步骤
    银盒子扫码下单在线订单开启商品售卖时段使用说明
    ERP承接新后台优惠规则问题
    简易付安装后无法使用
    ASP.NET没有魔法——ASP.NET Identity 的“多重”身份验证代码篇
    ASP.NET没有魔法——ASP.NET Identity 的“多重”身份验证
    ASP.NET没有魔法——ASP.NET MVC 过滤器(Filter)
    ASP.NET没有魔法——ASP.NET Identity与授权
    ASP.NET没有魔法——ASP.NET Identity的加密与解密
  • 原文地址:https://www.cnblogs.com/xzzzys/p/7428134.html
Copyright © 2011-2022 走看看