본문 바로가기
Front-end

React - Binary 시계 구현

by 노아론 2018. 10. 9.

Binary-시계

import React, { Component } from 'react';
import './App.css';

class Clockcmp extends Component {

   constructor(props){
       super(props)
       this.state = {line: this.Change()}
  }

   componentDidMount(){
       this.timeID = setInterval(
          () => this.Change(),
           1000
      )
  }

   componentWillUnmount(){
       clearInterval(this.timeID)
  }


   Change = () => {

       const now = new Date();
       const hh = this.z2(now.getHours())
       const mm = this.z2(now.getMonth())
       const ss = this.z2(now.getSeconds())

       const binStr = hh + mm + ss
       const style0 = {color: 'black'}
       const style1 = {color: 'black'}

       const lines = []
       let bin8
       let bin
       for(let i =0; i<binStr.length; i++){
           const v = parseInt(binStr.substr(i, 1))
           bin = "0000" + v.toString(2)
           bin8 = bin.substr(bin.length - 4, 4)

           for(let j =0; j<bin8.length; j++){
               if (bin8.substr(j,1) === '0'){
                   lines.push(<span style={style0}>⚪️</span>)
              }
               else{
                   lines.push(<span style={style1}>⚫️</span>)
              }
          }
           lines.push(<br></br>)
      }
       this.setState({
           line : lines,
           binStr : binStr,
           bin8 : bin8,
           bin : bin
      })
  }

   z2 = (v) => {
           v = String("00" + v)
       return v.substr(v.length -2, 2)
  }

   render() {
       return(
           <div>
               binStr : {this.state.binStr}<br></br>
               bin8 : {this.state.bin8}<br></br>
               bin : {this.state.bin}<br></br>
              {this.state.line}
           </div>)
  }
}

export default Clockcmp;

댓글0