Question

我有一只手表的图形，时针，分针和秒针。我想使用实时时钟数据来控制图像的旋转。

我可以使所有代码组件分开工作，并且可以旋转秒针的单个图像。但是，当我添加JS和CSS来显示和旋转所有图像时，它们可以正确显示，但是没有旋转。

<script>
function everySecond() {
    var currentTime = new Date();
    var h = currentTime.getHours();
    var m = currentTime.getMinutes();
    var s = currentTime.getSeconds();
    if(h == 24){
        h = 0;
    }
    if(h > 12){
       h = h - 12;
    }
    var hp = h * 360 / 12;
    var mp = m * 360 / 60;
    var sp = s * 360 /60;
    $("#seconds").css({
       'transform': 'rotate(' + sp + 'deg)'
    });
    $("#minutes").css({
        'transform': 'rotate(' + mp + 'deg)'
    });
    $("#hours").css({
        'transform': 'rotate(' + hp + 'deg)'
    });
}
setInterval(everySecond, 1000);
</script>
<style>
.image {
    position: absolute;
    top: 50%;
    left: 50%; 
    margin:-200px 0 0 -200px;
}
</style>
</head>
<body> 
<div>
    <img class="image" 
src="C:\Users\name\Desktop\Watch\watchhandcompass.gif">
    <img id="hours" class="image"  
src="C:\Users\name\Desktop\Watch\hourhandcompass.gif">
    <img id="minutes" class="image"  
src="C:\Users\name\Desktop\Watch\minutehandcompass.gif">
    <img id="seconds" class="image"  
src="C:\Users\name\Desktop\Watch\secondhandcompass.gif">
</div>
</body>

使用getseconds（）控制时钟图像的旋转（不是动画）

0 个答案: