javascript - JS CSS 时钟在 IE 中不工作

Question

我已经为此绞尽脑汁很久了，并没有高兴地浏览 stackoverflow，但我觉得有一个答案，所以......

我在 Chrome 和 Firefox 中有一个可用的模拟时钟，但它在 IE 中不起作用。它使用 js 从本地计算机获取时间，然后使用 css transform:rotate 相应地旋转手。下面是脚本:

<script type="text/javascript">

    $(document).ready(function() {

          setInterval( function() {
          var seconds = new Date().getSeconds();
          var sdegree = seconds * 6;
          var srotate = "rotate(" + sdegree + "deg)";

          $("#sec").css({"-moz-transform" : srotate, "-webkit-transform" : srotate, "-ms-transform":srotate});

          }, 1000 );


          setInterval( function() {
          var hours = new Date().getHours();
          var mins = new Date().getMinutes();
          var hdegree = hours * 30 + (mins / 2);
          var hrotate = "rotate(" + hdegree + "deg)";

          $("#hour").css({"-moz-transform" : hrotate, "-webkit-transform" : hrotate, "-ms-transform":hrotate});

          }, 1000 );


          setInterval( function() {
          var mins = new Date().getMinutes();
          var mdegree = mins * 6;
          var mrotate = "rotate(" + mdegree + "deg)";

          $("#min").css({"-moz-transform" : mrotate, "-webkit-transform" : mrotate, "-ms-transform":mrotate});

          }, 1000 );

    }); 

</script>

Answer 1

据我所知，transform 在 IE(v9 及更高版本)中的正确用法是:

transform: rotate(45deg);

如果您使用的是 IE 8 或更低版本，您将需要使用 progid:DXImageTransform.Microsoft.Matrix() 方法(这可能有问题，因为您必须使用 SIN 和 COS 数学值) .这种方式适用于 filter 和 -ms-filter 的 css 属性。

看看这篇更深入地解释它的帖子，但是您当然需要将 DXImageTransform 值转换为动态值。

CSS rotate property in IE