css 圆形进度条,在单击按钮时更改笔划和值

fnatzsnv  于 2023-03-09  发布在  其他
关注(0)|答案(1)|浏览(134)

我想更改单击按钮时进度条的百分比。
我想添加多个按钮来更改百分比。
我是新的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>
k2fxgqgv

k2fxgqgv1#

通过JS计算stroke-dashoffset需要少量的数学运算,但是一旦你有了这个函数,就可以给你需要的特定百分比的按钮添加监听器,然后相应地更新SVG元素。但是还有其他的方法可以做到这一点。2其他的样式只是为了让新元素在视觉上与原始的HTML分离

//Helper function to get circumference
const calculateCircumference = (radius) => {
  return (2 * Math.PI * radius).toFixed(2);
};

//Get stroke-dasharray total using circumference math
const circleEl = document.querySelector('.progressbar__svg-circle');
let r = circleEl.getAttribute('r')
let c = calculateCircumference(r)

// Listen for button click, get progress data attribute, calculate new dash-offset and set style for the dynamic <circle> element
let dynamicProgressCirc = document.querySelector('.dynamic-progressbar-circle')
let progressbarBtns = document.querySelectorAll('.progressbar-btn')
progressbarBtns.forEach((btn) => {
  btn.addEventListener('click', event => {
    let btnProgress = btn.getAttribute('data-progress')
    let newProgress = (c - (c * (btnProgress/100)))
    dynamicProgressCirc.style.strokeDashoffset = newProgress
  })
})
* {
  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: 345.58;
  stroke-dashoffset: 345.58;
  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: 17.279;
  }
}
@keyframes anim_circle-business-con {
  to {
    stroke-dashoffset: 51.837
  }
}
@keyframes anim_circle-capex {
  to {
    stroke-dashoffset: 103.674
  }
}
@keyframes anim_circle-child-part-inv {
  to {
    stroke-dashoffset: 317.933
  }
}

/* Dynamic Progressbar CSS */
.dynamic-progressbar-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #EAEEF2;
}
.dynamic-progressbar-container .progressbar__svg-circle {
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 5px #000);
  transition: 0.3s ease;
}
.buttons-container {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
}
.progressbar-btn {
  cursor: pointer;
  background: #FFF;
  color: #000;
  font-size: 1.5rem;
  width: 4rem;
  border-radius: 3px;
  transition: 0.15s ease;
}
.progressbar-btn:hover,
.progressbar-btn:focus,
.progressbar-btn:active {
  background: #194B74;
  color: #FFF;
}
<html>

<body>
  <div class="dynamic-progressbar-container">
    <svg class="progressbar__svg">
      <circle cx="100" cy="60" r="55" class="progressbar__svg-circle dynamic-progressbar-circle"> </circle>
    </svg>
    <div class="buttons-container">
      <button class="progressbar-btn" data-progress="95">95%</button>
      <button class="progressbar-btn" data-progress="85">85%</button>
      <button class="progressbar-btn" data-progress="70">70%</button>
      <button class="progressbar-btn" data-progress="7">8%</button>
    </div>
  </div>
  <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>

相关问题