分类导航

jQuery 发布时间：2022-03-30 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了如何使用jQuery创建像倒计时一样的饼图？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

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

我的第一步应该是什么？

@L_607_4@

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

例如：

ctx.fillStyle = "#f00";
ctx.beginPath();
ctx.moveTo(50,50);
ctx.arc(50,50,sta,sta + 2*Math.PI*pct);
ctx.fill();@H_301_13@ 
 上面的代码将绘制一个半径为50像素的圆弧.第四和第五参数确定弧的开始和结束位置.在您的情况下,您想要： 
  
 var sta = -Math.PI/2; // this is -90 degrees (or "up")@H_301_13@ 
 变量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);
    }
  }@H_301_13@ 
 Timer类的基本用法可能是这样的： 
  
 var timer = new Timer(10 * 1000,{
    ontick:function(){
        console.log(this.elapsed);
    },onend:function(){
        console.log('all done');
    }
}).start();@H_301_13@ 
 这个Timer实现的好处在于它没有与计数停机时间无关的逻辑混乱,所以它非常可重用. 
 我已经在这里创建了一个输出样本：http://jsfiddle.net/9jZsb/6/ 
 您可以看到我自己正在创建动画,但将其他库合并到此解决方案中以实现类似的效果应该是微不足道的.