Я относительно новичок в JavaScript и провел много времени с учебниками по дате и времени в последние несколько недель, но есть только одна вещь, которую я просто не могу понять для своего проекта абстрактных часов: наличие offsetHeight моего div syn c к текущему времени в секундах.
Мне бы хотелось, чтобы часы отображали текущее время (дайте или возьмите несколько минут, время с шагом 15 минут в .paragraphs).
У меня есть # time и я хочу текущее время, чтобы сидеть в этом маленьком окне, прокручивая вверх через offsetHeight. Время указано с шагом в 15 минут, поэтому точность здесь не является целью, но независимо от того, когда я открываю страницу, я вижу «Полночь», и она начинает прокручиваться оттуда.
Я пытался добавить задержки для ключевых кадров * процент, но я все еще не могу понять это. Я также пытался получить #progress pu sh up # 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>