javascript - 如何在时间变化时旋转图像？

Question

我最近为 this 这样的网站制作了一个倒计时计时器!它几乎是我在网上找到的 2 个脚本的组合。

倒计时会倒计时到 2 月 1 日，并且非常稳定。但是“时钟图片”应该每秒旋转 6 度(请参阅页面源代码)。但事实证明，时钟图片将从页面加载的那一刻起开始计数/转动，因此如果您在两秒之间到达那里，与倒计时相比，图片将关闭半秒。

有什么方法可以将图片的转动与倒计时的变化“联系起来”吗？

非常感谢任何帮助!

Answer 1

编辑

根据与 OP 的讨论，我终于找到了解决方案。问题是浏览器如何处理旋转。

好的，所以，删除那个动画 gif，然后在那里做一些动画。在脚本顶部创建一个名为 var degrees = 0 的全局变量。您需要在每个刻度中增加 6 的度数。如果达到 360，则将其重置为 0。

出于某种原因，它不适用于 jsfiddle，但您可以查看它 on my site. Live demo

然后在你的 tick 函数中:

if (amount < 0) {
    expired.push(idx);
}
// date is still good
else {
    this.display(cnt, this.format(this.math(amount)));
    if (degrees === 360) {
        degrees = 0;
    }
    degrees += 6;
    obj = document.getElementById('clock');
    if (navigator.userAgent.match("Chrome")) {
        obj.style.WebkitTransform = "rotate(" + degrees + "deg)";
    } else if (navigator.userAgent.match("Firefox")) {
        obj.style.MozTransform = "rotate(" + degrees + "deg)";
    } else if (navigator.userAgent.match("MSIE")) {
        obj.style.msTransform = "rotate(" + degrees + "deg)";
    } else if (navigator.userAgent.match("Opera")) {
        obj.style.OTransform = "rotate(" + degrees + "deg)";
    } else {
        obj.style.transform = "rotate(" + degrees + "deg)";
    }
}