如何設定乙個好看的進度條，支援回顯預設值

2022-07-29 07:12:12 字數 1445 閱讀 6983

專案需要，在網上 招了乙個進度條，但是甲方粑粑覺得視覺效果不好，我。。。沒辦法，誰讓人家是甲方呢，我改，經過前段同事的幫助，終於搞出來了乙個相對來說還闊以的進度條，記錄下來，希望有所幫助。特別感覺前輩們的分享，如有錯誤，敬請指教

第一步：先建立div

class="jinducoat">


預設值：20


class="bars_10" id="max" style="float: right; font-weight: bold;" value="50">最大


class="bars_10" id="min" style="font-weight: bold;" value="0">最小


class="lang">


當前值：


20
view code

第二步：設定css樣式和js

這個屬性設定使填充進度條時的圖形為圓角

*/

}#range::-webkit-slider-runnable-track #range:focus #jinducoat #jindutiao .lang

css

$.fn.rangeslider = function(cfg);


var $input = $(this);


var min = this.slidercfg.min;


var max = this.slidercfg.max;


var step = this.slidercfg.step;


var callback = this.slidercfg.callback;


$('.lang')[0].style.width = 0;


console.log(this);


$input.attr('min', min)


.attr('max', max)


.attr('step', step);


$input.bind("input", function(e));


$("#title0").html(this.value);


if ($.isfunction(callback)) });


};
js第三步：寫js

//呼叫方法，動態生成進度條


var min = $("#min").attr("value");


var max = $("#max").attr("value");


var current = $("#default").attr("value");


$('#range').rangeslider();


var change = function($input) var now = $("#title0").text();


if(current == now));


}else
至此乙個比較好看的進度條就形成了，還能回顯預設值。

乙個漂亮的進度條

在今年上半年的專案中用div做過乙個進度條，動態顯示庫存情況，展示方式有點像win10風格的磁碟空間，簡潔明瞭，那個進度條也是來自幾年前的收藏。這幾年為了更好的適應移動端，響應式布局成為主流，下面這個進度條除了有動態的效果，還具備自適應能力，美觀大方的同時更加適合於執行具體任務的場景，留作備用。do...

自己製作的乙個進度條

自己寫的乙個簡易win下的進度條 using system using system.collections.generic using system.componentmodel using system.data using system.drawing using system.text us...

實現乙個進度條的列印

簡單版 import time for x in range 100 print r x end time.sleep 0.1 公升級版 import time for x in range 50 print r x 50 x str x end time.sleep 0.5 開發版 import ...