如何使用javascript更改进度栏的颜色? [英] How can I change the color of a progress bar using javascript?

问题描述

请参阅到目前为止的代码( jsfiddle ).

Please see my code so far (jsfiddle).

我试图在进度条达到最大容量后更改其颜色.

I am trying to change the color of the progress bar once it reaches max capacity.

我该怎么做?

HTML代码:

<textarea></textarea>
<span id="characters">255 left</span>

<br>
<progress id="myProgress" value="0" max="255">
</progress>

JS代码:

$('textarea').keyup(updateCount);
$('textarea').keydown(updateCount);

function updateCount() {
     var max = 255;
    var cs = $(this).val().length;
    document.getElementById("characters").innerHTML= max-cs + " left..";
    document.getElementById("myProgress").value = cs;
    if (event.which < 0x20) {
        return;
      }
    if (cs == max) {
        event.preventDefault();
        // make the color of progress bar red here!! 
      }     

}

推荐答案

在CSS中添加progress::-webkit-progress-value，它会更改颜色并同时定义jquery.

add progress::-webkit-progress-value in css it changes color and also define it jquery.

      if(cs>=max) 
      $('#myProgress').css("background-color", "red");

或者您可以分配一个类，该类将分配背景颜色，例如

or you can assign a class which will assign the background color like

      if(cs>=max) 
      $('#myProgress').addClass("red");

$('textarea').keyup(updateCount);
$('textarea').keydown(updateCount);

function updateCount() {
	 var max = 255;
    var cs = $(this).val().length;
    if(cs>max) $(this).val($(this).val().toString().substring(0,max));
    document.getElementById("characters").innerHTML= max-cs + " left..";
    document.getElementById("myProgress").value = cs;
      if(cs>=max){
        $('#myProgress').addClass("red");
        }
      else{
        $('#myProgress').removeClass("red");

        }
    if (event.which < 0x20) {
        return;
      }
    if (cs >= max) {
        event.preventDefault();
        // make the color of progress bar red here!! 
      }     
      
}

progress.red{
  background-color:red;
  color:red;
  }
progress.red[value] {color:red} /* IE10 */
progress.red::-webkit-progress-bar-value {background-color:red}
progress.red::-webkit-progress-value {background-color:red}
progress.red::-moz-progress-bar {background-color:red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<textarea></textarea>
<span id="characters">255 left</span>

<br>
<progress id="myProgress" value="0" max="255">
</progress>

这篇关于如何使用javascript更改进度栏的颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！