成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

論一種基于JS技術(shù)的WEB前端動(dòng)態(tài)生成框圖的方法

NSFish / 1550人閱讀

摘要：前言是一種標(biāo)記語(yǔ)言，由的標(biāo)簽元素和文本編寫的文檔可被瀏覽器描述為一幅網(wǎng)頁(yè)。以下列舉了一些常用的對(duì)象方法，可供大家參考可登陸網(wǎng)站詳細(xì)查看，實(shí)現(xiàn)繪圖的方式主要基于這些常用的方法。

前言

HTML是一種標(biāo)記語(yǔ)言，由HTML的標(biāo)簽元素和文本編寫的文檔可被瀏覽器描述為一幅網(wǎng)頁(yè)。通常情況下網(wǎng)頁(yè)的實(shí)現(xiàn)是由HTML、CSS和Javascript三者結(jié)合完成的，HTML負(fù)責(zé)網(wǎng)頁(yè)的結(jié)構(gòu)，CSS渲染網(wǎng)頁(yè)元素的樣式，而Javascript腳本給網(wǎng)頁(yè)增加了動(dòng)態(tài)的行為，比如響應(yīng)用戶的行為等。

眾所周知，在web上繪圖是一件挺頭疼的事情，通常情況下開發(fā)人員需要借助第三方插件實(shí)現(xiàn)，目前HTML5中引入了canvas元素可通過(guò)JavaScript在頁(yè)面上繪制線條、圖形、添加文字和圖像等大部分的繪圖需求，但是仍然存在兼容性的問(wèn)題，比如Firefox3.0+、Chrome3.0+支持，但I(xiàn)E是在9.0版本后才開始支持（如下圖瀏覽器主流版本分布圖可知IE8的應(yīng)用仍然很廣泛）。因此本文介紹下如何使用最基礎(chǔ)的方式來(lái)實(shí)現(xiàn)畫圖。

DOM介紹

由于此處是通過(guò)JavaScript方式動(dòng)態(tài)生成圖形的，那么在介紹實(shí)現(xiàn)方式之前，有必要先提下DOM（文檔對(duì)象模型），它是W3C組織推薦的處理可擴(kuò)展標(biāo)記語(yǔ)言（HTMLXML）的標(biāo)準(zhǔn)編程接口，它將文檔中的對(duì)象組織在一個(gè)樹形結(jié)構(gòu)模型中,因此整個(gè)文檔映射為一個(gè)由層次節(jié)點(diǎn)組成的文件，并且以面向?qū)ο蠓绞矫枋隽宋募懈鲗?duì)象的行為、屬性以及這些對(duì)象之間的關(guān)系，通過(guò) JavaScript可對(duì)HTML文檔中所有對(duì)象進(jìn)行訪問(wèn)和操作，如動(dòng)態(tài)地添加、刪除和修改各元素。

如下圖所示，每個(gè)方框是文檔的一個(gè)節(jié)點(diǎn)，總共包括三種節(jié)點(diǎn)，樹形的根部是文檔（Document）節(jié)點(diǎn),代表整個(gè)文檔，元素（Element）節(jié)點(diǎn)代表了HTML中的元素，文本（Text）節(jié)點(diǎn)代表了文本。

同時(shí)節(jié)點(diǎn)樹中的節(jié)點(diǎn)彼此擁有層級(jí)關(guān)系，如下圖所示， 節(jié)點(diǎn)是根節(jié)點(diǎn)，下一級(jí)為 和 節(jié)點(diǎn)，他們擁有相同父節(jié)點(diǎn)，屬于同級(jí)的同胞節(jié)點(diǎn)，以此類推。

以下列舉了一些常用的DOM對(duì)象方法，可供大家參考（可登陸W3school網(wǎng)站詳細(xì)查看），實(shí)現(xiàn)繪圖的方式主要基于這些常用的方法。

繪制圖形的基本過(guò)程是將所要求顯示的元素節(jié)點(diǎn)逐個(gè)添加到頁(yè)面中的排布位置中，操作包括：

創(chuàng)建DOM節(jié)點(diǎn)

   var oDiv = document.createElement("div");

添加樣式：（Style 對(duì)象屬性設(shè)置樣式/Class繼承外部文件定義的樣式）

   document.getElementById("id").style.property="值"
   object.className=classname

