![06b6ac788edc31997c361ad3e904d2fd.png](https://img-blog.csdnimg.cn/img_convert/06b6ac788edc31997c361ad3e904d2fd.png)
之前写的 cpbBuilder.js 完全是觉得好玩儿,没有实际使用,上个星期自己在项目上使用了一些,觉得有些东西用起来并不是很舒坦,主要就是每个进度条的设置,要统一在 JS 中去设置,这样在修改的时候不是很直观,不过好处是可以使用 JS 配合 JSON,第二个版本在 canvas 标签中使用了 data-* 属性,也就是图个方便,至于具体使用哪个版本可以自己根据需要选择,代码是完全开源的,可以随便用,随便改。
王世杰:纯JS环形进度条生成插件zhuanlan.zhihu.com插件代码:
// cpbBuilder.js
使用:
<!-- 创建 canvas 元素 -->
插件实例化和设置:
// usage
插件运行:
// 因为参数是在元素 data-* 属性中设置的,因此可以遍历元素运行
![2d402e0e73bc6b119e1033b78a235987.png](https://img-blog.csdnimg.cn/img_convert/2d402e0e73bc6b119e1033b78a235987.png)
更多用法请自由发挥!