背景：
因开发需求需要实现一个圆形倒计时功能，具体的倒计时时间是根据功能来；查了一些资料，最终确定用css3和js来完成
实现效果如下：
倒计时效果图
白色圆弧部分是已经过去的时间，中间的文案是倒计时所剩时间
旋转采用css3的动画样式transform的rotate属性实现，动态效果则结合js的setInterval实现
HTML代码结构：
实现该功能可理解为需要拆分成四部分代码块：左边半圆，右边半圆[分两个半圆是为了实现旋转出来的效果]，背景[一个圆，颜色同上图白色圆弧]，时间文案
html结构
CSS样式：
css样式
JS实现【大家可以用标准写法】：
1.先实现倒计时旋转效果，动态改变旋转角度方法2个[分别针对左右半圆]，右半圆旋转到180度时，开始左半圆的旋转效果
倒计时1
参数说明：
deg：每次旋转的角度，如5秒，deg=parseFloat(360/(5*10)).toFixed(3);一共转50下[每0.1s转一次]
totalCount：一共转的次数
其他说明：
当转数已经达到总转数的一半时，清理右半圆的循环事件，开始左半圆循环
2.实现倒计时中的文本动态改变
根据所剩秒数展示时间
时间格式转换
时间展示格式为00:00，因此需要根据所剩秒数实时计算对应的分钟数和富余的秒数，同时将其转换成固定格式
整个过程只要明白了左右半圆的动画流程，基本就能理解了
题外话：
想到动态效果，也很容易想到html5的动画特性，它也有画圆形、圆弧等功能；后序会更新一篇用画布canvas来实现该功能
参考地址：http://www.yangqq.com/web/css3demo/index.html
网友评论