如何使用jquery製作動態進度條？

我編寫了一個使用jquery的progressbar代碼，但是如果我添加第二個元素，所有元素的工作原理都是一樣的，那就是爲什麼我想我必須讓它變成動態的，但我不知道如何才能使它成爲動態的？如何使用jquery製作動態進度條？

HTML

<html lang="en"> 
    <head> 
     <meta charset="UTF-8" /> 
     <title>Document</title> 
    </head> 
    <body> 
     <div class="trustyou-progressbar pull-right"> 
      <p class="trustyou-puan">100/72 Puan</p> 
      <div class="progressFill"> 
       <span class="ani-puan" ani-puan="72"></span> 
      </div> 
     </div> 


     <div class="trustyou-progressbar pull-right"> 
      <p class="trustyou-puan">100/39 Puan</p> 
      <div class="progressFill"> 
       <span class="ani-puan" ani-puan="39"></span> 
      </div> 
     </div> 
     <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
    </body> 
</html>

CSS

.trustyou-progressbar{ 
    width:100px; 
} 
.trustyou-puan{ 
    font-size: 13px; 
    color:#494949; 
    font-weight: 500; 
} 
.progressFill{ 
    width:100%; 
    height:6px; 
    background:#222222; 
} 
.ani-puan{ 
    display:block; 
    height:100%; 
}

JQUERY

var getprogressPuan = $('.ani-puan').attr('ani-puan'); 
    $(".ani-puan").css("width",getprogressPuan+"%"); 
    if((getprogressPuan>0) && (getprogressPuan<=40)){ 
     $(".ani-puan").css("background","#ca2424"); 
    }else if((getprogressPuan>=40) && (getprogressPuan<75)){ 
     $(".ani-puan").css("background","#d6d824"); 
    }else if((getprogressPuan>=75)){ 
     $(".ani-puan").css("background","#9ad204"); 
    }

click to see demo

來源

2016-10-13 ani_css

使用一個迭代的功能，適用於所有元素：

$('.ani-puan').each(function() { 

    var getprogressPuan = $(this).attr('ani-puan'); 
    $(this).css("width", getprogressPuan + "%"); 
    if ((getprogressPuan > 0) && (getprogressPuan <= 40)) { 
    $(this).css("background", "#ca2424"); 
    } else if ((getprogressPuan >= 40) && (getprogressPuan < 75)) { 
    $(this).css("background", "#d6d824"); 
    } else if ((getprogressPuan >= 75)) { 
    $(this).css("background", "#9ad204"); 
    } 

});

Here is the sample page

來源

2016-10-13 07:05:30

這裏是codepen鏈接：http://codepen.io/kofijita/pen/WGyzQY

$（「。ani-puan」）將獲得兩個元素，您應該使用迭代器來區分它們。

var $puan = $('.ani-puan'); 
for (var i = 0, len = $puan.length; i < len; i++) { 
    var $cur = $('.ani-puan').eq(i); 
    var getprogressPuan = $cur.attr('ani-puan'); 
    $cur.css("width", getprogressPuan + "%"); 
    if ((getprogressPuan > 0) && (getprogressPuan <= 40)) { 
     $cur.css("background", "#ca2424"); 
    } else if ((getprogressPuan >= 40) && (getprogressPuan < 75)) { 
     $cur.css("background", "#d6d824"); 
    } else if ((getprogressPuan >= 75)) { 
     $cur.css("background", "#9ad204"); 
    } 
}

來源

2016-10-13 07:00:32

該代碼只是改變所有具有ani-puan類的元素。

您需要創建一個jQuery組件（一個小部件）來分別處理每個進度條。

從閱讀How to Create a Basic Plugin開始，然後您可以研究jQuery UI's progressbar source code以瞭解他們是如何做到的。

如果你不介意，你可以download the jQuery UI progressbar（你不需要整個jQuery UI），只是改變你需要的東西。

另請注意，HTML5已經包含組件progress，它已經滿足您的需求（包括更改顏色）。

來源

2016-10-13 07:02:30

您也可以輕鬆地創建進度條是這樣的：

var i = 0; 
 
var clear = setInterval(function(){ 
 
    i++; 
 
    $('.progressFill').text(i+'0%'); 
 
    $('.progressFill').width(i+'0%'); 
 
    if(i==10) 
 
    { 
 
     clearInterval(clear); 
 
    } 
 
},1000);

.trustyou-progressbar{ 
 
width: 100px; 
 
background-color: #000000; 
 
} 
 
.trustyou-puan{ 
 
    font-size: 13px; 
 
    color:#494949; 
 
    font-weight: 500; 
 
} 
 
.progressFill{ 
 
    width: 0%; 
 
    height: 6px; 
 
    background: #15D318; 
 
} 
 
.ani-puan{ 
 
    display:block; 
 
    height:100%; 
 
}

<html lang="en"> 
 
\t <head> 
 
\t \t <meta charset="UTF-8" /> 
 
\t \t <title>Document</title> 
 
\t </head> 
 
\t <body> 
 
\t \t <div class="trustyou-progressbar pull-right"> 
 
\t \t \t <div class="progressFill"> 
 
\t \t \t \t <span class="ani-puan" ani-puan="72"></span> 
 
\t \t \t </div> 
 
\t \t </div> 
 
    
 
\t \t <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
\t </body> 
 
</html>

來源

2016-10-13 07:07:55

如何使用jquery製作動態進度條？

回答

相關問題