Как использовать переменную для функции вращения в JavaScript?

Question

Я пытаюсь вращать элемент каждую секунду на определенную величину, используя transform: rotate (), но я не могу понять, как использовать переменную для вращения вместо строки.

Я пытался создать функцию конкатенации, а также конкатенацию внутри самой функции поворота

        function runTime() {

            var d = new Date();
            var s = s+6
            var m = m+.1
            var h = h+.008333
            $("#seconds").css({'transform':'rotate('+s+'deg)'});
            $("#minutes").css({'transform':'rotate('+m+'deg)'});
            $("#hours").css({'transform':'rotate('+h+'deg)'});
            t=setTimeout(runTime,1000);

        }

Answer 1

У меня нет jquery для проверки, но ваш код должен работать.

• Убедитесь, что ваши s, m и h переменные являются числами, а нестроки, в противном случае добавление s+6 будет объединено, а не добавление.

• Вы можете использовать setInterval(runTime, 1000) один раз вместо setTimeout каждую итерацию

• Вы можете использовать строковые шаблоны, например, `rotate(${h}deg`, чтобы облегчить чтение ваших свойств CSS.

const $ = document.querySelector.bind(document);

let runTime = () => {
  let d = new Date();
  let s = d.getSeconds() * 6;
  let m = d.getMinutes() * 6
  let h = d.getHours() * 30;
  $("#seconds").style.transform = `rotate(${s}deg)`;
  $("#minutes").style.transform = `rotate(${m}deg)`;
  $("#hours").style.transform = `rotate(${h}deg)`;
}

setInterval(runTime, 1000);

div {
  outline: 1px solid black;
  position: absolute;
}

#hours {
  width: 3px;
  height: 26px;
}

#minutes {
  width: 2px;
  height: 30px;
}

#seconds {
  width: 1px;
  height: 34px;
}

<div id="seconds"></div>
<div id="minutes"></div>
<div id="hours"></div>