javascript - 如何使用 CSS 样式变换将图像旋转一个 Angular 变量？

Question

var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
console.log("hour"+h+"min"+m+"sec"+s);

document.getElementById("sec").style.transform = "rotate((s*6)deg)";

我正在尝试将 ID 为 sec 的图像旋转(当前秒 * 6)度。但似乎 css rotate 只能像 rotate(40deg) 一样采用恒定的度数。 如果我做 var x = 40;旋转('x'deg); 或类似的东西它不会工作。

如何让它随变量旋转？

Answer 1

您正在做的是将 rotate((s*6)deg) 字符串(字面意思是 S*6 而不是结果)提供到转换样式中。您需要拆分字符串，以便将结果连接到字符串中。

使用这个:

ar today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
console.log("hour"+h+"min"+m+"sec"+s);

document.getElementById("sec").style.transform = "rotate(" + (s*6) + "deg)";

这会将变量 s 的值乘以 6 传递给字符串。因此，CSS 解析器不会询问文字字符串 s*6deg 的含义，而是会收到 120deg(如果变量 s 是值20) 这是一个有效的 CSS 值。这与您在上面一行的 console.log 调用中使用的概念相同。