I'm relatively new to JavaScript and have spent a lot of time with date and time tutorials in the past few weeks, but there is just one thing I simply cannot figure out for my abstract clock project: having the offsetHeight of my div sync to the current time in seconds.
I'd like the clock to display the current time (give or take a few minutes, the times are in 15 minute increments in .paragraphs).
I have #time and I want the current time to sit in this little window by scrolling up via the offsetHeight. The times are in 15 minute increments, so accuracy isn't the goal here, but no matter when I open the page, I see 'Midnight' and it begins scrolling up from there.
I've tried adding delays for the keyframes * percentage but I still can't seem to figure it out. I've also tried having #progress push up #time but that hasn't been working for me either.
Here is my code:
https://jsfiddle.net/mbgtcLs6/2/
Any help would be MUCH appreciated. Thanks in advance!
The 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>
