.noviceish_history/

自転車・PC・読書感想。

reactで簡単なタイマーを作る

機能としては

  • ストップウォッチ
  • 一時停止
  • リセット

がある。カウントダウンはない。全然大したものではないが、一応公開しておく。

import React from 'react';

export default class Timer extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      isLive: false,
      currentElapsedTime: 0,
      totalElapsedTime: 0
    }
  }
  render() {
    return (<div>
      <p>{this.getElapsedSec()}</p>
      <button onClick={(e) => this.handleClick(e)}>{this.getButtonName()}</button>
      <button onClick={(e) => this.handleReset(e)}>リセット</button>
    </div>)
  }
  getElapsedSec() {
    return Math.floor((this.state.currentElapsedTime + this.state.totalElapsedTime) / 1000)
  }
  handleClick(e) {
    if (!this.state.isLive) {
      // stop -> live
      this.initClock()
    } else if (this.state.isLive) {
      // live -> pause
      this.releaseClock(false);
    }
  }
  releaseClock(resetTotalTime = false) {
    const totalElapsedTime = this.state.totalElapsedTime;
    this.setState({
      isLive: false,
      currentElapsedTime: 0,
      totalElapsedTime: resetTotalTime ?
        0 :
        Math.floor((Date.now() - this.started_at + totalElapsedTime) / 1000) * 1000, // ここで秒以下を切り捨てないと表示してる時間とtotalElapsedTimeが小数点以下でずれる
    });
    clearInterval(this.timerId);
  }

  handleReset(e) {
    this.releaseClock(true)
  }
  initClock() {
    this.started_at = Date.now()
    this.setState({ isLive: true })
    this.timerId = setInterval(() => {
      this.setState({
        currentElapsedTime: Date.now() - this.started_at
      })
    }, 1000)
  }
  componentWillUnmount() {
    clearInterval(this.timerId)
  }
  getButtonName() {
    if (this.state.isLive) {
      return '一時停止'
    } else {
      return '開始'
    }
  }
}