怎么安裝nanobar js

本篇內(nèi)容介紹了“怎么安裝nanobar js”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

　　nanobar.js是一款輕量級的純js進(jìn)度條插件。這款進(jìn)度條插件兼容ie8瀏覽器，它使用簡單，并提供一些方法來控制進(jìn)度條的當(dāng)前進(jìn)度。

　　安裝nanobar.js進(jìn)度條

　　bowerinstallnanobar

　　//or

　　npminstallnanobar

　　js代碼

　　<scripttype="text/JavaScript"src="js/nanobar.js"></script>

　　<scripttype="text/JavaScript">

　　 varsimplebar=newNanobar();

　　 simplebar.go(50);

　　 varcolorbar=newNanobar({target:document.getElementById('color')});

　　 colorbar.go(50);

　　 varcenteredbar=newNanobar({target:document.getElementById('centered')});

　　 centeredbar.go(50);

　　</script>

　　nanobar.js進(jìn)度條初始化插件

　　可以使用newNanobar()的方法來生成一個(gè)新的進(jìn)度條實(shí)例對象。

　　varnanobar=newNanobar(options);

　　可用的options參數(shù)有：

　　id：String類型，可選參數(shù)。容納nanobar的div容器的id。

　　classname：String類型，可選參數(shù)。容納nanobar的div容器的class。

　　target：DOM元素，可選參數(shù)。nanobar的目標(biāo)元素，nanobar會(huì)被放置到這個(gè)元素的頂部位置。

　　通過nanobar.go(percentage)方法來移動(dòng)進(jìn)度條。

　　示例代碼

　　varoptions={

　　classname:'my-class',

　　id:'my-id',

　　target:document.getElementById('myDivId')

　　};

　　varnanobar=newNanobar(options);

　　//movebar

　　nanobar.go(30);//sizebar30%

　　nanobar.go(76);//sizebar76%

　　//sizebar100%andandfinish

　　nanobar.go(100);

“怎么安裝nanobar js”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！