自己实现的一个时间轴

效果图：

图片.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()+'"> &lt;</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()+'"> &lt;</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)+'"> &gt;</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()+'"> &lt;</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)+'"> &gt;</div>';
        }
        //alert(html)
        $('#timeline').html(html);
    });
    
});
</script>
</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容