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

【问题标题】：how to make countdown timer rotate for each second?如何让倒数计时器每秒旋转一次？
【发布时间】：2014-12-03 09:50:12
【问题描述】：

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

【问题讨论】：

should be rotate 是什么意思？究竟应该旋转什么？
该插件被硬编码为逆时针旋转。要修改插件吗？
@TrueBlueAussie 是对的。您需要为此修改插件。 Here 是来源。 _drawCountDownShape 方法控制小部件的呈现方式。如果您不熟悉渲染，我建议您不要涉足此领域。
@kumar jerry：您显然需要缩小修改后的插件脚本，但有很多工具可以做到这一点。你对我的回答有什么反馈吗？

标签： javascript jquery jquery-plugins countdowntimer

【解决方案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');
    }
});

【讨论】：