javascript - 在 Internet Explorer 中旋转时钟指针

Question

我正在尝试使用 jQuery 创建一个时钟。我可以旋转所有的时针、分针和秒针，但是在 Internet Explorer 中像在其他浏览器中一样精确地旋转它时遇到了一些问题。

为什么会出现这种情况？如何在 Internet Explorer 中像在其他浏览器中一样旋转时钟指针？

这是我迄今为止创建的：

$(document).ready(function(){
    var every_second = 1000;
    var every_minute = 60000;
    var every_twelve_minute = 60000;

    setInterval(rotateSeconds,every_second);
    setInterval(rotateMinutes,every_minute);
    setInterval(rotateHours,every_twelve_minute);
});

var seconds_angle = 0;
function rotateSeconds() {
    var element = $(".seconds");
    if(seconds_angle < 360) {
        seconds_angle = seconds_angle+5;
    }
    else {
        seconds_angle = 0;
    }
    element.rotate(seconds_angle);
}

var minutes_angle = 0;
function rotateMinutes() {
    var element = $(".minutes");
    if(minutes_angle < 360) {
        minutes_angle = minutes_angle+5;
    }
    else {
        minutes_angle = 0;
    }
    element.rotate(minutes_angle);
}

var hours_angle = 0;
function rotateHours() {
    var element = $(".hours");
    if(hours_angle < 360) {
        hours_angle = hours_angle+1.25;
    }
    else {
        hours_angle = 0;
    }
    element.rotate(hours_angle);
}

这是一个指向所有内容的jsFiddle 链接

score 12 · Accepted Answer

你有两个选择：

你可以运行一个处理跨浏览器旋转的 jQuery 插件，你会很容易在 google 中找到一个。
或者，您可能对 microsoft 矩阵转换感兴趣：http: //msdn.microsoft.com/en-us/library/ms533014 (v=vs.85).aspx ，您必须了解什么是 2*2旋转矩阵以及如何计算其项。这并不复杂。与 css3 旋转的不同之处在于，旋转中心默认位于元素的左上角，您可能必须使用边距。

因此，如果您选择第二种解决方案：对于 IE 9 和 10，使用带有 css3 旋转功能的 -ms-transform 规则，对于其他 IE，使用带有 Microsoft 矩阵的过滤规则。您可以使用 Modernizr 来检测 csstransforms 功能，并使用 css 父条件和 css 类 .csstranforms 和 .no-csstransformsMdernizr 添加 onload。

score 6 · Accepted Answer

6

IE 8,7,... 不支持 CSS 旋转

于 2013-04-07T08:35:08.997 回答

score 6 · Accepted Answer

你没有说你在 IE 中的时钟到底出了什么问题——以及在哪个版本的 IE 中。

如果我确实在网页上画了一个模拟时钟，我可能会选择 SVG。

IE6-8 不支持 SVG，所以如果你需要支持，我会使用Raphaël JS库。它在可用的地方创建 SVG，并回退到 IE6-8 上的专有 VML。看看他们的网站，他们有很酷的例子，包括一个有趣的极地时钟（同心圆）。

这是一篇文章，准确解释了您要实现的目标：在 Raphael 之上完成的模拟时钟：没有图像的模拟时钟，带有帧和小时刻度线。

score 3 · Accepted Answer

你可以尝试使用jQuery Rotate 插件来为你处理跨浏览器，你只需要使用这个来旋转：

$('#myImage').rotate(30) //for a 30 degree rotation Where #myImage is the id of the element you want rotated.

以下浏览器支持它：

互联网浏览器 6.0 >
火狐 2.0 >
野生动物园 3 >
歌剧 9 >
谷歌浏览器

在这里检查。

score 3 · Accepted Answer

您可以使用一个canvas元素来旋转时钟指针，如果您包含excanvas，它将在 IE7+8 中工作，这是一个在旧版本的 IE 中启用画布的插件。

IE 9 和 10 已经支持画布。

工作演示： http: //jsfiddle.net/w1ll3m/qVqUb/4/（使用coolclock插件）。只需确保仅在 IE<9 带有条件注释时才加载 excanvas ：

您可以使用coolclock 插件或编写自己的时钟。

jsfiddle 网站本身在 IE 7/8 中不起作用。将以下代码复制到 html 文件中并在 IE 中打开它，它可以工作：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>demo</title>
  <script type='text/javascript' 
    src='http://code.jquery.com/jquery-1.6.4.js'></script> 
  <script type='text/javascript' 
    src="http://randomibis.com/coolclock/coolclock.js"></script>
  <script type='text/javascript'>
  $(window).load(function(){
    CoolClock.config.skins = {skin1:{
    outerBorder:
      {lineWidth:2, radius:95, color:"black", alpha:1 },
    smallIndicator:
      {lineWidth:2, startAt:88, endAt:92,color:"black", alpha:1 },
    largeIndicator:
      {lineWidth:4, startAt:79, endAt:92, color:"black", alpha:1 },
    hourHand:
      {lineWidth:8, startAt:-15,endAt:50, color:"black", alpha:1 },
    minuteHand:
      {lineWidth:7, startAt:-15, endAt:75, color:"black", alpha:1 },
    secondHand:
      {lineWidth:1, startAt:-20, endAt:85, color:"red", alpha:1 },
    secondDecoration:
      {lineWidth:1,startAt:70,radius:4,fillColor:"red",color:"red",alpha:1 }
}};
CoolClock.findAndCreateClocks();
});
</script>
<!--[if lt IE 9]>
  <script type="text/javascript" 
    src="http://randomibis.com/coolclock/excanvas.js"></script>
  <![endif]-->
</head>
  <body>
    <canvas id="clockid" class="CoolClock:skin1:200:false">
    </canvas>
  </body>
</html>

score 3 · Accepted Answer

您可以使用jquery transit插件来制作任何类型的过渡效果，包括旋转。它是一个轻量级的插件，有很多选择。改变旋转中心。您可以使用 transformOrigin 如下所示。

$('.box')
  .css({ transformOrigin: '0px 0px' })
  .transition({ rotate: '45deg' });

score 2 · Accepted Answer

实际上你的问题是关于在 IE 中绘制 css 线

这篇文章可能会有所帮助：

http://www.ofdream.com/code/css/xline2.php

javascript - 在 Internet Explorer 中旋转时钟指针

7 回答 7

Related

Reference