我吃泡面有个习惯： 我比较喜欢那种弹牙一点，筋斗一点的面口感，所以我会根据面饼的软硬度来设定倒计时时间；最近泡面吃的比较多，看着iOS的这个环形进度条定时器，突发奇想，如果我用js配合css动画可以实现吗？(PS:吃泡面仅仅是因为不用去食堂排队🤑)
一、思路
既然要实现这个效果，那么核心要素就是环形动画效果和计时器了吧？只要获取用户输入的值，再做一个间歇函数，再根据总时间来决定动画执行的时间，这么一想，也没有那么难？
既然有思路了，那么剩下的就交给键盘了
二、动画效果
关于这个环形的动画效果，确实让我头疼了一段时间，最终查阅各种资料以及一些尝试，我决定用以下思路来设计这个环形效果
1、首先做一个定义宽高的大盒子（后文中称为Box-A）
2、在大盒子里面水平排列两个小盒子（后文中称为Box-B），小盒子与大盒子等高，宽各为大盒子的一半
3、给两个小盒子再分别添加两个盒子（后文中称为Box-C），使Box-C的大小与Box-B的大小相等；给Box-C添加边框圆角，使其变成两个扇形
4、在Box-A中添加一个盒子（后文中称为Box-D），使其在Box-A中水平垂直对齐；给Box-D添加边框圆角，使其变成一个正圆；更改Box-D的大小使其比Box-A小，设置层级，使其在最上层遮罩Box-B来呈现环形
5、设计动画，使分布在左右的两个Box-C盒子旋转，并更改其旋转中心（详见代码片段）；给Box-B盒子设定透明与溢出隐藏(最后别忘了Box-A变成圆形，本文为了方便展示使用方盒子)
三、计时器
既然动画效果已经有了，那么结合js更改动画的执行时间，就能实现环形进度条随着计时时间的更新啦！
步骤如下：
1、获取用户输入的时间值（时分秒）并做一个总秒数的计算
2、封装间歇函数，并设置自减值；在调用时使用总秒数作为实参；
3、给开始计时按钮注册点击事件，事件开始时调用间歇函数，并设定根据总秒数设定动画的总时长
4、设置暂停功能，暂停时清除定时器并暂停动画
5、设置重置功能，点击后刷新计时器并清除动画残留效果
....... (js内细节太多，若有兴趣可浏览源码)
代码如下：欢迎大家来找bug
（代码块有比例限制，若有需要复制源码创建html文件到浏览器打开即可）
若要转载，标明出处即可
