我正在制作一些简单的 css3 手表,它的工作原理是这样的(只是计算分钟、秒和小时的旋转并应用它
var updateWatch = function() {
var seconds = new Date().getSeconds();
var hours = new Date().getHours();
var mins = new Date().getMinutes();
var sdegree = seconds * 6;
var srotate = "rotate(" + sdegree + "deg)";
var hdegree = hours * 30 + (mins / 2);
var hrotate = "rotate(" + hdegree + "deg)";
var mdegree = mins * 6;
var mrotate = "rotate(" + mdegree + "deg)";
$(".jquery-clock-sec").css({"-moz-transform" : srotate, "-webkit-transform" : srotate});
$(".jquery-clock-hour").css({"-moz-transform" : hrotate, "-webkit-transform" : hrotate});
$(".jquery-clock-min").css({"-moz-transform" : mrotate, "-webkit-transform" : mrotate});
}
所有动画都有一些缓和。
一切正常,但是当某个标记完全旋转时,360度变为0度,然后标记使所有圆回来。有什么简单的方法可以避免它吗?
当您将标记从 359 度更改为 0 度时,标记向后移动是合乎逻辑的。
合乎逻辑的答案是避免截断数据。
我会得到时间(小数部分(,将其转换为秒,将其转换为度数,然后使用它。
如果结果数字是亿万度,请不要担心,它会映射到正确的位置。
当从亿万度到数亿度 + 1 时,它会包裹正常,当它碰巧进行新的旋转时。
只是为了避免准确性问题,正如我之前所说,只使用不包括一天的时间。