当前位置: 动力学知识库 > 问答 > 编程问答 >

Pie Timer with jQuery

问题描述:

I need to achieve this:

and the closest plugins I found are:

  • PieTimer
  • TimeCircles

Here's a fiddle: http://jsfiddle.net/RsKR2/1/

$('#timer').pietimer({

timerSeconds: 10,

color: '#d00',

fill: '#f00',

showPercentage: true,

callback: function() {

// alert("yahoo, timer is done!");

$('#timer').pietimer('reset');

}

});

just not sure how to customize the circles/canvas to achieve the desired look.

网友答案:

Updated Fiddle

Edited some css property for desired results

#timer {
    margin: 20px;
    width: 80px;
    -moz-border-radius:0.7em; /* Newly added line */
    -webkit-border-radius:0.7em; /* Newly added line */
    border-radius:0.7em; /* Newly added line */
    border:2px solid #ccc; /* Newly added line */
}

.pietimer > .percent 
{
    position: absolute;
    top: 1.05em;
    left: 0;
    width: 3.33em;
    font-size: 0.3em;
    text-align:center;
    display: none;
    z-index:10; /* Newly added line */
    font-weight:bold; /* Newly added line */
}
网友答案:

My Updated Fiddle .

The updated Fiddle by Amit Soni works only for 10 sec. the change must be :

 var secs = (data.timerSeconds)*((100-percent)/100);/*NEW*/
    $this.find('.percent').html(Math.round(secs)+'');/*Changed*/
    if (data.showPercentage) {
      $this.find('.percent').show();
    }

instead of :

$this.find('.percent').html(Math.round(percent/10)+'');
        if (data.showPercentage) {
          $this.find('.percent').show();
        }
分享给朋友:
您可能感兴趣的文章:
随机阅读: