如何讓倒數計時器每秒旋轉一次？

-2

我想改變這個jsfiddle jsfiddle。它使用jQueryCountDown（http://plugins.jquery.com/countdown360/）如何讓倒數計時器每秒旋轉一次？

它當前每秒旋轉一個外環，但是這顯示爲該環倒數時的逆時針旋轉。

我希望倒計時仍然每秒都在旋轉，但外環旋轉的方向應該是順時針方向（目前環是逆時針旋轉）。請看例子：

示例代碼：

var countdown = $("#countdown").countdown360({ 
    radius: 60, 
    seconds: 20, 
    label: ['sec', 'secs'], 
    fontColor: '#FFFFFF', 
    autostart: false, 
    onComplete: function() { 
     console.log('done'); 
    } 
}); 

countdown.start(); 

$('#countdown').click(function() { 
    countdown.extendTimer(2); 
});

來源

2014-12-03 kumar jerry

你是什麼意思'應該旋轉'？究竟應該旋轉什麼？ – empiric 2014-12-03 10:16:11

該插件被硬編碼爲逆時針旋轉。你想修改插件嗎？ – 2014-12-03 11:28:04

@TrueBlueAussie是對的。你需要修改插件。 ** [這裏]（https://github.com/johnschult/jquery.countdown360/blob/master/src/jquery.countdown360.js）**的來源。 '_drawCountDownShape'方法控制着小部件的渲染方式。如果你不熟悉渲染，我建議不要進入這個。 – Powerslave 2014-12-03 11:57:28

那插件是硬編碼爲逆時針旋轉。我更新了原始插件，以便它現在可以選擇clockwise: true。

新演示看起來像這樣：

enter image description here

該實施例具有一個運行順時針和第二行駛正常（逆時針）：

的jsfiddle：http://jsfiddle.net/TrueBlueAussie/gs3WY/246/

在defaults我加了clockwise：

defaults = { 
     ...[snip]... 
     clockwise: false 
    };

在start方法我把它有條件地得出「中風」（外環）：

start: function() { 
     ...[snip]... 
     this._drawCountdownShape(Math.PI * 3.5, !this.settings.clockwise); 
     ...[snip]... 
    },

並在_draw方法我增加的角度的條件計算。此外，當計時器結束時，它有條件地借鑑基礎上再次順時針標誌（以前它總是呈現的變化前重劃，整個外環）外環：

_draw: function() { 
     var secondsElapsed = Math.round((new Date().getTime() - this.startedAt.getTime())/1000); 
     if (this.settings.clockwise) { 
      var endAngle = (((Math.PI * 2)/this.settings.seconds) * secondsElapsed) - (Math.PI * .5); 
     } else { 
      var endAngle = (Math.PI * 3.5) - (((Math.PI * 2)/this.settings.seconds) * secondsElapsed); 
     } 
     this._clearRect(); 
     if (secondsElapsed < this.settings.seconds) { 
      this._drawCountdownShape(Math.PI * 3.5, false); 
      this._drawCountdownShape(endAngle, true); 
      this._drawCountdownLabel(secondsElapsed); 
     } else { 
      this._drawCountdownShape(Math.PI * 3.5, this.settings.clockwise); 
      this._drawCountdownLabel(this.settings.seconds); 
      this.stop(); 
      this.settings.onComplete(); 
     } 
    }

您只需添加一個clockwise: true當您創建倒計時：

var countdown = $("#countdown").countdown360({ 
    radius: 60, 
    seconds: 20, 
    label: ['sec', 'secs'], 
    fontColor: '#FFFFFF', 
    autostart: false, 
    clockwise: true,  // <<<<< Added this 
    onComplete: function() { 
     console.log('done'); 
    } 
});

來源

2014-12-03 11:59:45

如何讓倒數計時器每秒旋轉一次？

回答

相關問題