timeLine.js

// 由于我是将它应用于我的博客 https://nowtime.cc/time-line.html 的
// 所以数据格式都是按照我的意愿设置的，无法满足大众口味
// 如有需要，请自己酌情修改

var data = [{"title":"ffmpeg \u4f7f\u7528\u65b9\u6cd5\u5408\u96c6","link":"https:\/\/nowtime.cc\/software\/834.html","time":"1578718860"},{"title":"CSS3 \u52a8\u753b\u5361\u987f\u6027\u80fd\u4f18\u5316\u89e3\u51b3\u65b9\u6848","link":"https:\/\/nowtime.cc\/html5\/827.html","time":"1575768660"},{"title":"Android \u52a0\u4e86\u7535\u8bdd\u6743\u9650\uff0c\u8fd0\u884c\u8fd8\u662f\u95ea\u9000\u62a5\u9519","link":"https:\/\/nowtime.cc\/android\/824.html","time":"1575720406"},{"title":"Java \u521b\u5efa\u5b50\u7ebf\u7a0b\uff0c\u4f7f\u5b83\u7acb\u5373\u5f00\u59cb\u6267\u884c","link":"https:\/\/nowtime.cc\/java\/819.html","time":"1574477400"},{"title":"JavaScript \u904d\u5386 document.querySelectorAll()","link":"https:\/\/nowtime.cc\/js\/817.html","time":"1574215624"},{"title":"Java \u4e2d\u7684\u6807\u53f7\uff1aouter \u7684\u4f5c\u7528","link":"https:\/\/nowtime.cc\/java\/815.html","time":"1573221000"},{"title":"[\u5b98\u65b9]\u56fd\u5185 Android Studio \u4e0b\u8f7d\u5730\u5740","link":"https:\/\/nowtime.cc\/chat\/814.html","time":"1573198272"},{"title":"[\u7b80\u5355\u4f53\u9a8c]QQ for Linux \u4e8e 2019-10-24 \u66f4\u65b0","link":"https:\/\/nowtime.cc\/linux\/812.html","time":"1571980320"},{"title":"JavaScript \u968f\u673a\u4ea7\u751f\u4e0d\u91cd\u590d\u7684\u6570\u5b57\u601d\u8def(\u9012\u5f52\u6cd5)","link":"https:\/\/nowtime.cc\/js\/804.html","time":"1571758740"},{"title":"AutoCAD \u5b66\u751f\u7248","link":"https:\/\/nowtime.cc\/software\/802.html","time":"1571540404"},{"title":"\u7981\u6b62\u8fc5\u96f7\u63a5\u7ba1\/\u76d1\u542c Chrome \u4e0b\u8f7d\u6587\u4ef6","link":"https:\/\/nowtime.cc\/windows\/793.html","time":"1570325340"},{"title":"Git \u56fd\u5185\u955c\u50cf\u7ad9\u4e0b\u8f7d","link":"https:\/\/nowtime.cc\/windows\/792.html","time":"1570193487"},{"title":"Wireshark \u7f51\u7edc\u5206\u6790\u5668 \u5b89\u88c5\u540e\u6253\u5f00\u663e\u793a\u6ca1\u6709\u627e\u5230\u63a5\u53e3","link":"https:\/\/nowtime.cc\/windows\/788.html","time":"1570189118"},{"title":"OpenWrt\/Pandorabox \u4f7f\u7528 Curl \u547d\u4ee4\u8bbf\u95ee https \u94fe\u63a5\u62a5\u9519","link":"https:\/\/nowtime.cc\/router\/787.html","time":"1570105616"},{"title":"[HTML\u6e90\u7801]2019 \u6c5f\u897f\u7701\u4fe1\u606f\u6280\u672f\u77e5\u8bc6\u7ade\u8d5b\u9898\u5e93 \u5728\u7ebf\u7ec3\u4e60\/\u7b54\u9898","link":"https:\/\/nowtime.cc\/github\/780.html","time":"1570070340"},{"title":"OpenWrt\/PandoraBox \u7cfb\u7edf\u8def\u7531\u5668 \u5b9e\u73b0 Dr.com\u4e0a\u7f51","link":"https:\/\/nowtime.cc\/router\/770.html","time":"1569926580"},{"title":"JavaScript \u52a8\u6001\u53d6\u5bf9\u8c61\u503c(\u6570\u7ec4)","link":"https:\/\/nowtime.cc\/js\/769.html","time":"1569664260"},{"title":"ThinkPHP 5 \u547d\u4ee4\u884c\u4e0b\u6267\u884c\u63a7\u5236\u5668\u4e0b\u7684\u65b9\u6cd5","link":"https:\/\/nowtime.cc\/php\/768.html","time":"1569157285"},{"title":" IntelliJ IDEA\u5168\u5c40\u5185\u5bb9\u641c\u7d22\u548c\u66ff\u6362","link":"https:\/\/nowtime.cc\/trick\/765.html","time":"1567647840"},{"title":"CCTV 4K \u8282\u76ee\u4e13\u533a","link":"https:\/\/nowtime.cc\/chat\/763.html","time":"1567324566"},{"title":"\u963f\u91cc\u5df4\u5df4\u666e\u60e0\u4f53 \u4e0b\u8f7d\u5730\u5740\uff08\u514d\u8d39\u5546\u7528\uff09","link":"https:\/\/nowtime.cc\/news\/760.html","time":"1567150200"},{"title":"(2019\u5e742\u6708)\u4e2d\u56fd\u4e3b\u8981\u9aa8\u5e72\u7f51\u7edc\u56fd\u9645\u51fa\u53e3\u5e26\u5bbd\u6570 | \u7b2c43\u6b21\u300a\u4e2d\u56fd\u4e92\u8054\u7f51\u7edc\u53d1\u5c55\u72b6\u51b5\u7edf\u8ba1\u62a5\u544a\u300b","link":"https:\/\/nowtime.cc\/news\/757.html","time":"1567087740"},{"title":"TeamViewer v14.2.8352 \u4fbf\u643a\u7834\u89e3\u7248","link":"https:\/\/nowtime.cc\/windows\/746.html","time":"1566983752"},{"title":"APK Messenger v4.3-\u4e13\u4e1aAPK\u7ba1\u7406\u5de5\u5177","link":"https:\/\/nowtime.cc\/windows\/742.html","time":"1566982740"},{"title":"BaiduPCS-Web(\u767e\u5ea6\u4e91\u9ad8\u901f[\u591a\u5e76\u53d1]\u4e0b\u8f7d)","link":"https:\/\/nowtime.cc\/github\/732.html","time":"1566979380"},{"title":"WSL(Windows Subsystem for Linux)\u521d\u59cb\u4fee\u6539 root \u5bc6\u7801","link":"https:\/\/nowtime.cc\/windows\/731.html","time":"1566958228"},{"title":"OpenWRT \/ Pandava \u7cfb\u7edf\u8def\u7531\u5668\u653e\u884c IPv4\/IPv6 \u7aef\u53e3","link":"https:\/\/nowtime.cc\/trick\/730.html","time":"1566800220"},{"title":"\u56fd\u5185\u65e0\u6c61\u67d3 IPv4 \/ IPv6 DNS","link":"https:\/\/nowtime.cc\/trick\/725.html","time":"1566733020"},{"title":"Flarum \u542f\u7528 GitHub Login \u8bbe\u7f6e\u65b9\u6cd5","link":"https:\/\/nowtime.cc\/trick\/712.html","time":"1566358800"},{"title":"IPv4& IPv6 \u5728\u7ebf\u7f51\u901f\u6d4b\u8bd5\u7f51\u7ad9\u63a8\u8350","link":"https:\/\/nowtime.cc\/news\/708.html","time":"1566190560"}];

