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

Question

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

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

请问有什么办法可以'connect'把图片转成倒计时的变化吗？

非常感谢任何帮助！

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

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

How to rotate image when time changes?

javascript

css

clock

countdown