进度条根据值更改颜色

Question

我有一个 progress_profile 字段，我在 mysql 中输入从 1 到 100 的值，

$progress = $row['progress_profile'];

在引导条码中我输入了这段代码

<p class="bioheading">Profile Completed Progess</p>
<div class="progress">

<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: <?php echo $progress; ?>%;"><?php echo $progress . '% Profile Completed'; ?>
</div>
</div>

我想根据 progress_profile 中输入的值， 更改栏的颜色

例子”

从 1 到 49 红色

从 50 到 90 的蓝色

从 91 到 100 的绿色

谢谢

Answer 1

<?php
$progress = $row['progress_profile'];
$color = '';
if ($progress > 90) {
    $color = 'green';
}else if($progress >= 50){
    $color = 'blue';
}else{
    $color = 'red';
}
?>

在进度条前加上这个sn-p！

在您的进度条代码中，将 div 的样式 background-color 设置为 $color，如图所示。

因此您的代码应该是...

<p class="bioheading">Profile Completed Progess</p>
<div class="progress">

<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: <?php echo $progress; ?>%;background-color: <?php echo $color; ?>"><?php echo $progress . '% Profile Completed'; ?>
</div>
</div>

给你的一个建议：

您应该以这种方式实现它，而不是手动设置颜色， 通过使用引导标准颜色！

变化：

片段：

<?php
$progress = $row['progress_profile'];
$color = 'bg-';
if ($progress > 90) {
    $color .= 'success';
}else if($progress >= 50){
    $color .= 'primary';
}else{
    $color .= 'danger';
}

?>

进度条码：

<p class="bioheading">Profile Completed Progess</p>
    <div class="progress ">

    <div class="progress-bar <?php echo $color ?>" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: <?php echo $progress; ?>%;"><?php echo $progress . '% Profile Completed'; ?>
    </div>
    </div>
</body>

注意：你可以添加sn-p inline，但要在$progress['progress_profile']之后添加。