javascript - 堆叠式进度条-6ren

javascript - 堆叠式进度条

转载作者：行者123 更新时间：2023-11-28 00:57:32

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

<!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>

因此，主要目标是做到这一点，如果我选择“在所有系统上实现和自动化”，它会移动绿色条，如果我选择“在所有系统上实现”，它会在右侧移动一个橙色条绿色酒吧。 (绿色条必须在第一位)如果我选择“在某些系统上实现”，它会将黄色条移动到橙色条的右侧，等等。

谢谢!

最佳答案

好吧，没有人会禁止您查看 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">

关于javascript - 堆叠式进度条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44033882/

文章推荐： html - 将外部样式表链接到特定的 HTML 元素

文章推荐： html - 具有固定高度的响应式图像网格(下面的 1 和 3)

文章推荐： javascript - 链接字体不会改变

文章推荐： html - Ruby On Rails | format.html/json 是做什么用的？

ios - UICollectionView 堆叠
如何将单元格(在 UICollectionView 中)堆叠在一起？ Feedly 做得很好，我想知道是否可以以某种方式操纵 zIndex 属性以在 UICollectionView 的导航中获得类似
css 堆叠 div
我正在尝试堆叠 div 以使用和图像显示顶部和底部淡入淡出。外部 div(“旋转器”)有一个背景图像，该图像在顶部和底部具有渐变，在中间是透明的。在中间，我想显示内容或图像，并将外部 div 背景图
CSS 堆叠 Div
我有两个动画(在 CSS 中)div，它们围绕彼此旋转。我想在中间为文本添加另一个 div。但是，如果我将 div 放在这两个中的任何一个中，它就会与父 div 一起设置动画。如果我尝试定位它，它就位
Android 堆叠 View
图中显示了我想要的 View 。最佳答案为此你可以采取 FrameLayout . 例如 - 1: 更新: 例如 - 2:精湛的示例和技巧，可在此处找到:http://w
tensorflow - 堆叠 LSTM 的初始状态结构
使用 tf.keras.layers.RNN 的 TensorFlow (1.13.1) 中多层/堆叠 RNN 的初始状态所需的结构是什么？ API？我尝试了以下方法: lstm_cell_size
r - ggplot2 - 堆叠/躲避条形图
我在制作条形图时遇到问题，其中 y 轴不是计数，而是变量的值。我使用stat=identity，这对于一个变量来说很好。但是，如果我有两个变量并且想要创建堆叠/闪避条形图怎么办？我这里有一些模拟数
r - 对路径列表中的栅格进行分组/堆叠，并提取每组的最小值
我有一个栅格路径列表(rplist = 912 raster pathe for 912 rasters (19yeras)(12months)(4weeks))如下: [1] "C:/Users
php - 堆叠 PHP 代码？
我已经完成了一个项目，现在需要更改该项目，以便在变量位于数组中时显示一个 div，如果变量不在数组中则显示另一个 div。通常我会这么做祝你愉快，但是我得到的代码已经包含大量 html 和 ph
r - ggplot2 - 堆叠/躲避条形图
我在制作条形图时遇到问题，其中 y 轴不是计数，而是来自变量的值。我使用 stat=identity，这对一个变量来说没问题。但是，如果我有两个变量并想创建一个堆叠/闪避条形图怎么办？我这里有一些
r - 对路径列表中的栅格进行分组/堆叠，并提取每组的最小值
我有一个栅格路径列表(rplist = 912 raster pathe for 912 rasters (19yeras)(12months)(4weeks))如下: [1] "C:/Users
java - 标签重叠(堆叠)有问题
我正在尝试将分数和耗时标签(scoreAndTimer)添加到我已经工作的贪吃蛇游戏代码中。问题是当我使用 ScoreAndTimer.setText(); 时它与之前的文本堆叠在一起。我尝试 se
gtk - 堆叠 GTK+ 小部件
有没有办法将 GTK+ 小部件放入堆栈中？ IE。在标签上放置一个按钮，使按钮覆盖标签的一部分。最佳答案您可以使用 GtkFixed 作为布局。这将允许您控制子小部件的确切位置，并且它们可以重叠。
java - 堆叠 ASM 访问者的正确方法是什么？
我有以下代码: for (Map.Entry e : classes.entrySet()) { ClassReader reader = e.getValue(); ClassWri
r - 根据ggplot2中类别的比例调整(堆叠)条宽
我正在尝试根据类别的计数(或比例)更改我的(堆叠)条宽，作为示例，我使用了钻石数据集。我想根据每个类别(变量 cut )的频率看到不同的宽度。我首先创建了一个变量 cut_prop然后用下面的代码绘制
c# - DispatcherTimer 堆叠 - UWP
我目前正在 UWP 中开展一个项目，我有一个 CommandBar，我想将其从 Hidden 变为 Compact 如果鼠标移动。五秒钟后(如果鼠标不移动)CommandBar 应该再次返回到Hidd
ios - 动画期间 subview 堆叠
我是 Swift 新手，并尝试在学习过程中编写一本交互式书籍。我使用 CATransform3DMakeRotation 创建了封面效果。正如您所看到的，当我堆叠 View 时，问题就出现了。如果我
android - 使用相机快照防止多项 Activity 堆叠
我已经阅读了 finish(); 命令和 FLAG_ACTIVITY_CLEAR_TOP 命令，还查看了 Common Ware 关于终止应用程序的回答，但我不确定如何放置这进入我的应用程序。基本上
c++ - 堆叠 Cg 着色器
在我的引擎中，我从成对的顶点/像素着色器文件中加载 Cg 着色器。我希望能够堆叠着色器以组合它们(照明+ Material 等)。除了将着色器分解为单独的函数然后从中创建单个着色器脚本字符串之外，您是
java - 相同的 Activity 堆叠
我有一个 Activity 应该自行完成并关闭应用程序。现在，在某些情况下，根据用户导航到 Activity 的方式而变化， Activity 正在堆叠。当 Activity 堆积时，然后调用 fin
python - 堆叠 CSV 文件的最快方法
我有 10 个具有完全相同的列和数据类型的 csv 文件。什么是最快/最有效的堆叠方式？ CSV1: col1 | col2 | col3 1 | 'a' | 0.1 2 | 'b'

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 堆叠式进度条