从下拉菜单中获取小时分钟值，仅在javascript中的setInterval()中进行初始化

Get hour minute value from dropdown for initialization only inside setInterval() in javascript

本文关键字：setInterval 中的 初始化 javascript 仅在 获取 下拉菜单 小时 分钟      更新时间：2023-09-26

我有时钟旋转，分针和时针需要设置在特定的角度。我从两个角度得到一个是时针，另一个是分针。但问题是，当我使用

从下拉菜单中获取值时
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()外，但分针根本不旋转到所需位置。

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

您需要获得当前分钟一次，然后在每次调用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 );
});
相关文章：