通过Javascript处理进度条 [英] Progress bar handling via Javascript
本文介绍了通过Javascript处理进度条的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
下面是演示，我可以使用javascript移动中间指针.但是我无法一开始就移动连接它的线.似乎我无法将width属性赋予进度的:after元素.我在这里可以实现我的目标.请帮忙
Below is the demo where I am able to move the middle pointer using javascript. But I am unable to move the line which connects it from the start. Seems like I cannot give width property to :after element of progress. What can I do here to achieve my goal. Please help
function myFunction(){
var middleDot = document.querySelector('.is-active');
var textinput = document.querySelector('#textinput');
middleDot.style.left = textinput.value+'%'
}
.progress-wrapper {
margin: 0 32px;
}
.progress {
padding: 40px 0;
position: relative;
width:100%
}
.progress::before,
.progress::after {
content: "";
background-color: #dfe3e4;
height: 5px;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
}
.progress::before {
width: 100%;
}
.progress::after {
width: 50%;
background: #5D50DB;
}
.progress li {
position: relative;
list-style: none;
z-index: 1;
display: inline-block;
text-align:center;
}
.progress li:first-child {
left: 0;
}
.progress li.is-active {
left: 50%;
position: absolute;
}
.progress li:last-child {
float: right;
}
.progress > li:before {
content: "";
display: block;
margin: 0 auto;
background: #dfe3e4;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
border-radius: 100%;
position: relative;
z-index: 1000;
}
.progress li:first-child:before {
background: #5D50DB;
}
.progress li.is-active:before {
background: #5D50DB;
}
.progress li span {
position: absolute;
bottom: -20px;
width: max-content;
left: 50%;
transform: translateX(-50%);
}
.is-active span{
top: -20px;;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<input type="text" id="textinput" value=50 onkeyup="myFunction()">
<div class="progress-wrapper">
<ol class="progress">
<li class="is-complete" data-step="1"><span>Place A</span></li>
<li class="is-active" data-step="2"><span>Place B</span></li>
<li data-step="3" class="progress__last"><span>Place C</span></li>
</ol>
</div>
</body>
</html>
推荐答案
我认为很难直接设置:after元素的样式，但是您可以添加新的样式规则以覆盖它的width属性:
I think it's hard to directly set the style of :after element, but you can add a new style rule to overwrite it's width property:
更新:修复了输入值为100时的错误.
update: fix the bug when input value is 100.
function myFunction(){
var middleDot = document.querySelector('.is-active');
var textinput = document.querySelector('#textinput');
middleDot.style.left = textinput.value+'%';
document.styleSheets[0].addRule('.progress::after','width:' + textinput.value+'% !important');
}
.progress-wrapper {
margin: 0 32px;
}
.progress {
padding: 40px 0;
position: relative;
width:100%;
height: 20px;/*set this height to the value as the pointers' height*/
}
.progress::before,
.progress::after {
content: "";
background-color: #dfe3e4;
height: 5px;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
}
.progress::before {
width: 100%;
}
.progress::after {
width: 50%;
background: #ff0000;
}
.progress li {
position: relative;
list-style: none;
z-index: 1;
display: inline-block;
text-align:center;
}
.progress li:first-child {
left: 0;
}
.progress li.is-active {
left: 50%;
z-index: 1001; /*need to be larger to overlap last one*/
position: absolute;
}
.progress li:last-child {
float: right;
postion: relative;
margin-right: -20px;/*give it a margin-right to let it overflow ol element too*/
}
.progress > li:before {
content: "";
display: block;
margin: 0 auto;
background: #dfe3e4;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
border-radius: 100%;
position: relative;
z-index: 1000;
}
.progress li:first-child:before {
background: #5D50DB;
}
.progress li.is-active:before {
background: #5D50DB;
}
.progress li span {
position: absolute;
bottom: -20px;
width: max-content;
left: 50%;
transform: translateX(-50%);
}
.is-active span{
top: -20px;;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<input type="text" id="textinput" value=50 onkeyup="myFunction()">
<div class="progress-wrapper">
<ol class="progress">
<li class="is-complete" data-step="1"><span>Place A</span></li>
<li class="is-active" data-step="2"><span>Place B</span></li>
<li data-step="3" class="progress__last"><span>Place C</span></li>
</ol>
</div>
</body>
</html>
这篇关于通过Javascript处理进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
