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

HitenDev 發布于2019-08-30 14:20 / 3149人閱讀

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

需求分析

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

樣式實現

兩個主要部分:

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

2.百分比顯示，一個label標簽就夠了；

/* 進度條樣式設置 開始 */
.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;
}
/* 進度條樣式設置 結束 */

功能實現

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


    

100%

2.根據自定義屬性的數值來修改相應的參數:

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.由于進度條先頁管會有多個，因此需要循環修改數組中每個的屬性值,添加循環后修改代碼如下：

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 + "%");                                                //修改進度條文字
})

整合代碼

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115953.html

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

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

hsluoyz 2019-08-22 15:59 評論0 收藏0
【工作日記】頁管 - 用戶信息占比 - 長方形百分比 - 進度條

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

Winer 2019-08-02 10:06 評論0 收藏0
css3實現圓形進度條

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

leanote 2019-08-21 11:36 評論0 收藏0
css3實現圓形進度條

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

enali 2019-08-29 12:12 評論0 收藏0