有图有真相
几个月前写的,参考某位博主写的样式,现在不记得那位博主,隔了一段时间后再看,又花了个把小时,才明白
它的原理,如下:
显示通用的上年,上月,下年,下月四个按钮,--h4,a等标签
当然还有星期等情况也是固定不变的--一个ul li标签
同时点击这四个按钮,下面的天,跟着变化--一个ul li标签
难点是关于闰年,以及每个月天数不一致,
处理:var oDate = new Date(); //定义时间
oDate.setMonth(oDate.getMonth() + n);//设置月份
var year = oDate.getFullYear(); //年
var month = oDate.getMonth(); //月
var today = oDate.getDate(); //日
//计算本月有多少天
var allDay = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
//判断闰年
if (month == 1) {
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
allDay = 29;
}
}
具体‘第几天’天名称,就是要显示出来的内容
代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ETLRecord.aspx.cs" Inherits="jj360.Web.FundAnalysis.ETLRecord" %>
<%@ Register Assembly="WebControls" Namespace="Hcl.WebControls" TagPrefix="cc1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title></title>
<link href="/EasyUI-1.5/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="/EasyUI-1.5/themes/icon.css" rel="stylesheet" type="text/css" />
<link href="/EasyUI-1.5/demo.css" rel="stylesheet" type="text/css" />
<script src="/EasyUI-1.5/jquery.min.js" type="text/javascript"></script>
<script src="/EasyUI-1.5/jquery.easyui.min.js" type="text/javascript"></script>
<script src="/My97DatePicker/WdatePicker.js"></script>
<link href="/css/dialog.css" rel="stylesheet" />
<script src="/script/global.js" type="text/javascript"></script>
<script src="/script/echarts.min.js" type="text/javascript"></script>
<link href="/css/mycss.css" rel="stylesheet" type="text/css" />
<style>
html, body, div, ul, li, p {
padding: 0;
margin: 0;
}
html {
font-size: 12px;
}
body {
padding: 10px;
}
ul, li {
list-style: none;
}
.toolbar {
border: 1px solid #45b0e6;
float: left;
width: 100%;
}
.box {
padding: 5px 0;
/*border-bottom: 1px dotted #DDD;*/
}
.title {
width: 90px;
float: left;
/*padding: 5px 0;*/
font-weight: bold;
font-size: 14px;
color: #333;
margin-left: 15px;
}
.category li {
float: left;
margin-left: 10px;
}
.category li label {
cursor: pointer;
}
.category li label input {
vertical-align: text-bottom;
}
.list {
border: 1px solid #45b0e6;
float: left;
width: 100%;
padding-left:5px;
/*margin-top: 15px;*/
}
input[type=radio]:checked + span {
color: #4372ba;
font-weight: bold;
}
.level1 {
background-color: red;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.level2 {
background-color: green;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.level3 {
color: #d20000 !important;
}
.level4 {
color: #006000 !important;
}
</style>
<style>
* {
margin: 0;
padding: 0;
}
.calendar {
width: 210px;
/*margin: 100px auto;*/
overflow: hidden;
border: 1px solid #95B8E7;
padding: 20px;
position: relative;
display:inline-block;
height:263px;
margin:5px 5px -2px 0px;
border-radius:4px;
}
.calendar h4 {
text-align: center;
margin-bottom: 10px;
}
.calendar .a1 {
position: absolute;
top: 46px;
left: 50px;
}
.calendar .a2 {
position: absolute;
top: 46px;
right: 50px;
}
.calendar .a11 {
position: absolute;
top: 20px;
top:46px;
left: 20px;
}
.calendar .a22 {
position: absolute;
top:46px;
right: 20px;
}
.calendar .week {
height: 30px;
line-height: 20px;
border-bottom: 1px solid #95B8E7;
margin-bottom: 10px;
}
.calendar .week li {
float: left;
width: 30px;
height: 30px;
text-align: center;
list-style: none;
}
.calendar .dateList {
overflow: hidden;
clear: both;
}
.calendar .dateList li {
float: left;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
list-style: none;
}
.calendar .dateList .ccc {
color: #ccc;
}
.calendar .dateList .red {
/*background: #F90;*/
/*background:#0269AE;*/
background:#ffe48d;
/*color: #fff;*/
}
.calendar .dateList .sun {
color: #f00;
/*color:#ffe48d;
color:#0269AE;*/
}
.calendar .dateList .blue {
background:#E0ECFF;
/*background:#ffe48d;*/
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="tool" class="toolbar">
<div class="box">
<div class="title">数据来源:</div>
<ul class="category" style="padding: 2px;">
<li>
<label>
<input type="radio" name="dateRank" value="" checked="checked" /><span>全部</span></label></li>
<li>
<label>
<input type="radio" name="dateRank" value="GD" /><span>GD</span></label></li>
<li>
<label>
<input type="radio" name="dateRank" value="IPDP" /><span>IPDP</span></label></li>
<li>
<label>
<input type="radio" name="dateRank" value="IBAS" /><span>IBAS</span></label></li>
<li>
<label>
<input type="radio" name="dateRank" value="XPAD" /><span>XPAD</span></label></li>
<li>
<label>
<input type="radio" name="dateRank" value="XPADG" /><span>XPADG</span></label></li>
<li>
<label>
<input type="radio" name="dateRank" value="ROCRM" /><span>ROCRM</span></label></li>
</ul>
<div style="clear: both;"></div>
</div>
</div>
<div class="list" id="list-calendar">
<%--<div class="calendar">
<h4>2013年10月</h4>
<a href="##" class="a1">上月</a>
<a href="##" class="a11">上年</a>
<a href="##" class="a22">下年</a>
<a href="##" class="a2">下月</a>
<ul class="week">
<li>日</li>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
</ul>
<ul class="dateList"></ul>
</div>--%>
<div class="calendar">
<h4>GD_GOODS</h4>
<h4>2013年10月</h4>
<a href="##" class="a1">上月</a>
<a href="##" class="a11">上年</a>
<a href="##" class="a22">下年</a>
<a href="##" class="a2">下月</a>
<ul class="week">
<li>日</li>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
</ul>
<ul class="dateList"></ul>
</div>
</div>
</form>
<script>
var tempData = {};
$(function () {
$.getJSON('/Service/EasyUiService.ashx?Method=GetCategories', function (data) {
var html = '';
for (var i = 0, len = data.length; i < len; i++) {
html += '<li><label><input type="radio" name="category" value="' + data[i].jjtype + '" /><span>' + data[i].jjtype + '</span></label></li>';
}
$("#category").append(html);
});
loadData();
$("#tool").on('change', 'input:radio', function () {
loadDataTable(tempData);
return;
var flag = null;
if ($("input[name=dateRank]:checked").val() == "2=2") {
//$("#BrainTextBox18").css("opacity", 1);
//$("#BrainTextBox19").css("opacity", 1);
//console.log();
flag = $("#fsrqDate").dialog({
title: "请选择",
left: 720,
top: 67,
//closed: false,
//modal: true
});
//$("#fsrqDate").css("opacity", 1);
}
else {
if (flag != null) {
$("#fsrqDate").dialog('close');
//$("#fsrqDate").css("opacity", 0);
}
}
});
});
function tanchu(obj) {
var dr = $('input[name=dateRank]:checked').val();
top.tanchu("dialog", "基金详情", "/Web/FundAnalysis/ztjj_dialog.aspx?Method=List_ztjj_dialog&ztguid=" + ztguid + "&ct=" + ct + "&dr=" + dr + "&fr=" + fr + "&startDay=" + startDay + "&endDay=" + endDay, 850, 530, null);
}
function loadData(startDay, endDay) {
var dr = $('input[name=dateRank]:checked').val();
$.ajax({
type: "POST",
url: "/Service/Main.ashx?Method=listETCrecord",
dataType: "json",
data: { dr: dr },
beforeSend: function () {
top.$.messager.progress({
title: '提示',
msg: '数据计算中,请稍候……',
text: ''
});
},
complete: function () {
top.$.messager.progress('close');
},
success: function (data) {
tempData = data;
loadDataTable(data);
//--------------------给每一个li加上点击事件弹窗,拼接在上面太麻烦
//$("#items li").each(function () {
// top.tanchu("dialog", "基金详情", "/Web/FundAnalysis/jb_jccg_dialog.aspx?Method=List_jb_jccg_dialog&gpdm=" + row.cydgp + "&fsrq=" + txt + "", 850, 580, null);
//});
},
error: function (data) {
alert("计算失败!");
}
});
}
function loadDataTable(data) {
var dr = $('input[name=dateRank]:checked').val();
$("#list-calendar").empty();
//console.log(data);
//return;
var html = '';
var tm = '';
var ex = '';
for (var i = 0, len = data.TableNames.length; i < len; i++) {
var tm = data.TableNames[i].TableName
ex = tm.substr(0, tm.indexOf("_"));
if (dr == "") {
ex = dr;
}
//console.log(ex);
if (ex == dr) {
html += '<div class="calendar">';
html += ' <h4>' + data.TableNames[i].TableName + '</h4>';
html += '<h4>2013年10月</h4>';
html += '<a href="##" class="a1">上月</a>';
html += '<a href="##" class="a11">上年</a>';
html += '<a href="##" class="a22">下年</a>';
html += '<a href="##" class="a2">下月</a>';
html += '<ul class="week">';
html += '<li>日</li>';
html += '<li>一</li>';
html += '<li>二</li>';
html += '<li>三</li>';
html += '<li>四</li>';
html += '<li>五</li>';
html += '<li>六</li>';
html += '</ul>';
html += '<ul class="dateList" tablename="' + data.TableNames[i].TableName + '"></ul>';
html += '</div>';
}
}
$("#list-calendar").append(html);
//不是执行一个,而是获取所有进行执行,
$('.dateList').each(function (i, elm) {
run(0, $(this), data.Historys);
});
var iNow = 0;
$(".a1").click(function () {
var parent = $(this).parent('.calendar');
iNow--;
run(iNow, parent.find(".dateList"), data.Historys);
});
$(".a2").click(function () {
var parent = $(this).parent('.calendar');
iNow++;
run(iNow, parent.find(".dateList"), data.Historys);
})
$(".a11").click(function () {
var parent = $(this).parent('.calendar');
iNow -= 12;
run(iNow, parent.find(".dateList"), data.Historys);
});
$(".a22").click(function () {
var parent = $(this).parent('.calendar');
iNow += 12;
run(iNow, parent.find(".dateList"), data.Historys);
})
}
//必要的数据
//今天的年 月 日 ;本月的总天数;本月第一天是周几???
function run(n, datelist,data) {
var oDate = new Date(); //定义时间
oDate.setMonth(oDate.getMonth() + n);//设置月份
var year = oDate.getFullYear(); //年
var month = oDate.getMonth(); //月
var today = oDate.getDate(); //日
//计算本月有多少天
var allDay = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
//判断闰年
if (month == 1) {
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
allDay = 29;
}
}
//判断本月第一天是星期几
oDate.setDate(1); //时间调整到本月第一天
var week = oDate.getDay(); //读取本月第一天是星期几
datelist.empty();//每次清空
//插入空白
for (var i = 0; i < week; i++) {
datelist.append("<li></li>");
}
//日期插入到dateList
var res = null;
var tablename = datelist.attr('tablename');
//console.log(tablename);
//这里月份从0开始!!!!!!!!!!!!!!!!!!!
var month_ = (month+1<10 ? '0' + (month+1) : month+1);
//today = (today.length == 1 ? '0' + today : today);
for (var i = 1; i <= allDay; i++) {
for (var j = 0; j < data.length; j++) {
if (data[j].UpdateDate.substr(0, 10) == year + "-" + month_ + "-" + (i<10 ? '0' + i : i) && data[j].TableName == tablename) {
res = data[j];
break;
}
}
//console.log(res);
if (res != null) {
//导入时间:2019-05-12 18:12:22,数据200条
datelist.append("<li class='blue' value='" + (i < 10 ? '0' + i : i) + "' title='导入时间:" + res.AddTime.substr(0,19).replace('T',' ') + ",数据" + res.counts + "条' >" + (i < 10 ? '0' + i : i) + "√</li>");
}
else {
datelist.append("<li value='" + (i < 10 ? '0' + i : i) + "'>" + (i < 10 ? '0' + i : i) + "</li>");
}
res = null;
}
//标记颜色=====================
datelist.find("li").each(function (i, elm) {
var val = $(this).attr("value");
if (n == 0) {
if (val < today) {
//$(this).addClass('ccc')
if (i % 7 == 0 || i % 7 == 6) {
$(this).addClass('sun')
}
} else if (val == today) {
$(this).addClass('red')
} else if (i % 7 == 0 || i % 7 == 6) {
$(this).addClass('sun')
}
} else if (n < 0) {
//$(this).addClass('ccc')
if (i % 7 == 0 || i % 7 == 6) {
$(this).addClass('sun')
}
} else if (i % 7 == 0 || i % 7 == 6) {
$(this).addClass('sun')
}
});
//定义标题日期
datelist.siblings('h4').eq(1).text(year + "年" + (month + 1) + "月");
//为避免各个日历控件,发生干扰,传入当前this
$(".dateList li").click(function () {
$(this).siblings().removeClass("red");
$(this).addClass('red');
})
};
</script>
</body>
</html>