收藏--React 实现一个时钟

收藏--React 实现一个时钟

效果:

代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Hello World</title>
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  <style>
    .deTime {
      position: relative;
      height: 50px;
      width: 300px;
      padding: 5px;
      background: linear-gradient(to bottom, #0071ff, #00b1ff);
      display: flex;
      font-family: TrebuchetMS,Rotobo,"Microsoft YaHei",sans-serif;
    }

    .deTime .container {
      position: relative;
      height: 50px;
      width: 50px;
      border-radius: 150px;
      box-shadow: #353535 0px 0px 1px 0px;
      background: radial-gradient(#0040ff, #6adbff);
    }

    .deTime .second {
      height: 20px;
      width: 1px;
      top: 5px;
      left: 24px;
      background-color: #ff6363;
    }

    .deTime .minute {
      height: 16px;
      width: 2px;
      top: 9px;
      left: 24px;
      background-color: #8e8e8e;
    }

    .deTime .hour {
      height: 12px;
      width: 2px;
      top: 13px;
      left: 24px;
      background-color: #8e8e8e;
    }

    .deTime .second, .deTime .minute, .deTime .hour {
      position: absolute;
      transform-origin: center bottom;
      box-shadow: 0px 0px 2px 0px #000;
    }

    .deTime .center {
      width: 2px;
      height: 2px;
      border-radius: 1px;
      background-color: #ffffff;
      box-shadow: 0px 0px 3px 1px #8c8c8c;
      position: absolute;
      top: 24px;
      left: 24px;
    }

    .deTime .time {
      line-height: 50px;
      font-size: 36px;
      color: #fff;
      margin-left: 15px;
    }

    .deTime .time span {
      font-size: 22px;
    }

    .deTime .date {
      font-size: 13px;
      color: #fff;
      display: flex;
      flex-flow: column;
      margin-left: 15px;
      padding: 6px 0;
    }

    .deTime .date > div {
      flex-basis: 50%;
    }

    .grad {
      height: 2px;
      width: 1px;
      background-color: #fff;
      position: absolute;
      left: 25px;
      top: 1px;
      transform-origin: center 24px;
    }
  </style>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
  class DeTime extends React.Component {
  TRANSITION = '100ms linear';
  NUMBER_TRANSLATION = ['日', '一', '二', '三', '四', '五', '六'];

  constructor() {
    super()
    this.state = {
      hourAngle: 0,
      minAngle: 0,
      secAngle: 0,
      transition: this.TRANSITION
    }
  }

  updateTime() {
    let date = new Date()

    let secAngle = (date.getSeconds() + date.getMilliseconds() / 1000) * 6;
    let minAngle = date.getMinutes() * 6 + secAngle / 60;
    let hourAngle = (date.getHours() % 12) * 30 + minAngle / 12;

    let transition = this.TRANSITION
    //  当秒针走到 0 的时候 角度其实是变小了 所以会倒着转 需要暂时删除 transition
    if (this.state.secAngle > secAngle) transition = null;

    this.setState({
      hourAngle: hourAngle,
      minAngle: minAngle,
      secAngle: secAngle,
      transition: transition
    })
  }

  componentWillMount() {
    this.updateTime();

    this.timer = setInterval(() => { this.updateTime() }, 100);
  }

  componentWillUnmount() {
    this.timer && clearTimeout(this.timer);
  }

  leadingZero(number) {
    return number < 10 ? '0' + number : number
  }


  render() {
    let hourArr = [...new Array(12).keys()]
    let grad = hourArr.map((item) => {
      return <div key={item} className="grad" style={{transform: `rotateZ(${item*30}deg)`}}></div>
    })
    let state = this.state
    let now = new Date()

    return (
      <div className="deTime">
        <div className="container">
          {grad}
          <div className="minute" style={{transform:  'rotateZ('+state.minAngle+'deg)'}}></div>
          <div className="hour" style={{transform:  'rotateZ('+state.hourAngle+'deg)'}}></div>
          <div className="second" style={{transition: state.transition, transform:  'rotateZ('+state.secAngle+'deg)'}}></div>
          <div className="center"></div>
        </div>
        <div className="time">
          {this.leadingZero(now.getHours())}:{this.leadingZero(now.getHours())}<span> {this.leadingZero(now.getSeconds())}</span>
        </div>
        <div className="date">
          <div>星期{this.NUMBER_TRANSLATION[now.getDay()]}</div>
          <div>{now.getFullYear()}年{now.getMonth()}月{now.getDate()}日</div>
        </div>
      </div>
    )
  }
}

  ReactDOM.render(
    <DeTime/>,
    document.getElementById('root')
  );

</script>
</body>
</html>

来源:https://www.cnblogs.com/wenruo/p/9561815.html

Copyright: 采用 知识共享署名4.0 国际许可协议进行许可

Links: https://www.fengpt.cn/archives/收藏--react实现一个时钟