javascript - 如何在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,但是您的代码应该可以工作。
确保您的
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>
推荐阅读
- python - Python 'test' 模块产生“TypeError:'module' 对象不可调用”
- python - 使用 mpi4py 后在 Pandas 中聚合结果
- ruby - 如何修复错误?' ....rubocop- ... 揭示了 API 中没有的依赖项 ..."
- android - BUG 标记在触摸时会改变颜色
- vba - Powerpoint VBA - 如何旋转直角三角形?
- sql - SQL:如何在每个 ID 中查询 max datetime 中的值并用前一个值填充空值
- verilog - 在 Vivado + Verilog 中创建多端口块 ram
- asp.net - ADFS SSO - 多个声明感知应用程序能够相互重定向
- spring - 审计(@CreatedDate)不适用于 Spring Boot Cassandra
- c - 缩放 cairo 上下文时,PangoCairo 显示杂乱的文本