zoukankan html css js c++ java

React 实现一个时钟

最终效果

其实主要难点在于最左边的小时钟

指针的实现方式很简单，就是通过绝对定位将指针移到中间，然后以下边中间的位置为圆心旋转即可。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    .clock-wrapper {
        background-color: blue;
        height: 200px;
        width: 200px;
        position: relative;
    }
    .pointer {
        height: 80px;
        width: 6px;
        background-color: silver;
        position: absolute;
        top: 20px;
        left: 97px; /* 100 - 6/2 */
        transform: rotateZ(30deg);
        transform-origin: center bottom;
    }
    </style>
</head>
<body>
    <div class="clock-wrapper">
        <div class="pointer"></div>
    </div>
</body>
</html>

效果

秒针转起来的效果也很简单，通过定时器setInterval每隔一秒更新秒针的角度。

setInterval(() => {
            let secAngle = new Date().getSeconds() * 6
            let pointer = document.getElementsByClassName('pointer')[0]
            pointer.style.transform = `rotateZ(${secAngle}deg)`
        }, 1000)

现在就可以看到指针一跳一跳的了。但是呢，我希望指针平缓的走，那么可以设置CSS的 transition 属性

transition: all linear 1s;

安静的等待1s 会发现，当秒针从59到60的时候，会反向旋转。因为此时角度是变小的，360->0，所以考虑当指针刚好走一圈的那一秒，去除 transition 属性。

这样虽然不会倒转了，但是那一秒还是会蹦一下。

于是又想到每100ms更新一次，这样到360度时蹦的那一下就不明显了。感觉没有直接解决问题，是绕开了。。

这样一个会围绕圆心转的指针就做完了。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    .clock-wrapper {
        background-color: blue;
        height: 200px;
        width: 200px;
        position: relative;
    }
    .pointer {
        height: 80px;
        width: 6px;
        background-color: silver;
        position: absolute;
        top: 20px;
        left: 97px; /* 100 - 6/2 */
        transform-origin: center bottom;
    }
    </style>
</head>
<body>
    <div class="clock-wrapper">
        <div class="pointer"></div>
    </div>
    <script>
        function getAngle() {
            let date = new Date()
            let secAngle = date.getSeconds() * 6 + date.getMilliseconds() * 6 / 1000;
            return secAngle;
        }
        window.onload = () => {
            let pointer = document.getElementsByClassName('pointer')[0];
            pointer.style.transform = `rotateZ(${getAngle()}deg)`;
            let timer = setInterval(() => {
                let secAngle = getAngle();
                pointer.style.transform = `rotateZ(${getAngle()}deg)`;
                if (!secAngle) {
                    pointer.style.transition = null;
                } else {
                    pointer.style.transition = 'all linear 100ms';
                }
            }, 100);
        }
    </script>
</body>
</html>

现在的问题是表盘的刻度。实现12个小竖线，然后分别旋转。虽然我没有less不可以使用for循环，但是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>
  .clock-wrapper {
    background-color: blue;
    height: 200px;
    width: 200px;
    border-radius: 100px;
    position: relative;
  }
  .grad {
    height: 10px;
    width: 4px;
    background-color: #fff;
    position: absolute;
    left: 98px;
    top: 5px;
    transform-origin: center 95px;
  }
  </style>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
  class Clock extends React.Component {
    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>
      })

      return (
        <div className="clock-wrapper">
          {grad}
        </div>
      )
    }
  }

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

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

效果：

这样完全没有难点了（本来就没有好吧……

完整代码如下：

<!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>

查看全文

相关阅读:
2021年2月13
2021年2月12
2021年2月11
2021年2月10
2021年2月9
下载优化
 20180301越努力越轻松
 2018-03-01继续完善2
2018-03-01继续完善
 2018-02-16 GetSameTypeQuestion

原文地址：https://www.cnblogs.com/wenruo/p/9561815.html