如何在javascript中使用变量作为旋转函数?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在javascript中使用变量作为旋转函数?相关的知识,希望对你有一定的参考价值。

我正在尝试使用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);

        }
答案

我没有jquery可以验证,但是您的代码应该可以工作。

  • 确保您的smh变量是数字而不是字符串,否则添加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>

以上是关于如何在javascript中使用变量作为旋转函数?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 AJAX 调用中获取 JavaScript 变量作为 Laravel 路由名称

如何在 C# 函数中将 jquery 变量作为参数传递

如何从 Javascript 函数中调用 PL/SQL 变量?

如何在 JavaScript 对象文字中使用变量作为键?

如何在javascript或jquery中使用变量作为数组键[重复]

在 CSS 旋转函数中使用 CSS 变量