个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我已经编写了当我点击一个特定的里程碑时进度条会动态增加的代码。
当我点击一个里程碑时，我希望颜色保持红色，但我无法将 onclick 方法添加到每个 div。
我已经更新了代码，我已经在一行中插入了列，这样我想在第一列中保留进度条，但是点过多了。谁能帮忙？
var mileStones = Array.from(document.querySelectorAll('.primary-color'));
mileStones.forEach(elem => {
elem.onclick = function() {
const current = this;
let flag = false;
document.getElementById('pp').style.width = current.dataset.width + '%';
mileStones.forEach(elem => {
elem.classList.add('active');
if (flag) elem.classList.remove('active');
if (current.id === elem.id) flag = true;
});
}
});.progress {
width: 100%;
height: 6px;
margin-top: 50px;
}
.progress-bar {
width: 50%;
background-color: #00A2DB;
}
#one,
#two,
#three,
#four,
#five {
position: absolute;
margin-top: -8px;
z-index: 1;
height: 20px;
width: 20px;
border-radius: 25px;
}
#one,
.percent {
left: 0%;
}
#two,
.percent1 {
left: 25%;
}
#three,
.percent2 {
left: 50%;
}
#four,
.percent3 {
left: 75%;
}
#five,
.percent4 {
left: 100%;
}
.primary-color {
background-color: pink;
}
.primary-color:active {
background-color: red;
}<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>
<div class="row">
<div class="col-9">
<p>Business case completion:</p>
<div class="progress" id="progress">
<div class="primary-color" id="one" data-width="0"></div>
<div class="primary-color" id="two" data-width="25"></div>
<div class="primary-color" id="three" data-width="50"></div>
<div class="primary-color" id="four" data-width="75"></div>
<div class="primary-color" id="five" data-width="100"></div>
<div class="progress-bar" id="pp" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" onclick="progressBarTest()"></div>
</div>
</div>
<div class="col-3 align-self-end">
<p class="primary1"> ID 453</p>
</div>
</div>最佳答案
您可以创建一个通用方法来为每一英里设置 onclick，您可以使用“active”类来维护事件样式，您还可以受益于数据属性以使函数动态化..
版本要保留点击之前的里程碑，您可以使用标志。为了实现这一目标。
var mileStones = Array.from(document.querySelectorAll('.primary-color'));
mileStones.forEach(elem => {
elem.onclick = function() {
const current = this;
let flag = false;
document.getElementById('pp').style.width = current.dataset.width+'%';
mileStones.forEach(elem =>{
elem.classList.add('active');
if(flag) elem.classList.remove('active');
if(current.id === elem.id) flag = true;
});
}
});.progress {
width: 100%;
height: 6px;
}
.progress-bar {
width: 50%;
background-color: #00A2DB;
}
#one,
#two,
#three,
#four,
#five {
position: absolute;
margin-top: -8px;
z-index: 1;
height: 20px;
width: 20px;
border-radius: 25px;
}
#one {
left: 0%;
}
#two {
left: 25%;
}
#three {
left: 50%;
}
#four {
left: 75%;
}
#five {
left: 100%;
}
.primary-color {
background-color: pink;
}
.primary-color:active, .active {
background-color: red;
}<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>
<div class="progress">
<div class="primary-color" id="one" data-width="0"></div>
<div class="two primary-color" id="two" data-width="25"></div>
<div class="three primary-color" id="three" data-width="50"></div>
<div class="four primary-color" id="four" data-width="75"></div>
<div class="five primary-color" id="five" data-width="100"></div>
<div class="progress-bar" id="pp" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" onclick="progressBarTest()"></div>
</div>关于javascript - 作为里程碑的进度条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50292602/
25
4
0
我正在开发一个在 gridview 中显示数据表内容的网页。而且，还有一个名为“发送到 Excel”的按钮。如果用户单击此按钮，该程序将开始生成报告(将数据表内容写入 excel 文件)。完成后，会出
理论:我在开始时做出了大约 100 个 promise ，然后使用 Promise.all() 解决它们。 这 100 个 promise 中的每一个依次进行一些异步 REST 调用，其响应可能主要不
在将文件添加到 python 中的 tar 存档时，是否有任何库可以显示进度，或者可以扩展 tarfile 模块的功能来执行此操作？ 在理想情况下，我想展示 tar 创建的总体进度以及关于何时完成的预
有没有办法在 Xcode 中更改进度 View 栏的高度？ 我正在使用 Xcode 4.3 并且需要一个垂直进度条。我旋转了栏，但现在无法更改高度并且显示为一个圆圈。 还有一种更有效的旋转进度条的方法
您好，我想在栏按钮项上制作未确定的进度 View 。完成后我想让它隐藏，但 hidden() 方法没有像 disabled(Bool) 这样的参数。任务完成后如何隐藏进度 View ？ 这就是我要的
我有一个管理员控制的功能(导入数据库)可能需要一些时间才能完成，所以我想在这段时间内向用户显示一些反馈 - 例如进度条，或者只是一些消息。即使在长时间的 Action 中分部分发送页面也足够了。 在
我是一个进步的菜鸟，实际上在基本 block 方面有问题。 下面的问题是在我的 if else 语句中。它在 if, then, else then 时工作正常，但是当我想将多个语句放入 if 部分时
我有一个来自 rsync 命令的日志文件，其中有进度。运行此进度时，会更新同一行上的显示信息。当我捕获此命令的输出时，我得到一个在终端上使用 cat 正常显示的文件(重播所有退格键和重新编辑)但我希望
我需要处理一些数据，每 5-10 秒显示一个进度(我以 % 显示进度，但我也更新了一些图表)。我想在没有多线程的情况下做到这一点。 循环可能相当大。它可以从数百万开始，可以高达数十亿。 我可以使用 G
我正在致力于使用 PHP、HTML 和 JavaScript 制作半直播互联网 channel 。 您可以在此处查看演示:http://mariocreative.host/chanelko/inde
我实际上正在使用图像为“点点点”进度设置动画。我想通过使用下面的代码来使用不透明度。 动画将持续 3 秒，有没有更简单的动画方法？ 最佳答案 这是一个快速版本，它会在控
我写了这个程序，它返回用户插入的最大整数。现在，我希望程序返回第二大整数。我创建了一个新变量(称为“状态”)，该变量应该在每次循环重复时增加 1 个单位。然后，在中断条件发生后，我将在状态变量中后退
我正在制作一个需要保存进度的java游戏。但我不想让外部文件保存进度(像《我的世界》这样的游戏有一个存储文件的“保存”目录)。所以基本上我希望它存储一些数据，当用户退出并再次返回时可以检索这些数据。比
我正在使用 forEach_root 方法在 Android 上计算图像。 RenderScript RS=RenderScript.create(context); Allocation inPix
我希望这个进度 View 在完成后基本上“重置”。 尝试将计数重置为 0，它确实重置了，但是对于每次重置，计时器只会变得越来越快。 .h @property (nonatomic, strong) N
我不确定这是否可能。当您单击“提交”按钮时，似乎有一种方法可以做到这一点。 private Button getButton(String id) { return new AjaxButto
我找不到关于如何在迭代循环时更新 UIProgressbar 进度的明确答案，例如: for (int i=0;i
我正在尝试在 Xcode 中翻转 UIProgressView 180，同时我正在尝试缩放进度 View 。在我添加翻转之前缩放效果很好，然后缩放不再起作用。有什么建议么？谢谢! [self.seco
我目前正在通过评估 prepareForSegue 中的 segue.identifier 动态加载新 View : - (void)prepareForSegue:(UIStoryboardSegu
当任意进程发生时，我需要在屏幕上为用户提供状态。我无法知道需要多长时间。我怎样才能永远增加 progressView (当它接近 1 时它会减慢)。 最佳答案 This如果您愿意更换进度 View ，
我是一名优秀的程序员,十分优秀！