<!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 content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!-- 账户主要表格 -->
<div class="account-box">
<h2 class="account-title">
<span class="left c3">回款计划</span>
<a href="###" class="f-btn-fhby right">返回本月</a>
<div class="clearfix right">
<div class="f-btn-jian left"><</div><div class="left f-riqi"><span class="f-year">2017</span>年<span class="f-month">1</span>月</div><div class="f-btn-jia left">></div><!-- 一定不能换行-->
</div>
</h2>
<div class="f-rili-table">
<div class="f-rili-head celarfix">
<div class="f-rili-th">周日</div>
<div class="f-rili-th">周一</div>
<div class="f-rili-th">周二</div>
<div class="f-rili-th">周三</div>
<div class="f-rili-th">周四</div>
<div class="f-rili-th">周五</div>
<div class="f-rili-th">周六</div>
<div class="clear"></div>
</div>
<div class="f-tbody clearfix">
</div>
</div>
</div>
<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>
</body>
</html>