插入DOM節(jié)點(diǎn)：（把節(jié)點(diǎn)插入到父節(jié)點(diǎn)的末尾/把節(jié)點(diǎn)插入到父節(jié)點(diǎn)的某個(gè)兄弟節(jié)點(diǎn)的前面）

   document.body.appendChild(oDiv); //把div插入到body中，并且位于末尾
   var oP = createElement("p");  //創(chuàng)建一個(gè)p節(jié)點(diǎn)
   document.body.insertBefore(oP,oDiv); //把p節(jié)點(diǎn)插入到div的前面

位置的定位排布：CSS的position屬性建立了元素布局所用的定位機(jī)制，我們可以將元素顯示在頁(yè)面中的任何位置，下圖顯示了position屬性的參數(shù)值和用法。文本使用absolute絕對(duì)定位方式，如left:100px;top:150px;表示元素距離頁(yè)面左側(cè)100px，距離頁(yè)面頂部150px。

實(shí)例代碼

方框?qū)崿F(xiàn):三行方框的排布為123，絕對(duì)定位的位置需要根據(jù)排布的要求定位。生成方框后的頁(yè)面HTML和CSS內(nèi)容如下圖所示，rootPen繼承了btn-flat樣式的特性，并對(duì)部分參數(shù)重新定義。

   for (var k = 0; k < 3; k++)
   {//三行
       topsize = 150*k;
       leftsize = 600 - 65*k;
       for (var j = 0; j < k+1; j++)
       {//每行k+1個(gè)方框
           var divNewele = document.createElement("div");
           divNewele.className = "btn-flat rootPen"http://css文件定義樣式
           divNewele.style.position = "absolute";//頁(yè)面絕對(duì)定位  
           leftsize = leftsize+150;
           divNewele.style.left = String(leftsize)+ "px";
           divNewele.style.top = String(topsize)+ "px";
           parent.appendChild(divNewele);
       }
   }


   /* CSS方框樣式 */
     .btn-flat.rootPen {
       padding: 8px 8px 8px 1px;
         font-size: 13px;
       color: #1a2129;
         text-align: center;
         width: 80px;
         height:60px; 
       margin-top: 1%;
       background: #e6ebf3;
       border: 1px solid #d8dde4;
       box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.4) inset, 0px 1px 0px 0px #cccccc; }
       .btn-flat.rootPen:active {
         background: #e0e6ef;
         -webkit-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.3) inset;
         -moz-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.3) inset;
         box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.3) inset; }
       .btn-flat.rootPen i {
         font-size: 14px; }

連接線實(shí)現(xiàn):原理與方框的實(shí)現(xiàn)相同，只是在樣式上有所區(qū)別，由于頁(yè)面元素一切皆以方框形式出現(xiàn)，那么實(shí)現(xiàn)連接線時(shí)我們需要修改CSS的屬性值，顯示橫線時(shí)width值為0px，顯示豎線時(shí)height值為0px。

   /* CSS畫線 */
   .line{
     border:3px solid #000000;
     margin-left:20px;
     position:absolute;
     }       
     .horLine {
       height:0px;
          }
     .verLine {
       width:0px;
          }

文本實(shí)現(xiàn):在方框中顯示文本內(nèi)容可在方框元素中繼續(xù)添加文本節(jié)點(diǎn)createTextNode。

總結(jié)

最終實(shí)現(xiàn)的方框拓?fù)鋱D如下所示，基于該方法的繪圖方式更側(cè)重于繪圖需求簡(jiǎn)單，但對(duì)瀏覽器的版本兼容較寬（特別是IE8的兼容）的場(chǎng)合，該方法的缺陷主要為需要提前計(jì)算各元素布局的位置，并且繪制如下圖較復(fù)雜的斜線、曲線時(shí)工作量較大。另外，目前canvas對(duì)于IE8的限制，可以通過(guò)開源項(xiàng)目ExplorerCanvas來(lái)解決，后續(xù)會(huì)介紹如何實(shí)現(xiàn)。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/51655.html

