我正在尝试使用HTML、CSS和JS构建一个动画时钟,我已经成功地将小时数定位到正确的位置,但是数字现在不是直的。
我一直在研究text-orientation
属性,并尝试使用text-orientation:auto
和text-orientation:mixed
,但似乎都没有起作用。
这是目前我的时钟的样子:
const clock = document.getElementById('clock');
const numbers = clock.children;
for (let i = 0; i < 12; i++) {
numbers[i].style.transform = 'translate(0, -50%) rotate(' + (90 + i * 30) + 'deg)';
}
const hours = document.getElementById('hours');
const minutes = document.getElementById('minutes');
const seconds = document.getElementById('seconds');
setInterval(function() {
const time = new Date();
hours.style.transform = 'translate(0, -50%) rotate(' + (time.getHours() % 12 * 30 - 90) + 'deg)';
minutes.style.transform = 'translate(0, -50%) rotate(' + (time.getMinutes() * 6 - 90) + 'deg)';
seconds.style.transform = 'translate(0, -50%) rotate(' + (time.getSeconds() * 6 - 90) + 'deg)';
});
#clock {
width: 200px;
height: 200px;
border: 3px solid black;
border-radius: 50%;
position: relative;
}
.hour{
position: absolute;
top: 50%;
left: 0;
width: 100%;
text-orientation: mixed;
}
.handle {
position: absolute;
top: 50%;
left: 50%;
transform-origin: left center;
}
#hours {
border-bottom: 3px solid black;
width: 25%;
}
#minutes {
border-bottom: 2px solid black;
width: 35%;
}
#seconds {
border-bottom: 1px solid red;
width: 45%;
}
<div id="clock">
<div class="hour">- 12</div>
<div class="hour">- 1</div>
<div class="hour">- 2</div>
<div class="hour">- 3</div>
<div class="hour">- 4</div>
<div class="hour">- 5</div>
<div class="hour">- 6</div>
<div class="hour">- 7</div>
<div class="hour">- 8</div>
<div class="hour">- 9</div>
<div class="hour">- 10</div>
<div class="hour">- 11</div>
<div class="handle" id="hours"></div>
<div class="handle" id="minutes"></div>
<div class="handle" id="seconds"></div>
</div>