div实现类时间轴

var monthList = ["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"];
    var monthWrapper = $("<div></div>");
    var yearWrapper = $("<div></div>");
    var periodWrapper = $("<div></div>");
    var budgetWrapper = $("<div></div>");
    for (i = 0; i < 12; i++) {
        var aa = i - num + 12;
        while(aa<0){
            aa +=12;
        };
        var monthIndex = aa %12;
        var spanMonth = $("<span style='width:72px; height:5px;'></span>");
        spanMonth.css("display","inline-block");
        spanMonth.css("font-size","14px");
        spanMonth.css("text-align","center");
        spanMonth.css("font-weight","600");
        spanMonth.css("font-family","hibu_co_textregular");
        spanMonth.html(monthList[monthIndex]);
        monthWrapper.append(spanMonth);

        var spanYear = $("<span style='width:72px; height:5px;'></span>");
        spanYear.css("display","inline-block");
        spanYear.css("font-family","Arial,sans-serif");
        spanYear.css("font-size","10px");
        spanYear.css("text-align","center");
        spanYear.css("color","#d6cfce");
        if(i < num%12){
            spanYear.html(2014 - Math.floor(num/12));
        }else{
            spanYear.html(2015 - Math.floor(num/12));
        }
        yearWrapper.append(spanYear);

        var spanPeriod = $("<span style='width:71px; height:3px;'></span>");
        spanPeriod.css("display","inline-block");
        spanPeriod.css("margin-left","1px");

        var spanBudget = $("<span style='width:72px; height:3px;'></span>");
        spanBudget.css("display","inline-block");
        spanBudget.css("font-family","Arial,sans-serif");
        spanBudget.css("font-size","14px");
        spanBudget.css("text-align","center");

        if(i>3 && i<8){
            spanPeriod.css("background","#c60c5a");
            spanBudget.css("color","#c60c5a");
            spanBudget.html("$320");
        }else{
            spanPeriod.css("background","#4286de");
            spanBudget.css("color","#4286de");
            spanBudget.html("$120");
        }
        periodWrapper.css("margin-top","-11px");
        periodWrapper.append(spanPeriod);
        budgetWrapper.append(spanBudget);
    }
    $("#fusionHistoryArea").append(monthWrapper);
    $("#fusionHistoryArea").append(yearWrapper);

    var gridWrapper = $("<div></div>");
    for (i = 0; i < 24; i++) {
        var spanGrid = $("<span style='width:35px; height:5px;'></span>");
        spanGrid.css("display","inline-block");
        spanGrid.css("border","solid #d6cfce");
        if(i == 0){
            spanGrid.css("border-width","0 1px 1px 1px");
        }else{
            spanGrid.css("border-width","0 1px 1px 0");
        }
        gridWrapper.append(spanGrid);
    }
    $("#fusionHistoryArea").append(gridWrapper);
    $("#fusionHistoryArea").append(periodWrapper);
    $("#fusionHistoryArea").append(budgetWrapper);