使用JavaScript+CSS+HTML怎么實現(xiàn)時序圖

這篇文章將為大家詳細講解有關使用JavaScript+CSS+HTML怎么實現(xiàn)時序圖，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

JavaScript的作用是什么

1、能夠嵌入動態(tài)文本于HTML頁面。2、對瀏覽器事件做出響應。3、讀寫HTML元素。4、在數(shù)據(jù)被提交到服務器之前驗證數(shù)據(jù)。5、檢測訪客的瀏覽器信息。6、控制cookies，包括創(chuàng)建和修改等。7、基于Node.js技術進行服務器端編程。

思路的優(yōu)缺點：

1. 優(yōu)點：不需要去操作dom的css屬性，之間重新渲染，比較方便。缺點：對于使用dom重繪，耗費性能嚴重，大量任務渲染時性能很慢。

2. 優(yōu)點：只需改變dom的css，加載快，較流程。缺點：計算麻煩，使用過scaleX的小伙伴會發(fā)現(xiàn)當我X軸放大時垂直連接線會變寬，字體會橫向拉伸，都需要去反向縮小。

3. 優(yōu)點：加載快，很流暢，一次計算好元素所占寬度的占百分比，后面的操作都不需要去計算。缺點：使用百分比計算會有一定誤差，放大到一定程度會看的出來。（綜合考慮，本人采用的是第三種）

// 計算寬度百分比的函數(shù)
// endTime: 任務的結束時間
// startTime: 任務的開始時間
// maxTime: 所有任務結束時間最大的值
// minTime: 所有任務開始時間最小的值
// time: 所有任務開始時間與結束時間的排序 升序
// task_width: 任務的長度、水平連接線的長度、垂直連接線的left值
const widthFun = function (endTime, startTime, maxTime, minTime) {
    const task_width =
    (((Number (endTime) - Number (startTime)) /
    ((maxTime || time[time.length - 1]) - (minTime || time[0])) *
    (body_width - tree_box_dom.offsetWidth)) / dom.offsetWidth)*100;
    return task_width> 100 ? 100 : task_width;
  };

鼠標縮放，保持以鼠標為中心，往兩邊放大

先放推理過程圖：

// 上圖解釋
// dom = 時序圖的dom元素
// domL1, domeL2 = dom.scrollLeft;
// domeL1表示前一次的dom.scrollLeft;
// domeL2表示當前的dom.scrollLeft;
// scale 表示當前的放大的比例
// scale1 表示上一次的放大比例
// tree_dom.offsetWidth表示左側樹的寬度
// clientX1 表示上一次的鼠標位置距離時序圖左側的距離 = e.clientX - tree_dom.offsetWidth
// clientX2 表示當前鼠標位置距離時序圖的距離

// 以鼠標為中心的縮放，公式為：
domL2 = domeL1(scale/scale1) + clientX1(scale/scale1) - e.clientX + tree_dom.offsetWidth
// 公式講解：
// 1. scale/scale1表示本次的縮放比例除以上一次的縮放比例，表示當前的縮放比例
// 左側卷去的寬度在第二次縮放時也會跟著縮放，所以左側的寬度需要乘以縮放比例
// 鼠標位置距離時序圖左側的寬度在縮放時也會跟著縮放，所以也要乘以縮放比例
// 最后面減去鼠標位置距離時序圖左側的實際距離就等于縮放時左側卷去的長度

// 頁面代碼
time_box_parent.scrollLeft = (time_box_parent.scrollLeft + e.clientX - tree_box_dom.offsetWidth) * (scale_x / scale_x1) - e.clientX + tree_box_dom.offsetWidth;

使用連線表示任務之間的關系

方案：

1. 采用的時css3 + js + html5,用偽元素繪制。

2. 用dom包裹直角圖片，設置其位置及高度。

3. 用標簽繪制
    

優(yōu)缺點：

1. 優(yōu)點：不會增加多余的標簽，對渲染有利。缺點：父任務產(chǎn)生了多個子任務，不好添加偽類及設置偽類的高度及寬度。

2. 優(yōu)點：方便，只要計算子任務距父任務的高度即可。缺點：任務過多時圖片會非常多，很影響性能

3. 優(yōu)點：單獨控制每個元素的高度及位置，可控性高，可添加反饋色。缺點：添加了較多的元素，對渲染產(chǎn)生影響（本人使用的是第三種，這是一個笨方法，有更好方法的大佬，可以提供建議，多謝）

實現(xiàn)思路：

用一個變量記錄每個任務的層級深度，層級深都以當前任務的父任務為起點，就是說是從哪個任務產(chǎn)生的當前任務，同級的子任務進行累加操作。用累加的變量按照一定的比例獲取垂直連線的高度以及水平連線的top值，水平連線的長度由任務的創(chuàng)建時間和開始時間決定。（使用上面的寬度百分比函數(shù)）

時間單位：天、時、分、秒

這個比較簡單，實現(xiàn)思路：

因為本demo的時間4刻度是個刻度，判斷最小時間戳與最大時間戳之間的差除以4，是否還有一天的時間（60 * 60 * 24,換算成秒），從大到小的降序獲取時間單位。

關于使用JavaScript+CSS+HTML怎么實現(xiàn)時序圖就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。