相關(guān)文章

  • 論一種基于JS技術(shù)的WEB前端動(dòng)態(tài)生成框圖的方法

    摘要：前言是一種標(biāo)記語(yǔ)言，由的標(biāo)簽元素和文本編寫的文檔可被瀏覽器描述為一幅網(wǎng)頁(yè)。以下列舉了一些常用的對(duì)象方法，可供大家參考可登陸網(wǎng)站詳細(xì)查看，實(shí)現(xiàn)繪圖的方式主要基于這些常用的方法。 前言 HTML是一種標(biāo)記語(yǔ)言，由HTML的標(biāo)簽元素和文本編寫的文檔可被瀏覽器描述為一幅網(wǎng)頁(yè)。通常情況下網(wǎng)頁(yè)的實(shí)現(xiàn)是由HTML、CSS和Javascript三者結(jié)合完成的，HTML負(fù)責(zé)網(wǎng)頁(yè)的結(jié)構(gòu)，CSS渲染網(wǎng)頁(yè)元素...

    李文鵬 評(píng)論0 收藏0

  • 論一種基于JS技術(shù)的WEB前端動(dòng)態(tài)生成框圖的方法

    摘要：前言是一種標(biāo)記語(yǔ)言，由的標(biāo)簽元素和文本編寫的文檔可被瀏覽器描述為一幅網(wǎng)頁(yè)。以下列舉了一些常用的對(duì)象方法，可供大家參考可登陸網(wǎng)站詳細(xì)查看，實(shí)現(xiàn)繪圖的方式主要基于這些常用的方法。 前言 HTML是一種標(biāo)記語(yǔ)言，由HTML的標(biāo)簽元素和文本編寫的文檔可被瀏覽器描述為一幅網(wǎng)頁(yè)。通常情況下網(wǎng)頁(yè)的實(shí)現(xiàn)是由HTML、CSS和Javascript三者結(jié)合完成的，HTML負(fù)責(zé)網(wǎng)頁(yè)的結(jié)構(gòu)，CSS渲染網(wǎng)頁(yè)元素...

    curlyCheng 評(píng)論0 收藏0

  • 前端開發(fā)者手冊(cè)2019

    摘要：年，和前端開發(fā)者與應(yīng)用程序前端開發(fā)者之間產(chǎn)生了巨大的分歧。開發(fā)最常見的解決方案有手機(jī)和平板的原生應(yīng)用程序桌面應(yīng)用程序桌面應(yīng)用程序原生技術(shù)最后，前端開發(fā)者可以從瀏覽器開發(fā)中學(xué)習(xí)到，編寫代碼不需要考慮瀏覽器引擎的限制。 前端開發(fā)者手冊(cè)2019 Cody Lindley 編著 原文地址 本手冊(cè)由Frontend Masters贊助，通過(guò)深入現(xiàn)代化的前端工程課程來(lái)提高你的技能。 下載：PDF ...

    church 評(píng)論0 收藏0

  • 前端開發(fā)者手冊(cè)2019

    摘要：年，和前端開發(fā)者與應(yīng)用程序前端開發(fā)者之間產(chǎn)生了巨大的分歧。開發(fā)最常見的解決方案有手機(jī)和平板的原生應(yīng)用程序桌面應(yīng)用程序桌面應(yīng)用程序原生技術(shù)最后，前端開發(fā)者可以從瀏覽器開發(fā)中學(xué)習(xí)到，編寫代碼不需要考慮瀏覽器引擎的限制。 前端開發(fā)者手冊(cè)2019 Cody Lindley 編著 原文地址 本手冊(cè)由Frontend Masters贊助，通過(guò)深入現(xiàn)代化的前端工程課程來(lái)提高你的技能。 下載：PDF ...

    xiao7cn 評(píng)論0 收藏0

  • 前端開發(fā)者手冊(cè)2019

    摘要：年，和前端開發(fā)者與應(yīng)用程序前端開發(fā)者之間產(chǎn)生了巨大的分歧。開發(fā)最常見的解決方案有手機(jī)和平板的原生應(yīng)用程序桌面應(yīng)用程序桌面應(yīng)用程序原生技術(shù)最后，前端開發(fā)者可以從瀏覽器開發(fā)中學(xué)習(xí)到，編寫代碼不需要考慮瀏覽器引擎的限制。 前端開發(fā)者手冊(cè)2019 Cody Lindley 編著 原文地址 本手冊(cè)由Frontend Masters贊助，通過(guò)深入現(xiàn)代化的前端工程課程來(lái)提高你的技能。 下載：PDF ...

    鄒立鵬 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<