Question

我有三个进度条。根据我需要改变进度条宽度的值。在这里，我为每个进度条使用三个ID。我需要一个公共类，所有这些作为id导致JavaScript的冗余。而且我也无法根据值更改进度条的宽度。

var progress = $('#1 .my-progress-value').html();
    $('#1 .my-progress').css("width", progress + "%");
    if (progress == 0) {
        $('#1 .my-progress').css("background-color", "lightgrey");
        $('#1 .my-progress-value').css("background-color", "lightgrey");
    } else if (progress < 50) {
        $('#1 .my-progress').css("background-color", "red");
    } else {
        $('#1 .my-progress').css("background-color", "green");
    }
    
    progress = $('#2 .my-progress-value').html();
    $('#2 .my-progress').css("width", progress + "%");
    if (progress == 0) {
        $('#2 .my-progress').css("background-color", "lightgrey");
    } else if (progress < 50) {
        $('#2 .my-progress').css("background-color", "red");
    } else {
        $('#2 .my-progress').css("background-color", "green");
    }
    progress = $('#3 .my-progress-value').html();
    $('#3 .my-progress').css("width", progress + "%");
    if (progress == 0) {
        $('#3 .my-progress').css("background-color", "lightgrey");
    } else if (progress < 50) {
        $('#3 .my-progress').css("background-color", "red");
    } else {
        $('#3 .my-progress').css("background-color", "green");
    }
});

.my-progress-value {
  background-color: deepskyblue;
  color: white;
  border-radius: 100%;
  font-size: 7pt;
  padding: 8px 5px 8px 5px;
  position: absolute;
  margin-top: -11px;
}

.my-progress-container {
  position: absolute;
  width: 200px;
  padding-top: 4px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.my-progress {
  background-color: deepskyblue;
  width: 60%;
  height: 8px;
  text-align: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="row">
  <div class="col-md-3" id="1">
    <div class="my-progress-container">
      <div class="my-progress">
        <span class="my-progress-value">10%</span>
      </div>
    </div>
  </div>
  <div class="col-md-3" id="2">
    <div class="my-progress-container">
      <div class="my-progress">
        <span class="my-progress-value">30%</span>
      </div>
    </div>
  </div>
  <div class="col-md-3" id="3">
    <div class="my-progress-container">
      <div class="my-progress">
        <span class="my-progress-value">20%</span>
      </div>
    </div>
  </div>
</div>

updated小提琴。

Answer 1

制作这样的功能

const char * const *foo(char * const *a)

将该功能称为

实施例。

function setProgress(control) {
    var progress = $(control).find(".my-progress").html();
    $(control).find('.my-progress').css("width", progress + "%");
    if (progress == 0) {
        $(control).find('.my-progress').css("background-color", "lightgrey");
        $(control).find('.my-progress-value').css("background-color", "lightgrey");
    } else if (progress < 50) {
        $(control).find('.my-progress').css("background-color", "red");
    } else {
        $(control).find('.my-progress').css("background-color", "green");
    }
}

与班级

1）。设置一个班级名称＆＃34; ProgressControl ＆＃34;在哪里写Id字段。

2）。

setProgress($("#1"));
setProgress($("#2"));
setProgress($("#3"))

3）。调用

function setProgress() {
        var control = $(".ProgressControl");
        var progress = $(control).find(".my-progress").html();
        $(control).find('.my-progress').css("width", progress + "%");
        if (progress == 0) {
            $(control).find('.my-progress').css("background-color", "lightgrey");
            $(control).find('.my-progress-value').css("background-color", "lightgrey");
        } else if (progress < 50) {
            $(control).find('.my-progress').css("background-color", "red");
        } else {
            $(control).find('.my-progress').css("background-color", "green");
        }
    }

Answer 2

这是您更新的代码

public String myHandler(KinesisEvent kinesisEvent,Context context)
{
    int singleRecord=0;
    long starttime=System.currentTimeMillis();
    //LambdaLogger lambdaLogger=context.getLogger();
     for(KinesisEventRecord rec : kinesisEvent.getRecords())
     {
         singleRecord=0;
         System.out.println("Kinesis Record inside is:"+new String(rec.getKinesis().getData().array()));
         //count++;
         singleRecord++;
         //  System.out.println(new String(rec.getKinesis().getData().array()));
     }
     count=count+singleRecord;
     long endtime=System.currentTimeMillis();
     long totaltime = endtime-starttime;
     time=time+totaltime;
     System.out.println("Time required to execute single Lambda function for "+singleRecord+" records is"+" :: "+totaltime+" milliseconds");
     System.out.println("Total time required to execute Lambda function for "+count+" records is"+" :: "+time+" milliseconds");
     return null;
}

$('.my-progress').each(function(index) {
  var progress = $(this).find('.my-progress-value').html();
  $(this).css("width", progress);
  if (parseInt(progress) == 0) {
    $(this).css("background-color", "lightgrey");
    $(this).css("background-color", "lightgrey");
  } else if (parseInt(progress) < 50) {
    $(this).css("background-color", "red");
  } else {
    $(this).css("background-color", "green");
  }
});

.my-progress-value {
  background-color: deepskyblue;
  color: white;
  border-radius: 100%;
  font-size: 7pt;
  padding: 8px 5px 8px 5px;
  position: absolute;
  margin-top: -11px;
}
.my-progress-container {
  position: relative;
  width: 200px;
  padding-top: 4px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.my-progress {
  background-color: deepskyblue;
  width: 60%;
  height: 8px;
  text-align: right;
}

这是Updated Fiddle

Answer 3

更改功能

$(document).ready(function () {
        $(".my-progress-value").each(function () {     // loop thru all .gains
            var progress = $(this).text();
            $(this).parent().css("width", progress + "%");
            if (progress < 30) {
                $(this).parent().css("background", "lightgrey");

            } else if (progress < 50) {
                $(this).parent().css("background", "red");
            } else {
                $(this).parent().css("background", "green");

            }
            $(this).html(progress + "%");
        });
    });

HTML CODE

<div class="col-md-3" id="1">
                <div class="my-progress-container">
                    <div class="my-progress">
                        <span class="my-progress-value">20</span>
                    </div>
                </div>
            </div>
        <div class="col-md-3" id="2">
            <div class="my-progress-container">
                <div class="my-progress">
                    <span class="my-progress-value">49</span>
                </div>
            </div>
        </div>
        <div class="col-md-3" id="3">
            <div class="my-progress-container">
                <div class="my-progress">
                    <span class="my-progress-value">100</span>
                </div>
            </div>
        </div>

CSS

.my-progress-value {
            background-color: deepskyblue;
            color: white;
            border-radius: 100%;
            font-size: 7pt;
            padding: 8px 5px 8px 5px;
            position: absolute;
            margin-top: -11px;
        }

    .my-progress-container {
        position: absolute;
        width: 200px;
        padding-top: 4px;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .my-progress {
        background-color: deepskyblue;
        width: 60%;
        height: 8px;
        text-align: right;
    }

http://jsfiddle.net/e8fqLdfy/1/

如何根据值实现此进度条

3 个答案: