我对 JavaScript 比较陌生，在过去几周里花了很多时间在日期和时间教程上，但是对于我的抽象时钟项目，只有一件事我根本无法弄清楚：让我的 div 的 offsetHeight 同步到当前时间以秒为单位。
我希望时钟显示当前时间（给或花几分钟，时间在 .paragraphs 中以 15 分钟为增量）。
我有#time，我希望通过 offsetHeight 向上滚动，将当前时间放在这个小窗口中。时间以 15 分钟为增量，因此准确性不是这里的目标，但无论我何时打开页面，我都会看到“午夜”并从那里开始向上滚动。
我已经尝试为关键帧 * 百分比添加延迟，但我似乎仍然无法弄清楚。我也尝试过让#progress 推高#time，但这对我也不起作用。
这是我的代码：
https://jsfiddle.net/mbgtcLs6/2/
任何帮助将非常感激。提前致谢！
的HTML：
// total height of time section
var times = document.getElementById("times")
var timesTotalHeight = times.offsetHeight;
setInterval(function() {
var myDate = new Date;
var hoursInSeconds = myDate.getHours() * 60 * 60;
var minutesInSeconds = myDate.getMinutes() * 60;
var seconds = myDate.getSeconds() + minutesInSeconds + hoursInSeconds;
//time is sped up x10
var percentage = seconds;
console.log(percentage)
times.style.height = Math.round(timesTotalHeight * percentage) + "px";
// times.style.keyframes.animationDelay = (seconds * percentage) + "px";
}, 1000)body {
background-color: white;
/* overflow: hidden;*/
margin: 0 auto;
}
/*#progress position:fixed or absolute, but doesn't push #times up inside as a child or its own class?
*/
/*
#progress {
width: 200px;
background-color: blue;
position: absolute;
left: 10px;
height: 1px;
top: 0;
}*/
.container2 {
width: 88vw;
background-color: white;
height: 13vw;
position: relative;
margin: 0 auto;
margin-top: 20vw;
}
.container:before {
width: 88vw;
height: 13vw;
border-style: solid;
border-color: black;
border-width: 5px;
margin: 0 auto;
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
box-shadow: inset 0 0 20px black;
pointer-events: none;
}
.container {
clip-path: inset(1% 1% 1% 1%);
clip-path-position: fixed;
width: 91vw;
position: relative;
height: 13.8vw;
margin: 0 auto;
overflow: hidden;
}
#times {
font-family: "Happy Times at the IKOB";
text-align: center;
position: relative;
font-size: 7.8vw;
line-height: 4vw;
margin: 0 auto;
/* -webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;*/
color: black;
animation-name: upwards;
animation-duration: 3600s;
animation-delay: ;
z-index: -1;
/*height: 100vw;*/
}
/*.times li { line-height: 50px; width: 100vw;
} */
@keyframes upwards {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-100vw);
}
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="assets/clock2.css">
<title>Clock</title>
</head>
<body>
<div class="container2">
<div class="container">
<div id="times">
<p>Midnight</p>
<p>Twelve fifteen</p>
<p>Half past twelve</p>
<p>Quarter til one</p>
<p>One O'Clock</p>
<p>Quarter past one</p>
<p>One thirty in the morning</p>
<p>Twelve thirty AM</p>
<p>Two in the morning</p>
<p>Quarter past two</p>
<p>Half past two</p>
<p>Two forty-five</p>
<p>Three in the morning</p>
<p>Three fifteen</p>
<p>Three thirty AM</p>
<p>Quarter til four</p>
<p>Four in the morning</p>
<p>Four fifteen</p>
<p>Four thirty AM</p>
<p>Four forty five in the morning</p>
<p>Five AM</p>
<p>Quarter past five</p>
<p>Five thirty</p>
<p>Five forty five AM</p>
<p>Six in the morning</p>
<p>Six fifteen in the morning</p>
<p>Six thirty AM</p>
<p>Quarter til seven</p>
<p>Seven in the morning</p>
<p>Seven fifteen AM</p>
<p>Seven thirty in the morning</p>
<p>Seven forty five</p>
<p>Eight in the morning</p>
<p>Quarter past eight</p>
<p>Eight thirty AM</p>
<p>Quarter til nine</p>
<p>Nine in the morning</p>
<p>Nine fifteen</p>
<p>Half past nine</p>
<p>Nine forty five</p>
<p>Ten in the morning</p>
<p>Quarter past ten</p>
<p>Half past ten</p>
<p>Quarter til eleven</p>
<p>Eleven in the morning</p>
<p>Eleven fifteen</p>
<p>Half past eleven</p>
<p>Quarter til noon</p>
<p>Twelve O'Clock</p>
<p>Twelve fifteen</p>
<p>Half past twelve</p>
<p>Quarter til one</p>
<p>One O'Clock</p>
<p>Quarter past one</p>
<p>One thirty in the afternoon</p>
<p>Twelve thirty PM</p>
<p>Two in the afternoon</p>
<p>Quarter past two</p>
<p>Half past two</p>
<p>Two forty-five</p>
<p>Three in the afternoon</p>
<p>Three fifteen</p>
<p>Three thirty PM</p>
<p>Quarter til four</p>
<p>Four in the afternoon</p>
<p>Four fifteen</p>
<p>Four thirty PM</p>
<p>Half past four</p>
<p>Five PM</p>
<p>Quarter past five</p>
<p>Five thirty</p>
<p>Five forty five PM</p>
<p>Six in the evening</p>
<p>Quarter past six</p>
<p>Six thirty PM</p>
<p>Quarter til seven</p>
<p>Seven in the evening</p>
<p>Seven fifteen</p>
<p>Seven thirty in the evening</p>
<p>Seven forty five</p>
<p>Eight in the evening</p>
<p>Quarter past eight</p>
<p>Eight thirty at night</p>
<p>Quarter til nine</p>
<p>Nine at night</p>
<p>Nine fifteen</p>
<p>Half past nine</p>
<p>Nine forty five</p>
<p>Ten in the evening</p>
<p>Quarter past ten</p>
<p>Ten thirty at night</p>
<p>Quarter til eleven</p>
<p>Eleven O'Clock</p>
<p>Eleven fifteen</p>
<p>Half past eleven</p>
<p>Eleven forty five</p>
</div>
</div>
</div>
<div id="progress"></div>
<script type="text/javascript" src="assets/clock2.js"></script>
</body>
</html>