React实现时钟效果

本是古典 何须时尚 2022-07-18 01:12 523阅读 0赞

本文原创地址链接:http://blog.csdn.net/zhou_xiao_cheng/article/details/52425606,未经博主允许不得转载。

嗯,我又来了,这次的Demo是一个魔力小时钟,永不停歇的小时钟(此处省略N声嘀嗒嘀嗒),用来实时显示当前的时间,哇哈哈~~~

思考

日常生活中看到的时钟通常都是由时针、分针、秒针组成,这三根针不停地转动,用以显示当前的时间,那么站在一只程序猿的角度,每根针究竟是如何转动起来的?又是以什么角度在转动?
我一直认为,学习的过程中,思考是很重要的,它能够让你更好、更快地去理解,以及实现一个功能,这也正是为什么我的文章里几乎都会出现类似:实现思路、思考等这一类词语的原因。
好了,废话少说。首先,我们可以先做出一根针:

  1. class ClockDemo extends React.Component {
  2. render(){
  3. return(
  4. <div className="style">
  5. <div className="clockHourLine"></div>
  6. </div>
  7. )
  8. }
  9. }
  10. ReactDOM.render(<ClockDemo />, document.getElementById('app'))
  11. .style { display: flex; width: 100vw; height: 100vh; align-items: center; justify-content: center; }
  12. .clockHourLine { width: 4px; height: 65px; background-color: black; }

效果图如下:
这里写图片描述
嗯,很简单,再往CSS里加个偏移角度:transform: rotateZ(45deg);
这里写图片描述
接下来,让它转起来:

  1. class ClockDemo extends React.Component {
  2. constructor() {
  3. super();
  4. this.state = {
  5. rotateDegree: 0
  6. }
  7. }
  8. componentWillMount() {
  9. setInterval((function() {
  10. this.setState({
  11. rotateDegree: this.state.rotateDegree + 10
  12. })
  13. }).bind(this), 1000)
  14. }
  15. render() {
  16. return (
  17. <div className="style">
  18. <div className="clockHourLine" style={
  19. {transform: 'rotateZ(' + this.state.rotateDegree + 'deg)'}}></div>
  20. </div>
  21. )
  22. }
  23. }
  24. ReactDOM.render(<ClockDemo />, document.getElementById('app'))

以上,就是一根针简单的转动原理。我们通过CSS中的transform属性让我们的元素(针)进行旋转(rotate)操作,此时,可以看到,该针是以其中心点作为原点进行旋转的,再通过修改transform-origin属性的值,便可以更改这根针变形的原点了(不了解这两个属性的,可以戳这里transform与transform-origin的用法)。
上代码:

  1. class ClockDemo extends React.Component {
  2. constructor() {
  3. super()
  4. //随着时间的变化,三根针是不断发生变化的,可以把它们放在this.state中
  5. this.state = {
  6. hour: 0,
  7. minute: 0,
  8. second: 0
  9. }
  10. }
  11. //componentWillMount()是React组件的生命周期函数
  12. componentWillMount() {
  13. var func = function() {
  14. //获取当前时间
  15. var date = new Date()
  16. var minutes = date.getMinutes()
  17. var seconds = date.getSeconds()
  18. //计算旋转角度,并实时改变this.state的值
  19. this.setState({
  20. hour: (date.getHours()) % 12 * (360 / 12) + (360 / 12) * (minutes / 60),
  21. minute: minutes * (360 / 60) + (360 / 60) * (seconds / 60),
  22. second: seconds * (360 / 60)
  23. })
  24. }.bind(this)
  25. func()
  26. //每间隔1s执行一次func()方法
  27. setInterval(func, 1000)
  28. }
  29. render() {
  30. return (
  31. <div className="style">
  32. <img className="backgroundImg" src="http://www.imagebon.com/postpic/2015/11/clock-face_104541.jpg" />
  33. <div className="container">
  34. <div className="clockMinuteLine" style={
  35. {transform: 'rotateZ('+this.state.minute+'deg)'}}></div>
  36. <div className="clockHourLine" style={
  37. {transform: 'rotateZ('+this.state.hour+'deg)'}}></div>
  38. <div className="clockSecondLine" style={
  39. {transform: 'rotateZ('+this.state.second+'deg)'}}></div>
  40. </div>
  41. </div>
  42. )
  43. }
  44. }
  45. ReactDOM.render(<ClockDemo />, document.getElementById('app'))

还可以写得更优雅一点:

height=”512” scrolling=”no” src=”//codepen.io/zhouxiaocheng/embed/LRYOZA/?height=512&theme-id=0&default-tab=js,result&embed-version=2” allowfullscreen=”true” width=”100%;’”>&#10;

发表评论

表情:
评论列表 (有 0 条评论,523人围观)

还没有评论,来说两句吧...

相关阅读

    相关 JS实现简单时钟效果

    老师上课需要我们做一个时钟的小作业 ,我把它放在上面记录一下啦 表盘和时针我都是用的背景图的形式,然后绝对定位,通过调整left和top确定时针、分针、秒针的位置,tran