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

資訊專欄INFORMATION COLUMN

【工作日記】頁管 - 用戶信息占比 - 長方形百分比 - 進度條

hsluoyz / 3460人閱讀

摘要：需求分析頁管會員信息展示頁面需要多個百分比顯示的長方形進度條，最終效果如下圖所示樣式實現(xiàn)兩個主要部分進度條，內(nèi)外兩個盒子組成，外層做進度條邊框，內(nèi)層做填充效果百分比顯示，一個標(biāo)簽就夠了進度條樣式設(shè)置開始進度條樣式設(shè)置結(jié)束功

需求分析

頁管會員信息展示頁面需要多個百分比顯示的長方形進度條，最終效果如下圖所示

樣式實現(xiàn)

兩個主要部分:

1.進度條，內(nèi)外兩個盒子組成，外層做進度條邊框，內(nèi)層做填充效果；

2.百分比顯示，一個label標(biāo)簽就夠了；

/* 進度條樣式設(shè)置 開始 */
.progress_bar{
    display: inline-block;
    width: 200px;
    height: 20px;
    border-radius: 8px;
    border: 1px solid #eee;
    overflow: hidden;
    box-shadow: 0 0 1px #ccc;
    margin: 0px 10px;
}
.progress_bar span{
    display: inline-block;
    height: 100%;
    width: 0;
    line-height: 20px;
    vertical-align: top;
    transition: all .6s;
}
.progress_bar_label{
    font-size: 14px;
    font-weight: bold;
    vertical-align: top;
    margin: 0 5px;
}
/* 進度條樣式設(shè)置 結(jié)束 */
功能實現(xiàn)

1.傳遞參數(shù)進來后，進度條的百分比、進度條的顏色、進度條的比例文字還有進度條的整體寬度可以相應(yīng)的發(fā)生變化，后端要求在標(biāo)簽內(nèi)修改,因此在div上寫入自定義屬性 data-color 來修改背景色， data-pre 來修改百分比文字, data-width 來修改進度條的整體寬度;增加相應(yīng)自定義屬性后的html內(nèi)容如下:

2.根據(jù)自定義屬性的數(shù)值來修改相應(yīng)的參數(shù):

var $color=$(".progress_bar").attr("data-color");            //data-color 為進度條顏色 例#ff6600
var per=$(this).attr("data-per");                         //data-per 為進度條 進度值  1-100
var barWidth=$(this).attr("data-width");                //data-width 為進度條寬度 值自定義 單位自動填充px

$(".progress_bar span").css({"background" : $color , "width" : per + "%"})        //修改進度條顏色和進度條占比
                        .parent().css({"width" : barWidth})                       //修改進度整體寬度
                        .next().text(per + "%");                                  //修改進度條文字

3.由于進度條先頁管會有多個，因此需要循環(huán)修改數(shù)組中每個的屬性值,添加循環(huán)后修改代碼如下：

var $color=$(".progress_bar").attr("data-color");            //data-color 為進度條顏色 例#ff6600
$(".progress_bar").each(function () {
    var per=$(this).attr("data-per");                         //data-per 為進度條 進度值  1-100
    var barWidth=$(this).attr("data-width");                //data-width 為進度條寬度 值自定義 單位自動填充px
    $(this)
        .find("span").css({"background" : $color , "width" : per + "%"})        //修改進度條顏色和進度條占比
        .parent().css({"width" : barWidth})                                     //修改進度整體寬度
        .next().text(per + "%");                                                //修改進度條文字
})
整合代碼 



    
    Form

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

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

相關(guān)文章

  • 【工作日記】頁管 - 用戶信息占比 - 長方形百分比 - 進度條

    摘要：需求分析頁管會員信息展示頁面需要多個百分比顯示的長方形進度條，最終效果如下圖所示樣式實現(xiàn)兩個主要部分進度條，內(nèi)外兩個盒子組成，外層做進度條邊框，內(nèi)層做填充效果百分比顯示，一個標(biāo)簽就夠了進度條樣式設(shè)置開始進度條樣式設(shè)置結(jié)束功 需求分析 頁管會員信息展示頁面需要多個百分比顯示的長方形進度條，最終效果如下圖所示showImg(https://segmentfault.com/img/bV7z...

    HitenDev 評論0 收藏0

  • 【工作日記】頁管 - 用戶信息占比 - 長方形百分比 - 進度條

    摘要：需求分析頁管會員信息展示頁面需要多個百分比顯示的長方形進度條，最終效果如下圖所示樣式實現(xiàn)兩個主要部分進度條，內(nèi)外兩個盒子組成，外層做進度條邊框，內(nèi)層做填充效果百分比顯示，一個標(biāo)簽就夠了進度條樣式設(shè)置開始進度條樣式設(shè)置結(jié)束功 需求分析 頁管會員信息展示頁面需要多個百分比顯示的長方形進度條，最終效果如下圖所示showImg(https://segmentfault.com/img/bV7z...

    Winer 評論0 收藏0

  • css3實現(xiàn)圓形進度條

    摘要：在開發(fā)微信小程序的時候，遇到圓形進度條的需求。但使用和實現(xiàn)進度條就很容易的避免了這方面的問題。如下圖最下面的圓形是進度條的背景，在上面有和兩個長方形，用來覆蓋不要顯示的進度條。在兩個長方形的里面分別有一個半圓形用來顯示進度。 在開發(fā)微信小程序的時候，遇到圓形進度條的需求。使用canvas繪圖比較麻煩： 1、為了實現(xiàn)在不同屏幕上面的適配，必須動態(tài)的計算進度條的大?。? 2、在小程序...

    leanote 評論0 收藏0

  • css3實現(xiàn)圓形進度條

    摘要：在開發(fā)微信小程序的時候，遇到圓形進度條的需求。但使用和實現(xiàn)進度條就很容易的避免了這方面的問題。如下圖最下面的圓形是進度條的背景，在上面有和兩個長方形，用來覆蓋不要顯示的進度條。在兩個長方形的里面分別有一個半圓形用來顯示進度。 在開發(fā)微信小程序的時候，遇到圓形進度條的需求。使用canvas繪圖比較麻煩： 1、為了實現(xiàn)在不同屏幕上面的適配，必須動態(tài)的計算進度條的大?。? 2、在小程序...

    enali 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<