如何使用时间数据制作进度条？
如何使用时间数据制作进度条？
提问于 2019-10-17 02:47:38
我想做一个进度条，这个值将是一个动作的开始和结束之间的时间。就像示例(我从下午1点开始到下午3点)，我想做一些类似的事情，看看两个小时之间的进展。
我从一个具有随机值的简单进度栏开始：
import React from 'react';
import './ProgressBar.css'
const ProgressBar = ({width, progressColor}) => (
<div>
<div className="meter" style={{background: progressColor}}>
<span style={{width: width +'%', background: progressColor}} className="progress"/>
</div>
</div>
);
export default ProgressBar和
import React, {Component} from 'react';
import './index.css';
import ProgressBar from "./ProgressBar";
import Clock from 'react-live-clock';
class App extends Component {
constructor(props) {
super(props);
this.state = {
width: 20,
clock: ''
}
}
render() {
return (
<div>
<div className="">
<ProgressBar width={this.state.width} progressColor={"#1725b5"}/>
</div>
</div>
)
}
}现在，我正在寻找价值随着时间的推移。
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-10-17 03:33:05
我就是这样做的：
- 让
ProgressBar成为一个哑组件。它只需要知道呈现 - 的进度，
App是一个智能组件，它知道start和end值，并根据当前时间跟踪progress(计算要提供给 - 的值)。
我在这里用了几分钟而不是几个小时，这样演示起来就更容易了。更新start、end和getProgress以满足您的需求。
const ProgressBar = ({status, progressColor}) => (
<div style={{background: '#fff', border: '1px solid #000', overflow: 'hidden'}}>
<div style={{transform: `scaleX(${status})`, transformOrigin: '0 0', transition: 'transform 1s', height: 10, background: progressColor}} />
</div>
);
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
progress: this.getProgress(),
}
}
getProgress() {
const {start, end} = this.props;
const now = new Date().valueOf();
return (now - start) / (end - start);
}
componentDidMount() {
this.interval = setInterval(() => {
const progress = this.getProgress();
if (progress > 1) {
clearInterval(this.interval);
}
this.setState({
progress
});
}, 1000);
}
render() {
return (
<div>
<div>
<ProgressBar status={this.state.progress} progressColor={"#1725b5"}/>
</div>
</div>
)
}
}
const now = new Date().valueOf();
const start = Math.floor(now / 60000) * 60000; // current minute
const end = start + 60000; // start + 1 minute
ReactDOM.render(
<App start={start} end={end} />,
document.getElementById('app')
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app" />
Stack Overflow用户
发布于 2019-10-17 03:07:28
function progress(timeleft, timetotal, $element) {
var progressBarWidth = timeleft * $element.width() / timetotal;
$element.find('div').animate({ width: progressBarWidth }, timeleft == timetotal ? 0 : 1000, 'linear').html(timeleft + " seconds to go");
if(timeleft > 0) {
setTimeout(function() {
progress(timeleft - 1, timetotal, $element);
}, 1000);
}
};
progress(20, 20, $('#progressBar'));#progressBar {
width: 90%;
margin: 10px auto;
height: 22px;
background-color: #0A5F44;
}
#progressBar div {
height: 100%;
text-align: right;
padding: 0 10px;
line-height: 22px; /* same as #progressBar height if we want text middle aligned */
width: 0;
background-color: #CBEA00;
box-sizing: border-box;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="progressBar">
<div></div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58424166
复制相关文章
相似问题
腾讯云开发者
