纯 CSS 实现的 时间线，也支持使用 JavaScript 动态生成 作者: Chuwen 时间: 2020-01-11 分类: HTML5,JavaScript # Time-line 纯 CSS 实现的 时间线，也支持使用 JavaScript 生成。 [DEMO | 演示](https://nowtime.cc/time-line.html) ![Time-line 预览图][1] # HTML 渲染 你只需要根据 `timeLine.html` 代码结构进行简单的修改即可实现 # JacaScript 渲染 你需要将 [timeLine.html](https://github.com/PrintNow/TimeLine/blob/master/timeLine.html#L103) `103 行` 取消注释，然后根据 [timeLine.js](https://github.com/PrintNow/TimeLine/blob/master/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](https://github.com/PrintNow/TimeLine/blob/master/LICENSE) [1]: https://cdn.nowtime.cc/2020/01/11/4225051700.png 标签: HTML5, JavaScript, CSS3, 时间线
意思HTML里面的内容要手动挨个儿输入进去？不能自动生成？
可以啊，不是写了也支持 JavaScript 动态生成
我弄失败了=-=
我放上去 之后 显示的还是你这边目录
我 https://nowtime.cc/time-line.html 就是用 JS 动态生成的