//调用函数，渲染“时间线”
xuanran_time_line(data);

/**
 * 渲染时间线
 * @param data {[]}            需要进行时间线分割的数据
 * @param selector string      css 选择器
 */
function xuanran_time_line(data=[], selector=".time-line") {
    let time_line = document.querySelector(selector);
    let _group_month= group_month(data),html;

    time_line.innerHTML = '';//清空时间线
    for(let item in _group_month){
        html = '<li class="tl-header">\n' +
            '    <h2>'+item+'</h2>\n' +
            '</li>' +
            '<ul class="tl-body">';

        for(let items in _group_month[item]){
            ttt = _group_month[item][items];
            html += '<li>\n' +
                '    <span>'+time_d(ttt["time"])+'</span>\n' +
                '    <h3>\n' +
                '        <a href="'+ttt["link"]+'" target="_blank">'+ttt["title"]+'</a>\n' +
                '    </h3>\n' +
                '</li>\n'
        }
        html += '</ul>';

        time_line.innerHTML += html;
    }
    time_line.innerHTML += '<li class="tl-header start">\n' +
        '    <h2>开始</h2>\n' +
        '</li>';
}

/**
 * 按月份分组
 * @param data {[]}
 * @returns {[]}
 */
function group_month(data){
    let result = [];

    for (let item in data){
        date = time_ym(data[item]['time']);

        if(!result[date]){
            result[date] = [data[item]];
        }else{
            result[date].push(data[item]);
        }
    }

    return result;
}

/**
 * 时间戳{秒级} 转 年月
 * @param dates
 * @returns {string}
 */
function time_ym(dates) {
    let date = new Date(dates * 1000);

    let Y = date.getFullYear() + '年';
    let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1)+'月';

    return Y + M;
}

/**
 * 时间戳{秒级} 转 日
 * @param dates
 * @returns {string}
 */
function time_d(dates) {
    let date = new Date(dates * 1000);
    return (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())+'日';
}