ジオメトリ式を使用して、アクティブおよび非アクティブなタイマー状態に応じて 60 div を配置することにより、単純なラウンド タイマーを作成しました。
x = x0 + r * Cos(theta * PI / 180);
y = y0 + r * Sin(theta * PI / 180);
しかし、ブラウザーは要素の間に間違ったスペースを入れて配置しているようで、数式の値を手動で変更しても役に立たなかったので、この種の動作を受け入れることにしました。
IE で確認するまでは、たまたまこれらの座標を異なる方法で解析し、実際には、要素を適切に配置して完全に丸い円を形成する唯一のブラウザーであったため、それらの要素が親の寸法の外に拡張されていました。
私が最初に考えたのは、ブラウザーのパーサー値の丸めの違いについてでした。つまり、IE は小数点以下 2 桁の精度で値を丸めるように見えますが、他のものははるかに正確です。それらがどのようにそれらの価値を考えているのか分からないので、それらの違いについて確信が持てません。
IEが描画するようにするには、タイマーが実際に必要です。ですから、このトピックについてご意見をお聞かせいただければ幸いです。
要素は次のように配置されます。
or(var z = 0; z < items; z++) {
segment_inactive = $("<div class='segment_inactive'></div>"),
segment_active = $("<div class='segment_active'></div>");
var x = 80 + 80 * Math.cos(2 * Math.PI * z / items);
var y = 80 + 80 * Math.sin(2 * Math.PI * z / items);
d += 6;
$("#timer").append(segment_inactive, segment_active);
segment_inactive.css({
left:x +"px",
top:+ y +"px",
transform: "rotate("+d+"deg)",
display: "block"
});
segment_active.css({
left:x +"px",
top:+ y +"px",
transform: "rotate("+d+"deg)",
display: "none"
});
}
そしてそのちょうど表示/非表示のトグル。
このタイマーは、以下の jsfiddle リンクで表示できます。さまざまなブラウザー、特に IE で表示します。