效果图：
图片.png
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style>
.operPic{
content:"a";
font-size:16px;
display: block;
color:#f3f;
height: 0;
width: 100px;
line-height:30px;
padding-left:5px;
border-width: 0px 30px 30px 0px;
border-style: none solid solid;
border-color: transparent transparent #34A853;
}
.heartLeft{
width: 0;
height: 0;
border-color: red green;
border-style: dotted;
border-width: 40px 40px 40px 40px;
}
.timeline{
width: 1600px;
height: 0;
border-color: transparent blue red yellow;
border-style: solid;
border-width: 6px 0px 8px 0px;
float:left;
}
.timegrid{
width: 40px;
height: 10px;
padding-top:10px;
float:left;
}
.timegridY{
width: 85px;
height: 10px;
padding-top:10px;
float:left;
font-size:25px;
}
#start{
width: 65px;
height: 10px;
padding-top:10px;
float:left;
font-size:25px;
}
#next{
width: 65px;
height: 10px;
padding-top:10px;
float:left;
font-size:25px;
}
#triangle-right {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-left: 20px solid red;
border-bottom: 10px solid transparent;
float:left;
}
</style>
<script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js" ></script>
</head>
<body>
<div class="operPic">34能源管理5</div>
<br/>
<div class="heartLeft">445</div><br/>
<div class="timeline" id="timeline">
</div>
<div id="triangle-right"></div>
<br/>
<p id="demo">
</p>
<script>
function formatMonth(d) {
var m = d.getMonth()+1;
if (m >= 1 && m <= 9) {
m = "0" + m;
}
return m;
}
$(document).ready(function(){
//alert("ok");
//genrate first 3 years month list
var d = new Date();
d.setDate(1);
d.setMonth(d.getMonth()-24);
m = formatMonth(d);
var html ='<div id="start" title="'+d.getFullYear()+'-'+d.getMonth()+'"> <</div>';
for (var i=1;i<24;i++) {
d.setMonth(d.getMonth() + 1 );
month = formatMonth(d)
if (month =='01') {
html = html+'<div class="timegridY" id="'+d.getFullYear()+month+'">'+d.getFullYear()+'-'+month +'</div>'
} else {
html = html+'<div class="timegrid" id="'+d.getFullYear()+month+'">'+month+'月</div>'
}
}
//alert(html);
$('#timeline').html(html);
//$(".timegrid").on("click",
$("#timeline").on( "click",".timegrid",
function(){
var time = $(this).attr("id");
alert("timegrid!"+time);
});
$("#timeline").on("click",".timegridY",
function(){
var time = $(this).attr("id");
alert("timegrid!"+time);
});
//$('#start').on("click",
$('#timeline').on("click","#start",
function(){
//get data in current div
var date = $(this).attr('title');
//alert(date);
d.setFullYear(parseInt(date.split('-')[0]));
d.setMonth(parseInt(date.split('-')[1]));
d.setMonth(d.getMonth()-12);
m = formatMonth(d); //alert(m)
var html ='<div id="start" title="'+d.getFullYear()+'-'+d.getMonth()+'"> <</div>';
for (var i=1;i<24;i++) {
d.setMonth(d.getMonth() + 1 );
month = formatMonth(d);
if (month =='01') {
html = html+'<div class="timegridY" id="'+d.getFullYear()+month+'">'+d.getFullYear()+'-'+month +'</div>' ;
} else {
html = html+'<div class="timegrid" id="'+d.getFullYear()+month+'">'+month+'月</div>' ;
}
}
//最后月份小于等于今年1月份的时候，展示时间前进按钮
var today = new Date();
if(d.getFullYear()< today.getFullYear() || (d.getFullYear()==today.getFullYear() && d.getMonth() == 0) ) {
html = html+'<div id="next" title="'+d.getFullYear()+'-'+formatMonth(d)+'"> ></div>';
}
//alert(html)
$('#timeline').html(html);
});
$('#timeline').on("click","#next",
function(){
//get data in current div
var date = $(this).attr('title');
//alert(date);
d.setFullYear(parseInt(date.split('-')[0]));
d.setMonth(parseInt(date.split('-')[1]));
d.setMonth(d.getMonth()-12);
m = formatMonth(d); //alert(m)
var html ='<div id="start" title="'+d.getFullYear()+'-'+d.getMonth()+'"> <</div>';
for (var i=1;i<24;i++) {
d.setMonth(d.getMonth() + 1 );
month = formatMonth(d);
if (month =='01') {
html = html+'<div class="timegridY" id="'+d.getFullYear()+month+'">'+d.getFullYear()+'-'+month +'</div>' ;
} else {
html = html+'<div class="timegrid" id="'+d.getFullYear()+month+'">'+month+'月</div>' ;
}
}
//最后月份小于等于今年1月份的时候，展示时间前进按钮
var today = new Date();
if(d.getFullYear()< today.getFullYear() || (d.getFullYear()==today.getFullYear() && d.getMonth() == 0) ) {
html = html+'<div id="next" title="'+d.getFullYear()+'-'+formatMonth(d)+'"> ></div>';
}
//alert(html)
$('#timeline').html(html);
});
});
</script>
</body>
</html>
