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

站在用戶的角度思考問題，與客戶深入溝通，找到松北網(wǎng)站設(shè)計(jì)與松北網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗(yàn)好的作品，建站類型包括：做網(wǎng)站、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名與空間、虛擬空間、企業(yè)郵箱。業(yè)務(wù)覆蓋松北地區(qū)。

JavaScript的作用是什么

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

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

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

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

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

// 計(jì)算寬度百分比的函數(shù)
// endTime: 任務(wù)的結(jié)束時間
// startTime: 任務(wù)的開始時間
// maxTime: 所有任務(wù)結(jié)束時間較大的值
// minTime: 所有任務(wù)開始時間最小的值
// time: 所有任務(wù)開始時間與結(jié)束時間的排序 升序
// task_width: 任務(wù)的長度、水平連接線的長度、垂直連接線的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;
  };

鼠標(biāo)縮放，保持以鼠標(biāo)為中心，往兩邊放大

先放推理過程圖：

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

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

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

使用連線表示任務(wù)之間的關(guān)系

方案：

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

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

3. 用標(biāo)簽繪制

優(yōu)缺點(diǎn)：

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

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

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

實(shí)現(xiàn)思路：

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

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

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

因?yàn)楸綿emo的時間4刻度是個刻度，判斷最小時間戳與較大時間戳之間的差除以4，是否還有一天的時間（60 * 60 * 24,換算成秒），從大到小的降序獲取時間單位。

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

網(wǎng)站名稱：使用JavaScript+CSS+HTML怎么實(shí)現(xiàn)時序圖-創(chuàng)新互聯(lián)
文章地址：http://aaarwkj.com/article20/dppjco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、標(biāo)簽優(yōu)化、網(wǎng)站營銷、網(wǎng)站導(dǎo)航、App開發(fā)、網(wǎng)頁設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)