JS CSS时钟在IE中不工作

JS CSS Clock not working in IE

本文关键字：工作 IE CSS 时钟 JS      更新时间：2023-11-21

我已经为此绞尽脑汁了很长时间，并毫无喜悦地浏览了stackoverflow，但我觉得这是有答案的，所以…

我在Chrome和Firefox中有一个可以工作的模拟时钟，但在IE中不起作用。它使用js从本地计算机获取时间，然后使用css转换相应地旋转指针：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>

据我所知，transform在IE（v9及以上版本）中的正确用法是：

transform: rotate(45deg);

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

看看这篇文章，它对它进行了更深入的解释，但您当然需要将DXImageTransform值转换为动态值。

IE 中的CSS旋转属性

相关文章：