我想更改单击按钮时进度条的百分比。
我想添加多个按钮来更改百分比。
我是新的javascript编码的酒吧被设置为一个特定的值,我怎么能改变它不同的不同的值。我想改变进度条的百分比,因为按钮被点击。
我想添加多个按钮来更改百分比。
我是新的javascript编码的酒吧被设置为一个特定的值,我怎么能改变它不同的不同值。
<html><body>
<style>
* {
box-sizing: border-box;
}
.container {
display: flex;
justify-content: center;
align-items: center;
background-color: #0d0d0d;
width:700px;
height:220;
}
.container__progressbars {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
min-width: 170px;
width: 100%;
min-height: 100%;
}
}
.progressbar {
position: relative;
width: 170px;
height: 270px;
transform: rotate(-90deg);
}
.progressbar__svg {
position: relative;
width: 100%;
height: 100%;
}
.progressbar__svg-circle {
width: 100%;
height: 100%;
fill: none;
stroke-width: 10;
stroke-dasharray: 440;
stroke-dashoffset: 440;
stroke: #fff;
stroke-linecap: round;
transform: translate(3px, 3px);
}
.shadow-npd {
filter: drop-shadow(0 0 5px #f63);
}
.shadow-business-con {
filter: drop-shadow(0 0 5px #3bf);
}
.shadow-capex {
filter: drop-shadow(0 0 5px #f3f);
}
.shadow-child-part-inv {
filter: drop-shadow(0 0 5px #ff3);
}
.circle-npd {
animation: anim_circle-npd 1s ease-in-out forwards;
}
.circle-business-con {
animation: anim_circle-business-con 1s ease-in-out forwards;
}
.circle-capex {
animation: anim_circle-capex 1s ease-in-out forwards;
}
.circle-child-part-inv {
animation: anim_circle-child-part-inv 1s ease-in-out forwards;
}
.progressbar__text {
position: absolute;
top: 50%;
left: 50%;
padding: 0.25em 0.5em;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
border-radius: 0.25em;
transform: translate(-10%, -110%) rotate(10deg);
}
@keyframes anim_circle-npd {
to {
stroke-dashoffset: 132;
}
}
@keyframes anim_circle-business-con {
to {
stroke-dashoffset: 142;
}
}
@keyframes anim_circle-capex {
to {
stroke-dashoffset: 155;
}
}
@keyframes anim_circle-child-part-inv {
to {
stroke-dashoffset: 404.8;
}
}
}
</style>
<div class="container">
<div class="container__progressbars">
<div class="progressbar">
<svg class="progressbar__svg">
<circle cx=" 100" cy="60" r="55" class="progressbar__svg-circle circle-npd shadow-npd"> </circle>
</svg>
<span class="progressbar__text shadow-npd">95%</span>
<span class="progressbar__topic shadow-npd"><style></style> NPD Revenue</span>
</div>
<div class="progressbar">
<svg class="progressbar__svg">
<circle cx="100" cy="60" r="55" class="progressbar__svg-circle circle-business-con shadow-business-con"> </circle>
</svg>
<span class="progressbar__text shadow-business-con">85%</span>
<span class="progressbar__topic shadow-business-con">Business Conversion</span>
</div>
<div class="progressbar">
<svg class="progressbar__svg">
<circle cx="100" cy="60" r="55" class="progressbar__svg-circle circle-capex shadow-capex"> </circle>
</svg>
<span class="progressbar__text shadow-capex">70%</span>
<span class="progressbar__topic shadow-capex">................ Capex</span>
</div>
<div class="progressbar">
<svg class="progressbar__svg">
<circle cx="100" cy="60" r="55" class="progressbar__svg-circle circle-child-part-inv shadow-child-part-inv"> </circle>
</svg>
<span class="progressbar__text shadow-child-part-inv">8%</span>
<span class="progressbar__topic shadow-child-part-inv"> Child Part Inventory</span>
</div>
</div>
</div>
</body>
</html>
1条答案
按热度按时间k2fxgqgv1#
通过JS计算
stroke-dashoffset
需要少量的数学运算,但是一旦你有了这个函数,就可以给你需要的特定百分比的按钮添加监听器,然后相应地更新SVG
元素。但是还有其他的方法可以做到这一点。2其他的样式只是为了让新元素在视觉上与原始的HTML分离