Time-line

纯 CSS 实现的 时间线，也支持使用 JavaScript 生成。
DEMO | 演示

HTML 渲染

你只需要根据 timeLine.html 代码结构进行简单的修改即可实现

JacaScript 渲染

你需要将 timeLine.html 103 行 取消注释，然后根据 timeLine.js 注释修改

timeLine.js 里 data变量 数据格式如下：

[
  {
    "title":"现在网",
    "link":"https://nowtime.cc",
    "time":"1578718860"
  },
  {
    "title":"ffmpeg 使用方法合集",
    "link":"https://nowtime.cc/software/834.html",
    "time":"1578725484"
  }
]

字段解释：

title 时间线显示的内容

link 点击后跳转的链接

time 该内容发布的时间，注意是 秒级时间戳 ！

鸣谢

部分 CSS 样式参考的是 https://www.ihewro.com/archives.html

LICENSE

MIT LICENSE

如果使用 forEach 遍历，则会报错，因为它返回的不是一个数组，而是 NodeList

document.querySelectorAll('input[type='selece']]').forEach(function() {
  
});

我们可以通过一下方法来遍历

const selects = document.querySelectorAll("input[name='select']");
[].forEach.call(selects, function(select) {
    console.log(select);
});

代码

/**
 * 产生指定长度　０～11的数字，且不重复数字的数组，使用了递归方法
 * @author chuwen   <wenzhouchan@gmail.com>
 * @link            https://NowTime.cc
 * @param length    指定生成数组的长度，默认为５
 * @param arr       默认空白数组，不需要填写
 * @returns {Array} 输出数组
 */
function random_num(length=5, arr=[]) {
    let random = Math.floor(Math.random()*11)+1, repeat = false;
    random = random > 9 ? random.toString() : '0'+random;//将数字转化成字符串。如果小于９，给数字前面补一个零

    if(arr.length > length-1) return arr;//达到了指定数组长度，直接输出数组

    for(let item in arr){
        if(arr[item] === random) return random_num(length, arr);//如果数组中存在与本次随机产生的随机数有相同的，就递归调用
    }

    arr.push(random);//将产生的随机数，追加进　arr
    return random_num(length, arr);//然后进行递归调用
}

＃ 运行结果

console.log(random_num(５));//运行结果如下
["02", "04", "06", "10", "01"]

console.log(random_num(４));//运行结果如下
["03", "10", "08", "06"]

举个例子

有以下对象

let ob = {
    age: 19,
    name: 'Wenzhou Chan',
    sex: '♂'
};

let key = 'age';//键名(key)，根据自己业务逻辑，该值是动态改变的

//按照预想结果，取出来的应该是 ob.age 的值
console.log(ob.key);
//但运行结果实际是 undefined

//我们可以这样做，就可以动态取值了
console.log(ob[key]);
//运行结果是  19

实现方法

let arr = {id: [1, 2, 3]},
    arr2 = {name: ["apple", "banana", "pear"]}
Object.assign({}, arr, arr2);