使用JavaScript+CSS+HTML怎么實(shí)現(xiàn)時(shí)序圖-創(chuàng)新互聯(lián)

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

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

JavaScript的作用是什么

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

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


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

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

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

// 計(jì)算寬度百分比的函數(shù)
// endTime: 任務(wù)的結(jié)束時(shí)間
// startTime: 任務(wù)的開(kāi)始時(shí)間
// maxTime: 所有任務(wù)結(jié)束時(shí)間較大的值
// minTime: 所有任務(wù)開(kāi)始時(shí)間最小的值
// time: 所有任務(wù)開(kāi)始時(shí)間與結(jié)束時(shí)間的排序 升序
// task_width: 任務(wù)的長(zhǎng)度、水平連接線的長(zhǎng)度、垂直連接線的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)為中心，往兩邊放大

先放推理過(guò)程圖：

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

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

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

// 頁(yè)面代碼
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. 采用的時(shí)css3 + js + html5,用偽元素繪制。

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

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

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

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

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

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

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

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

時(shí)間單位：天、時(shí)、分、秒

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

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

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

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

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

廣告

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

微信小程序開(kāi)發(fā)