1

我有时钟旋转，分针和时针需要设置在特定的角度。这个角度我从两个下拉一个用于时针和另一个用于分钟。但问题是当我从下拉列表中获取价值时

var f = document.getElementById("minute3r");
var currentMinute = f.options[f.selectedIndex].value ;

两个时钟指针卡在一个地方。我想从下拉列表中获取小时和分钟的初始值，但仅一次，之后我想为这两个变量添加时间，以便时钟指针像真正的时钟一样旋转。这是我的代码

 setInterval( function() {
          var f = document.getElementById("minute3r");
          var currentMinute = f.options[f.selectedIndex].value ;
          mins=currentMinute;
          var mdegree = mins * 6;
          var mrotate = "rotate(" + mdegree + "deg)";

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

          }, 1000 );

mintute3r我的下拉菜单在哪里

<select id="minute3r" onchange="disableFunc2()">
        </select>

我试着把 

var f = document.getElementById("minute3r");
var currentMinute = f.options[f.selectedIndex].value ;

setInterval()在分针之外，根本不旋转到所需的位置。

如何从下拉列表中获取小时分钟值仅用于初始化。请帮助。

4

1 回答 1

2

您需要获取当前分钟一次，然后在每次调用 setInterval 时递增它。要在“时钟”滴答作响时更新当前分钟，您可以清除间隔并重新开始。

确保将您的时间间隔设置为 60 秒（60000 毫秒），否则您的分针将变成秒针 :)

var interval = -1;
$('#minute3r').on('change', function() {
    var currentMinute = $(this).val(); //get current value

    clearInterval(interval); //stop previous "ticking" of clock
    interval = setInterval( function() {
        var mdegree = currentMinute * 6;
        var mrotate = "rotate(" + mdegree + "deg)";

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

        currentMinute = (currentMinute + 1) % 60; //increment currentMinute, but keep it < 60

        //you'll also need to include your hour handling here, i.e., if currentMinute == 0, then update hour hand

    }, 60000 );
});
于 2013-04-23T20:29:04.563 回答