如何使用jQuery创建像倒计时一样的饼图？

Question

我正在尝试编写类似这样的代码 -

我想加入我的编码尝试,只是我没有真正的线索.当谷歌搜索"jQuery倒计时","饼图"等东西时,我只找到插件,我想自己编码.我甚至不确定这是否应该用html5 canvas,jQuery或两者来完成..

我的第一步应该是什么？

Answer 1

绘制圆的“饼”部分是一项相当简单的任务。

例如：

ctx.fillStyle = "#f00";
ctx.beginPath();
ctx.moveTo(50,50);
ctx.arc(50,50,50, sta, sta + 2*Math.PI*pct);
ctx.fill();

上面的代码将绘制一个半径为 50 像素的圆弧。第四和第五个参数确定电弧的开始和结束位置。就您而言，您想要：

var sta = -Math.PI/2; // this is -90 degrees (or "up")

该变量pct是要填充的圆的百分比。

您问题的真正目标是计时器。我创建了一个简单的 Timer 类，其输出非常灵活：

function Timer(duration /* in ms */ , props) {
    this.ontick = props && typeof props.ontick === "function" ? props.ontick : function() {};
    this.onend = props && typeof props.onend === "function" ? props.onend : function() {};
    this.interval = props && typeof props.interval === "number" ? props.interval : 1000 / 10;
    this.elapsed = 0;

    var running = false,
      start, end, self = this;

    this.start = function() {
      if (running) return this;

      start = new Date().getTime();
      end = start + duration;
      tick();
      running = true;

      return this;
    };

    function tick() {
      var now = new Date().getTime();
      self.ontick.call(self);
      self.elapsed = now - start;

      if (now < end) setTimeout(tick, self.interval);
      else self.onend.call(self);
    }
  }

Timer 类的非常基本的用法可能是这样的：

var timer = new Timer(10 * 1000, {
    ontick:function(){
        console.log(this.elapsed);
    },
    onend:function(){
        console.log('all done');
    }
}).start();

这个 Timer 实现的好处是它没有混乱与倒计时无关的逻辑，因此它非常可重用。

我在这里创建了您想要的输出示例： http: //jsfiddle.net/9jZsb/6/
您可以看到我正在自己创建动画，但将其他库合并到此解决方案中应该很简单来达到类似的效果。