如何让倒数计时器每秒旋转一次？

Question

我想改变这个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);
});

Answer 1

该插件硬编码为逆时针旋转。我更新了原始插件，现在可以选择clockwise: true。

新演示如下：

此示例有一个顺时针运行，第二个正常运行（逆时针）：

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');
    }
});