素材网 素材网

jQuery简单响应式回款计划日历表代码

下载资源()次

阅读次数()次

发布时间:2017-08-31

jQuery简单响应式回款计划日历表代码
分享到:

用法简介:

来源:xw素材网


jQuery简单响应式回款计划日历表代码。
文件引用:

<script>

$(function(){

//页面加载初始化年月

var mydate = new Date();

$(".f-year").html( mydate.getFullYear() );

$(".f-month").html( mydate.getMonth()+1 );

showDate(mydate.getFullYear(),mydate.getMonth()+1);


//日历上一月

$(".f-btn-jian ").click(function(){

var mm = parseInt($(".f-month").html());

var yy = parseInt($(".f-year").html());

if( mm == 1){//返回12月

$(".f-year").html(yy-1);

$(".f-month").html(12);

showDate(yy-1,12);

}else{//上一月

$(".f-month").html(mm-1);

showDate(yy,mm-1);

}

})

//日历下一月

$(".f-btn-jia").click(function(){

var mm = parseInt($(".f-month").html());

var yy = parseInt($(".f-year").html());

if( mm == 12){//返回12月

$(".f-year").html(yy+1);

$(".f-month").html(1);

showDate(yy+1,1);

}else{//上一月

$(".f-month").html(mm+1);

showDate(yy,mm+1);

}

})

//返回本月

$(".f-btn-fhby").click(function(){

$(".f-year").html( mydate.getFullYear() );

$(".f-month").html( mydate.getMonth()+1 );

showDate(mydate.getFullYear(),mydate.getMonth()+1);

})


//读取年月写入日历  重点算法!!!!!!!!!!!

function showDate(yyyy,mm){

var dd = new Date(parseInt(yyyy),parseInt(mm), 0);   //Wed Mar 31 00:00:00 UTC+0800 2010  

var daysCount = dd.getDate();            //本月天数  

var mystr ="";//写入代码

var icon = "";//图标代码

var week = new Date(parseInt(yyyy)+"/"+parseInt(mm)+"/"+1).getDay(); //今天周几

var lastMonth; //上一月天数

var nextMounth//下一月天数

if(  parseInt(mm) ==1 ){

lastMonth = new Date(parseInt(yyyy)-1,parseInt(12), 0).getDate();

}else{

lastMonth = new Date(parseInt(yyyy),parseInt(mm)-1, 0).getDate();

}

if( parseInt(mm) ==12 ){

nextMounth = new Date(parseInt(yyyy)+1,parseInt(1), 0).getDate();

}else{

nextMounth = new Date(parseInt(yyyy),parseInt(mm)+1, 0).getDate();

}

for(i=0;i<daysCount;i++){

//计算上月空格数

if( i%7 == 0){

if(i<7){//只执行一次

for(j=0;j<week;j++){

mystr += "<div class='f-td f-null' style='color:#ccc;'>"+(lastMonth+j-5+week)+"</div>";

}

}

}

//这里为一个单元格,添加内容在此

mystr += "<div class='f-td f-number'><span class='f-day'>"+(i+1)+"</span>"

+"<div class='f-yuan'></div>"

+"<div class='f-table-msg'>回款中<span class='major'>1</span>笔。回款本息;<span class='major'>1,000,000</span>元</div>"//这里加判断

+"</div>"; 

}


//计算下月空格数

//         for(k=0; k<42-(daysCount+6-week);k++ ){//表格保持等高6行42个单元格

//            mystr += "<div class='f-td f-null' style='color:#ccc;'>"+(k+1)+"</div>";

//        }

//表格不等高,只补充末行不足单元格

if(7-(daysCount+week)%7 <7){

for(k=0; k<7-(daysCount+week)%7;k++ ){ // week为今天周几 daysCount为本月天数  7-week为本行空格数 7-(daysCount+6-week)%7为最后一行有几个空格

mystr += "<div class='f-td f-null' style='color:#ccc;'>"+(k+1)+"</div>";

}

}



//写入日历

$(".f-rili-table .f-tbody").html(mystr);

//给今日加class

if( mydate.getFullYear() == yyyy){

if( (mydate.getMonth()+1 ) == mm){

var today = mydate.getDate();

$(".f-rili-table .f-td").eq(today-1-week+6).addClass("f-today");

}

}

//绑定选择方法

$(".f-rili-table .f-number").off("click");

$(".f-rili-table .f-number").on("click",function(){

$(".f-rili-table .f-number").removeClass("f-on");

$(this).addClass("f-on");

});


//绑定查看方法

$(".f-yuan").off("mouseover");

$(".f-yuan").on("mouseover",function(){

$(this).parent().find(".f-table-msg").show();

});

$(".f-table-msg").off("mouseover");

$(".f-table-msg").on("mouseover",function(){

$(this).show();

});

$(".f-yuan").off("mouseleave");

$(".f-yuan").on("mouseleave",function(){

$(this).parent().find(".f-table-msg").hide();

});

$(".f-table-msg").off("mouseleave");

$(".f-table-msg").on("mouseleave",function(){

$(this).hide();

});

}


})

</script>


   

相关标签:

网友评论:

评论

发表 剩余字数:20

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

@ 2013 xwcms.net . All Rights Reserved. xw素材网 | 备案号:晋ICP备13005902号 联系管理员
×

邮箱订阅

什么是邮箱订阅?

邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。