Question

我希望每分钟填充一次边界，以便60分钟后边界已满，然后重新开始。

这是我对react.js的练习我已经尝试使用.getMinutes（）创建变量。我现在可以花费当前的分钟数，但是我不知道如何每分钟能填满我的边界

<body>
        <div className="progress_container">
            <div className="progressbar">
                <p className="innertext">
                    <h2>{playtime + '/60'}</h2>
                    min
                </p>
            </div>
        </div>
</body>

.progress_container{
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: white;
    position: absolute;
    right: calc(100% - 600px);
    left: auto;
    bottom: calc(100% - 350px);

}
.progressbar{
    width: 190px;
    height: 190px;
    border-radius: 50%;
    border: 30px solid orange;

}
.progressbar:after{
    content: '';

}
p{
    color: #000;
    font-size: 16px;
    position: relative;
    top: calc(95px - 3*16px);
}

let pb = document.getElementsByClassName('progressbar');

    var date = new Date (Date.now());
    const playtime = date.getMinutes();

我试图寻找其他解决方案，但是它不适用于react.js。输出通常是大量的错误

Answer 1

无法修改width中的border，但是您可以创建如下滚动条：

.scrollbar-ctn {
  width: 100%;
  height: 5px;
  background-color: #999;
}

.scrollbar {
  height: 100%;
  width: 30%;
  background-color: blue;
}

<div class="scrollbar-ctn">
  <div class="scrollbar"></div>
</div>

然后您可以简单地用width更新.scrollbar的百分比js

如何使边框像进度条（react.js）一样向前移动

1 个答案: