使用香草js旋转时钟手
使用香草js旋转时钟手
提问于 2017-02-25 12:55:54
<div class="clock">
<div class="space">
<div class="hourhand"></div>
<div class="minutehand"></div>
<div class="sechand" id="secc"></div>
</div>
</div>function date(){
var d = new Date();
const sec= d.getSeconds();
var x = document.getElementById('secc');
x.style.transform="rotate(sec)";
console.log(sec);
}
setInterval(date, 1000);我正在用普通的js制作这个简单的时钟(我还没有显示CSS代码)。脚本标记- x.style.transform中的行不接受sec作为其输入？那么我应该如何将sec值传递给它以使其旋转呢？
回答 3
Stack Overflow用户
回答已采纳
发布于 2017-02-25 13:02:04
Stack Overflow用户
发布于 2017-02-25 13:05:32
旋转语法：
transform: rotateZ(90deg)这将导致在Z平面上旋转90度，但是在你的例子中，你有一个变量，你需要传递。所以你需要把你的秒转换成度。
- 用秒表示的总度= 360度
- 1分钟内的秒=60
- 1秒钟内的度=(360度/60秒)=6度
变换: rotateZ(
${sec \* 6}deg)
对于您的代码：
x.style.transform=`rotateZ(${sec * 6}deg)`;Stack Overflow用户
发布于 2017-02-25 14:17:35
属性用于控制许多不同的转换，您要寻找的是rotate。
旋转是在deg (度，0-360)，rad (弧度，0-2*π)或turn (0-1)中指定的。
在这种情况下，我选择turn，因为旋转的计算非常直接：now / max (例如下午3点：15 / 24)。
简单的例子(注意:我并没有太费心地调整手柄)
setInterval(function() {
var date = new Date(),
positions = [
date.getHours() / 24,
date.getMinutes() / 60,
date.getSeconds() / 60
],
clock = document.querySelector('.clock');
positions.forEach(function(rotation, index) {
clock.children[index].style.transform = 'rotate(' + rotation + 'turn)';
});
}, 1000);.clock {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
border: 1px solid gold;
}
.clock > * {
position: absolute;
bottom: 50%;
left: 50%;
height: 50%;
margin-left: -1px;
border: 2px solid #000;
transform-origin: bottom;
}
.hourhand {
height: 30%;
}
.sechand {
border-color: #f00;
}<div class="clock">
<div class="hourhand"></div>
<div class="minutehand"></div>
<div class="sechand"></div>
</div>
如果您想要更多的劳力士效应(而不是每秒滴答)，您可以设置非常短的间隔(例如，20 on )，并根据getTime而不是getSeconds计算二手旋转(getTime提供自"Unix“(1970-01-01 00:00:00.000)以来的毫秒数，例如：
date.getTime() / 60000页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42456329
复制相关文章
相似问题
腾讯云开发者
