时间戳

首页 > 解决方案 > 如何让边框像进度条一样向前移动（react.js）

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

问题描述

我希望每分钟都填满我的边界，以便在 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。通常输出是大量错误

标签： javascriptcssborder

解决方案

width修改a是不可能的，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

推荐阅读