Web简易时间轴制作（超详细）

Mvc设计模式实例
Js时间轴渲染

建立一个div规定时间轴的长度。假设为常量d；
有一组时间数据假设为data = [{Matter:事件, StartTime:开始时间, EndTime:结束时间，Color：颜色},{},{}…等]，其中一条例如{Matter:”吃饭”,StartTime:” 2018/10/10 12:00”,EndTime:”2018/10/10 12:40”,Color:”red”}
获取数据条数

var intLength = data.length

声明数组储存时间轴每个节点的时间值Time[]（数组长度为时间数据条数乘以2在加上起止时间也就是2intLength + 2，最大索引也就是2intLength + 1，时间单位为毫秒），每两个节点之间的时间状态State[]（数组长度为Time[]长度减1也就是2intLength + 1最大索引也就是2intLength）。

三条时间数据为例草图

规定时间轴的起始时间与结束时间，把数据中的第一个时间提前得到起始时间，把最后一个时间延后得到结束时间

1）把第一个时间与最后一个时间转化为JS时间对象

var sTiem = new Date(Date.parse(data[0].StartTime));
var sTiem = new Date(Date.parse(data[intLength - 1].EndTime));

2）提前第一个时间得到起始时间，延后最后一个时间得到结束时间。

//（注：当然你也不可直接用数据的最大时间与最小时间不进行提前与延误，但我还是以我的为例）
if (sTiem.getHours() > 12) {  //判断如果时间大于12点就等于十二点否则就等于0点 （最小时间）Time[0] = new Date(sTiem.getFullYear(), sTiem.getMonth(), sTiem.getDate(), 12).getTime();
} else {Time[0] = new Date(sTiem.getFullYear(), sTiem.getMonth(), sTiem.getDate(), 0).getTime();
}
if (eTiem.getHours < 12) {  //判断如果时间小于12点就等于十二点否则就等于第二天0点 （最大时间）Time[intLength * 2 + 1] = new Date(eTiem.getFullYear(), eTiem.getMonth(), eTiem.getDate(), 12).getTime();
} else {Time[intLength * 2 + 1] = new Date(eTiem.getFullYear(), eTiem.getMonth(), eTiem.getDate(), 24).getTime();
}

接下来循环给两个数组赋值。

//循环给数组赋值
var T = 1;
var B = 0
for (var i = 0; i < intLength; i++) {State[B] = false;B++;State[B] = true;B++;Time[T] = new Date(Date.parse(data[i].StartTime)).getTime();T++;Time[T] = new Date(Date.parse(data[i].EndTime)).getTime();T++;
}

把时间数据中的时间值转化为毫秒赋值给时间数组Time[]，把每个时间段的状态赋值给State[]。再给最后一个状态数据赋值

State[intLength * 2] = false;

接下来获取每一段时间的像素。

1）声明数组储存每一段时间的像素linee[].

2）利用结束时间减去开始时间获取时间轴的时间间隔

   var whole = Time[Time.length - 1] - Time[0];

3）利用循环算出每一小段时间站总时间的比例在乘以div的长度常量d得到每一段时间的像素赋值给数组 linee[]

for (var i = 0; i < Time.length - 1 ; i++) {linee[i] = parseInt(((Time[i + 1] - Time[i]) / whole) * d);
}

特殊情况处理，采用循环遍历像素数组linee[],找出像素为0的字段进行删除。并且对应的删除时间节点与状态。

//利用循环遍历像素数组查找出0像素的字段进行删除，并且对应的删除时间节点与状态
for (var i = 0; i < linee.length; i++) {if (linee[i] == 0) {Time.splice(i, 1);State.splice(i, 1);linee.splice(i, 1);i--;}
}

三条数据为例的特殊情况，两条数据前后时间相接。

利用循环把时间数组中的毫秒转化为显示的标准格式。

for (var i = 0; i < Time.length; i++) {Time[i] = DateString(new Date(Time[i]));
}
//js日期对象转化为字符串
function DateString(Time) {var year = Time.getFullYear();var Month = Time.getMonth() + 1;if (Month < 10) {Month = "0" + Month;}var day = Time.getDate();if (day < 10) {day = "0" + day;}var hour = Time.getHours();if (hour < 10) {hour = "0" + hour;}var Minutes = Time.getMinutes();if (Minutes < 10) {Minutes = "0" + Minutes;}return year + "-" + Month + "-" + day + " " + hour + ":" + Minutes;
}

10.接下来把数据渲染成时间轴。linee数组储存的是像素宽度，Time数组储存了节点时间，State数组储存了状态，先清空div，然后利用循环给div内部追加一个个小长条。这样时间轴就基本构成。

$("#A").empty(); //清空div
var dd = 0;
for (var i = 0; i < linee.length; i++) {var span1 = '<span>' + Time[i] + '</span>';var span2 = '';var color = '';var Matter = '';if (i == (linee.length - 1)) {span2 = '<span>' + Time[i + 1] + '</span>';}if (State[i]) {color = 'background:#' + data[dd].Color + ';'Matter = data[dd].Matter;dd++;}$("#A").append('<div class="come" style="' + color + 'width:' + linee[i] + 'px;">' + Matter + span1 + span2 + '</div>');
}
spanP(); //位置调整

目前效果图

11.最后一步我们对样式
进行一些调整，使时间轴看起来更和谐美观。

//span 样式调整
function spanP() {var span = $("#A span");if (span.length > 0) {for (var i = 0; i < span.length; i++) {if (i % 2 == 0) {if (i == (span.length - 1)) {$(span[i]).addClass("RightB")} else {$(span[i]).addClass("leftB")}} else {if (i == (span.length - 1)) {$(span[i]).addClass("RightT")} else {$(span[i]).addClass("leftT")}}}}
}

获取所有存放时间值的span标签，对他们分别给上不同的样式类。样式如下

  #A .come{height:25px;float:left;border-right:solid #808080 1px;position:relative;text-align:center;font-size:12px;line-height:25px;}#A .come span{font-size:5px;position:absolute;line-height:16px;}#A .come:last-child{border-right:none;}.leftB{top:30px;left:-50px;}.leftT{top:-20px;left:-50px;}.RightB{top:30px;right:-50px;}.RightT{top:-20px;right:-50px;}

最后的效果图如下

这样时间轴完成了，谢谢观赏——宋心成

Web简易时间轴制作（超详细）相关推荐

office timeline 5|office timeline pro/plus 5(PPT时间轴制作插件) v5.00.00.00
office timeline pro/plus 5是专为办公人士所打造的一款PPT时间轴制作插件,它可以帮助用户快速制作PPT和工作流程图,且毫不费力,从而大幅提高工作效率.同时该软件拥有非常多的功 ...
二十世纪初的心理学时间轴制作
二十世纪初的心理学史和视频链接视频录屏参考书籍时间轴的逻辑做时间轴的收获时间轴制作工具视频录屏 PSY timeline (20th) 参考书籍这次时间轴的编写参考叶浩生老师的< ...
字幕制作之时间轴制作(1) - 字幕的无中生有
关于时间轴准备具体步骤关于时间轴时间轴决定了字幕的出现和结束时间.目前来讲,字幕时间轴的制作主要分为两大块,第一块是对时间轴进行调整,第二块是新建时间轴.因为电视剧基本都有对应的cc字幕,对于 ...
使用ivx滑动时间轴制作动画效果的经验总结
之前的案例中使用过时间轴制作动画效果,其实在ivx中还有一个滑动时间轴组件,它必须添加在画布组件下,虽然也是通过给组件添加轨迹实现播放效果,不过根据名字比较容易理解它是通过滑动来触发播放的,而且可以选 ...
【tableau小白进阶之路】多度量折线图制作时间轴制作
(一)多度量折线图制作起初只是把所有的度量都拖到了'行',出现6个折线图,使用双轴也无法把所有的折线图都显示到同一个轴里.问题如下: 经过小数点社区小伙伴的指导,通过拖拽即可实现. [拖拽住想要展示 ...
Java Web实现登录注册（超详细附代码）
Java Web实现登录注册(超详细附代码) 文章目录 Java Web实现登录注册(超详细附代码) 1.前言 2.登录注册设计流程 3.注册的数据流程 4.登录的数据流程 5.部分代码的展示 5.1 ...
Python实现气象天气数据采集与分析【定时邮件发送最新天气提醒+基于时间轴制作Gif天气演变图】
天气预报可以说是我们每个人日常生活中都会接触到并关注的一件事情了,当前的天气预报技术不仅仅基于模式预报,也融入进了人工智能分析预测预报技术,准确度相较于以往还是有了很大的提升了的.今天我想基于气象局公 ...
安大计算机复试时间,安徽大学2020年硕士研究生复试时间公布（超详细）
原标题:安徽大学2020年硕士研究生复试时间公布(超详细) 各位考生: 现将各培养单位复试日程汇总如下,请参看.我校将短信通知各位考生具体面试时间,请您保持通讯畅通.如因网络.运营商.拦截等导致的考生 ...
android 简易时间轴(实质是ListView)
ListView的应用 1.在很多时候是要用到时间轴的,有些处理的时间轴比较复杂,这里就给出一个比较简单的时间轴,其实就是ListView里面的Item的设计. 直接上代码: ListView,ite ...

Web简易时间轴制作（超详细）

Web简易时间轴制作（超详细）相关推荐

最新文章

热门文章