用 JS 实现了一个圆形的仪表盘

2015/08/28 | 1分钟阅读 | 更新于 2015/08/28

`2015-09-22` 更新

因为项目用到，所以改写了下，也做成 jQuery 插件了，增加了两个参数，color，bgcolor，分别控制高亮色和底色，阴影什么的全都去掉了，减小尺寸，整体拍扁了，另外调用也改简单了。目前长这个样子：

丢个代码下载链接

`2015-8-28` 更新

做了点小东西

两个 div 旋转控制显示，用 jQuery 遍历所有圆形图，读取百分比，控制旋转角度。另外加了好多层阴影。只能兼容到 IE9。主要代码

$(".circle").each(function () {
  var p = "";
  p = $(this).find(".circle-percent").text();
  var p = p.split("%");
  var p = p[0];
  console.log(p);
  var p_int = parseInt(p);
  if (p > 50) {
    $(this)
      .find(".inner-bg-b")
      .css("transform", "rotate(" + 0 + "deg)");

    $(this)
      .find(".inner-bg-a")
      .css("transform", "rotate(" + (p / 100 - 0.5) * 360 + "deg)");
    $(this).addClass("more-than-50");
  }
  if (p <= 50) {
    $(this)
      .find(".inner-bg-a")
      .css("transform", "rotate(" + 0 + "deg)");

    $(this)
      .find(".inner-bg-b")
      .css("transform", "rotate(" + (p / 100) * 360 + "deg)");
    $(this).removeClass("more-than-50");
  }
});

![](./screenshot _c.png)

![](./screenshot _d.png)

2015-09-22 更新

2015-8-28 更新

`2015-09-22` 更新

`2015-8-28` 更新