如何用時間數據制作進度條？

Question

我想制作一個進度條，其值將是動作開始和結束之間的時間。 像示例（我從下午 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>
    )
  }
}

現在我正在尋找隨着時間推移的價值。

Answer 1

 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>

Answer 2

我會這樣做：

1. 讓ProgressBar成為一個愚蠢的組件。 它只需要知道要渲染什么進度
2. 讓App成為一個智能組件，它知道start和end值並根據當前時間跟蹤progress （它計算要提供給ProgressBar的值）

我在這里使用了分鍾而不是小時，以便更容易演示。 更新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" />