Question

所以我现在的进度条很棒，但是我希望通过添加堆叠进度条来改进它。我的目标是，当我点击一个选项时它会将进度条移动一定数量，我现在可以做。但我希望它能像这样制作进度条：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="AuditScriptAssesmentToolTest.css">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


  <script src="~/Scripts/jquery-1.12.4.min.js"></script>

 
    <!--************************************************************************ -->
 
<!-- **********************************************************************************************************************************************-->
	
<div id="myProgress">
			<progress id='progressBar' max='100' value='0' style="background-color: red; font-family: Impact, Charcoal, sans-serif;"" ><strong></strong></progress>
		</div>
	</div>
	
	</head>

	<body>
	
<main class="mainarea">
	
<br>
<br>
<br>
<!-- **********************************************1111111111111111111111111********************************************************-->

		<div id="criticalSecurityControlForms">
        <form action="/action_page.php">
            <select id="FirstQOne" name="firstQOne" onchange="this.className=this.options[this.selectedIndex].className" class="whiteselected">
                <option class="whiteselected" disabled selected="selected" value="0">Select an Implementation</option>
                <option class="Not" value="0">Not Implemented</option>
                <option class="ImplementedOnSome" value="10">Implemented on Some Systems</option>
                <option class="All" value="20">Implemented on All Systems</option>
                <option class="AllAndAuto" value="30">Implemented and Automated on All Systems</option>
            </select>
        </form>
    </div>

		<br>

			
		<div id="criticalSecurityControlForms">
        <form action="/action_page.php">
            <select id="FirstQTwo" name="firstQOne" onchange="this.className=this.options[this.selectedIndex].className" class="whiteselected">
                <option class="whiteselected" disabled selected="selected" value="0">Select an Implementation</option>
                <option class="Not" value="0">Not Implemented</option>
                <option class="ImplementedOnSome" value="10">Implemented on Some Systems</option>
                <option class="All" value="20">Implemented on All Systems</option>
                <option class="AllAndAuto" value="30">Implemented and Automated on All Systems</option>
            </select>
        </form>
    </div>
		<br>
	</div>
	<!-- ********************************************222222222222222222222*********************************************************-->


		<div id="criticalSecurityControlForms">
        <form action="/action_page.php">
            <select id="FirstQThree" name="firstQ" onchange="this.className=this.options[this.selectedIndex].className" class="whiteselected">
                <option class="whiteselected" disabled selected="selected" value="0">Select an Implementation</option>
                <option class="Not" value="0">Not Implemented</option>
                <option class="ImplementedOnSome" value="10">Implemented on Some Systems</option>
                <option class="All" value="20">Implemented on All Systems</option>
                <option class="AllAndAuto" value="30">Implemented and Automated on All Systems</option>
            </select>
        </form>
    </div>
    </main>

  <script>
 function update_progressbar() {
    var opt1 = parseFloat( $('option:selected', $('#FirstQOne')).val() );
    var opt2 = parseFloat( $('option:selected', $('#FirstQTwo')).val() );
    var opt3 = parseFloat( $('option:selected', $('#FirstQThree')).val() );
    var opt4 = parseFloat( $('option:selected', $('#FirstQFour')).val() );
    var opt5 = parseFloat( $('option:selected', $('#FirstQFive')).val() );
    var opt6 = parseFloat( $('option:selected', $('#FirstQSix')).val() );
    var opt7 = parseFloat( $('option:selected', $('#FirstQSeven')).val() );
    var opt8 = parseFloat( $('option:selected', $('#FirstQEight')).val() );

      var total = isNaN( opt1 ) ? 0 : opt1;
    if ( !isNaN( opt2 ) ) {
        total += opt2;
    }
    if ( !isNaN( opt3 ) ) {
        total += opt3;
    }
    if ( !isNaN( opt4 ) ) {
        total += opt4;
    }
    if ( !isNaN( opt5 ) ) {
        total += opt5;
    }
    if ( !isNaN( opt6 ) ) {
        total += opt6;
    }
    if ( !isNaN( opt7 ) ) {
        total += opt7;
    }
    if ( !isNaN( opt8 ) ) {
        total += opt8;
    }
    $("#progressBar").prop( 'value', total )
}

$('#FirstQOne').on( 'change', update_progressbar );
$('#FirstQTwo').on( 'change', update_progressbar );
$('#FirstQThree').on( 'change', update_progressbar );
$('#FirstQFour').on( 'change', update_progressbar );
$('#FirstQFive').on( 'change', update_progressbar );
$('#FirstQSix').on( 'change', update_progressbar );
$('#FirstQSeven').on( 'change', update_progressbar );
$('#FirstQEight').on( 'change', update_progressbar );
  </script>
</body>
</html>

所以主要目标是如果我选择“在所有系统上实施并自动化”，它会将条形绿色移动，如果我选择“在所有系统上实施”，它将移动橙色条到右边的绿色酒吧。（绿色条需要先行）如果我选择“在某些系统上实施”它会在橙色条的右侧移动一个黄色条，等等。

谢谢！

Answer 1

好吧，没有人禁止你看到bootstrap实现：multiple-bars

const [...barEls] = document.querySelectorAll(`.progress > .progress-bar`);// collection to array

function updateProgress(e) {
    let value = e.target.value;
    const maxVals = [33.33, 33.33, 33.33];// max width values of elements

    for (let i = 0; i < barEls.length; i++) {
        if (value > maxVals[i]) {
            updateElWidth(barEls[i], maxVals[i]);
            value -= maxVals[i];
        } else {
            updateElWidth(barEls[i], value);
            barEls.slice(i + 1).forEach(bar => updateElWidth(bar, 0));// nullify rest bars
            break;
        }
    }

    function updateElWidth(el, width) {
        el.style.width = `${width}%`;
    }
}

const rangeEl = document.getElementById(`range`);
[`input`, `change`].forEach(event => rangeEl.addEventListener(event, updateProgress));

.progress {
    height: 1.5rem;
    overflow: hidden;
    background-color: grey;
    border-radius: .25rem;
}
.progress-bar {
    display: inline-block;
    height: 100%;
}
.bg-weak {
    background-color: #d9534f;
}
.bg-good {
    background-color: #f0ad4e!important;
}
.bg-strong {
    background-color: #5cb85c!important;
}

<div id="progress" class="progress">
  <div class="progress-bar bg-weak" style="width: 33.33%"></div
  ><div class="progress-bar bg-good" style="width: 33.33%"></div
  ><div class="progress-bar bg-strong" style="width: 33.33%"></div>
</div>

<input type="range" id="range" min="0" max="100">

堆积进度条

1 个答案: