【工作日記】頁(yè)管 - 用戶信息占比 - 長(zhǎng)方形百分比 - 進(jìn)度條

HitenDev 發(fā)布于2019-08-30 14:20 / 3179人閱讀

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

需求分析

頁(yè)管會(huì)員信息展示頁(yè)面需要多個(gè)百分比顯示的長(zhǎng)方形進(jìn)度條，最終效果如下圖所示

樣式實(shí)現(xiàn)

兩個(gè)主要部分:

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

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

/* 進(jìn)度條樣式設(shè)置 開(kāi)始 */
.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;
}
/* 進(jìn)度條樣式設(shè)置 結(jié)束 */

功能實(shí)現(xiàn)

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


    

100%

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

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

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

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

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

整合代碼

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

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

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

登陸后可評(píng)論

0條評(píng)論

HitenDev

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

HAL STM32F407ZGT6 FreeRTOS

閱讀 1101·2021-11-23 09:51
如何優(yōu)雅的起個(gè)變量名？

閱讀 2449·2021-09-29 09:34
【工作日記】頁(yè)管 - 用戶信息占比 - 長(zhǎng)方形百分比 - 進(jìn)度條

閱讀 3180·2019-08-30 14:20
解決微信小程序視頻組件層級(jí)過(guò)高的問(wèn)題

閱讀 1106·2019-08-29 14:14
Sass -- 安裝配置及簡(jiǎn)單使用

閱讀 3209·2019-08-29 13:46
移動(dòng)端:web前端實(shí)用小技巧

閱讀 1104·2019-08-26 13:54
this指向問(wèn)題的經(jīng)典場(chǎng)景

閱讀 1658·2019-08-26 13:32
淺談react性能優(yōu)化的方法

閱讀 1455·2019-08-26 12:23

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

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

【工作日記】頁(yè)管 - 用戶信息占比 - 長(zhǎng)方形百分比 - 進(jìn)度條

相關(guān)文章