标签 JavaScript 下的文章

纯 CSS 实现的 时间线,也支持使用 JavaScript 动态生成

Time-line

纯 CSS 实现的 时间线,也支持使用 JavaScript 生成。
DEMO | 演示
Time-line 预览图

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

JavaScript 遍历 document.querySelectorAll()

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

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

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

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

JavaScript 随机产生不重复的数字思路(递归法)

代码

/**
 * 产生指定长度 0~11的数字,且不重复数字的数组,使用了递归方法
 * @author chuwen   <wenzhouchan@gmail.com>
 * @link            https://NowTime.cc
 * @param length    指定生成数组的长度,默认为5
 * @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;//将数字转化成字符串。如果小于9,给数字前面补一个零

    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(5));//运行结果如下
["02", "04", "06", "10", "01"]

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

JavaScript 动态取对象值(数组)

举个例子

有以下对象

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

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

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

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