【react+定时器 实现时间刻度】

      今天是我的第一篇文章，我也不知道哪里来的勇气来分享，希望能给大家带来一点学习的兴趣和帮助，若是大佬路过，希望多带带我。广大的网友们，不喜勿喷，多多指教。前面的废话看不懂，可以直接看代码哦

react+定时器实现时间

一、实现的功能：

    1、点击开始按钮，时间从6点到第二天6点渐进变化，可暂停

    2、时间从6点到第二天6点循环结束后，初始值为中午早上9点，再次点击从6点开始

    3、可点击和拖动进度条，时间相应变化

    4、点击或者拖动后，点击开始按钮从点击和拖动的地方开始继续循环

 二、功能说明

     1、使用的是函数式组件

     2、先搭建一个外观界面

     3、控制的量有显示框的移动（left），进度条的前进(width)，具体时间的变化(time),总体量度（timeValue）设为1440，按照这个来划分时间，剩下的left和width根据比例来变化，小时和分钟按照计算公式来计算得出：

          timeH = parseInt(oldValue / 60);

          timeF = ((oldValue % 60) / 100).toFixed(2)

因为时间需要实时获取，因此放在全局里面，并赋予初始值，并且考虑到异步的关系：

        var oldValue = 360

        var oldWitdh = 0

        var oldLeft = -34

        var oldShowTime = "06:00"

        var oldTime = 0

        oldValue初始值为360对应时间是早上的6点

    4、根据上面的规划，先用定时器来完成自动循环的功能

       setInterval，在循环定时器中，来控制变量oldValue的变化（秒），进而变化left、width和time的变化，通过useState来存储和设置（改变）值，函数式组件的原因，通过useEffect来监听时间的变化，进而带动其他值的变化

     重点，在循环完定时器后，需要把定时器清空，不然会造成内存泄漏等问题，也会导致重复点击，出现抖动的问题

     5、自动循环完后回到指定位置：早上九点

      在useEffect监听中，监听timeValue值的变化，等于360的时候就是6点，此时可以将初始值改为自己想要的9点

     难点是有两个6点，如何判断是否是自己想要的，这时候通过一个布尔类型的变量来区分一下就可以了，如360-1440对应的是6点到24点，到达24点时，给isSixClick为true,这时候第二次到达360时就是我们设定的终点（第二天的6点）

      6、循环后点击暂停，再点击从暂停的位置开始继续

      判断定时器是否为空，要是为空就继续走（从暂停的位置开始），要是不为空，就做定时器清空（暂停）

       7、循环结束后回到9点，再次点击从头（6点）开始

       这里需要判断这次的点击是否是执行完后的点击，通过start开控制，收到start为true变赋初置为6点

      8、点击和拖拽

      因为使用了ant的组件，因此很容易获取到点击和拖拽后的value值，按照上面的思路变可以完成此功能，

     难点，这里需要注意的是从6点到24点后，如何回到0点，这时候加一个判断，看value是否到达了1440,到达了之后变对应的减去，最后对应设置timeValue的值。如：

    //从六点开始，0-1080这个范围，需要加360，才能从6点到24点

     if (value >= 0 &