Why isn't the actual time displaying? Jquery/CSS Clock

Question

I've built a little CSS/Jquery animated clock using code found here, and here. Currently the clocks.js file has the code from codepen, with the international items taken out. But neither one seems to display the current time. All the elements display - clock face, hour hand, minutes hand, second hand. And it runs (at first it wouldn't run in Safari with the code from cssanimation.rocks so added in the -webkit- lines) whenever the page loads. But everything always starts at 12.

Here's my html

<div class="wall-clocks active bounce">
<article class="clock">
<section class="hours-container">
<section class="hours"></section>
</section>
<section class="minutes-container">
<section class="minutes"></section>
</section>
<section class="seconds-container">
<section class="seconds"></section>
</section>
</article></div>

Here is my CSS

.wall-clocks {
    padding: 0;
    width: 9em;
    height: 9em;
    margin-left: 57%;
    overflow: hidden;
    position: absolute;
}

.clock {
    border-radius: 50%;
    background: url(//path/clock-face.svg) no-repeat center;
    background-size: 100%;
    height: 9em;
    padding-bottom: 0;
    position: relative;
    width: 9em;
}

.clock::after {
    background: #000;
    border-radius: 50%;
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    width: 4%;
    height: 4%;
    z-index: 10;
}

.minutes-container, .hours-container, .seconds-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.hours {
    background: #000;
    width: 2.5%;
    height: 20%;
    position: absolute;
    left: 48.75%;
    top: 30%;
    transform-origin: 50% 71%;
    -webkit-transform-origin: 50% 71%;
}

.minutes {
    background: #000;
    width: 2%;
    height: 36%;
    position: absolute;
    left: 49%;
    top: 14%;
    transform-origin: 50% 78.5%;
    -webkit-transform-origin: 50% 78.5%;
}

.seconds {
    background: #ed1c24;
    width: 1%;
    height: 45%;
    position: absolute;
    left: 49.5%;
    top: 14%;
    transform-origin: 50% 71%;
    -webkit-transform-origin: 50% 71%;
    z-index: 8;
}

@keyframes rotate {
    100% {
        transform: rotateZ(360deg);
    }
}

@-webkit-keyframes rotate {
    100%{
        -webkit-transform: rotateZ(360deg);
    }
}

.hours-container {
    animation: rotate 43200s infinite linear;
    -o-animation: rotate 43200s infinite linear;
    -ms-animation: rotate 43200s infinite linear;
    -moz-animation: rotate 43200s infinite linear;

    -webkit-animation-direction: rotate;
    -webkit-animation-duration: 43200s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}

.minutes-container {
    animation: rotate 3600s infinite steps(60);
    -webkit-animation: rotate 3600s infinite steps(60);
}

.seconds-container {
    animation: rotate 60s infinite steps(60);
    -webkit-animation: rotate 60s infinite steps(60);
}

Also on the cssanimation.rocks page, there is an instruction to replace the minute and second containers from animation to transitions (as follows), but whenever I make that change, none of the hands will even go around anymore, even if I had -webkit- versions of the lines.

.minutes-container {
    transition: transform 0.3s cubic-bezier(.4,2.08,.55,.44);
}
.seconds-container {
    transition: transform 0.2s cubic-bezier(.4,2.08,.55,.44);
}

Here's the js

/*
* Starts any clocks using the user's local time
*/
function initLocalClocks() {
// Get the local time using JS
var date = new Date;
var seconds = date.getSeconds();
var minutes = date.getMinutes();
var hours = date.getHours();

// Create an object with each hand and it's angle in degrees
var hands = [{
hand: 'hours',
angle: (hours * 30) + (minutes / 2)
}, {
hand: 'minutes',
angle: (minutes * 6)
}, {
hand: 'seconds',
angle: (seconds * 6)
}];
// Loop through each of these hands to set their angle
for (var j = 0; j < hands.length; j++) {
var elements = document.querySelectorAll('.local .' + hands[j].hand);
for (var k = 0; k < elements.length; k++) {
elements[k].style.transform = 'rotateZ(' + hands[j].angle + 'deg)';
// If this is a minute hand, note the seconds position (to calculate minute position later)
if (hands[j].hand === 'minutes') {
elements[k].parentNode.setAttribute('data-second-angle', hands[j + 1].angle);
}
}
}
}

/*
* Move the second containers
*/
function moveSecondHands() {
var containers = document.querySelectorAll('.bounce .seconds-container');
setInterval(function() {
for (var i = 0; i < containers.length; i++) {
if (containers[i].angle === undefined) {
containers[i].angle = 6;
} else {
containers[i].angle += 6;
}
containers[i].style.webkitTransform = 'rotateZ(' + containers[i].angle + 'deg)';
containers[i].style.transform = 'rotateZ(' + containers[i].angle + 'deg)';
}
}, 1000);
for (var i = 0; i < containers.length; i++) {
// Add in a little delay to make them feel more natural
var randomOffset = Math.floor(Math.random() * (100 - 10 + 1)) + 10;
containers[i].style.transitionDelay = '0.0' + randomOffset + 's';
}
}

/*
* Set a timeout for the first minute hand movement (less than 1 minute), then rotate it every minute after that
*/
function setUpMinuteHands() {
// More tricky, this needs to move the minute hand when the second hand hits zero
var containers = document.querySelectorAll('.minutes-container');
var secondAngle = containers[containers.length - 1].getAttribute('data-second-angle');
console.log(secondAngle);
if (secondAngle > 0) {
// Set a timeout until the end of the current minute, to move the hand
var delay = (((360 - secondAngle) / 6) + 0.1) * 1000;
console.log(delay);
setTimeout(function() {
moveMinuteHands(containers);
}, delay);
}
}

/*
* Do the first minute's rotation, then move every 60 seconds after
*/
function moveMinuteHands(containers) {
for (var i = 0; i < containers.length; i++) {
containers[i].style.webkitTransform = 'rotateZ(6deg)';
containers[i].style.transform = 'rotateZ(6deg)';
}
// Then continue with a 60 second interval
setInterval(function() {
for (var i = 0; i < containers.length; i++) {
if (containers[i].angle === undefined) {
containers[i].angle = 12;
} else {
containers[i].angle += 6;
}
containers[i].style.webkitTransform = 'rotateZ(' + containers[i].angle + 'deg)';
containers[i].style.transform = 'rotateZ(' + containers[i].angle + 'deg)';
}
}, 60000);
}

Note that I have made sure that this script is enqueued (this is on a WordPress site) and according to Inspector it is loading. Viewing these tutorials in FF and Safari, their results work just fine. I'm just at a loss as to why it's not setting the time for me. I know a little php, but jquery is not something I can read at all yet.

Answer 1

In your code seemed to lack something, at least in what you call never copied to the initLocalClocks () function is executed.

Example: https://jsfiddle.net/obravoo/sj0fg3zv/1/

In the previous answer moment.js mention the script, but that's only for international clocks that use various different schedules that runs on the user's computer where the script runs.

To initialize a function when loading the web you can use this:

window.onload = initLocalClocks();

or if you want to use jQuery you can use this:

$(document).ready ( function(){
   initLocalClocks();
});​

A detail in your code is that you occupy the selector ".local." but in your code there is no container that holds the class ".local."

Answer 2

err, where do i start your missing stuff, so if you look in the JS panel in codepen and click on the settings icon, you'll see a load of dependencies in there, the key one is moment JS, its being loaded from here https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.js.

Moment is library that does all sorts of magic with dates and times.

in your code your calling moment functions example:

 moment.tz.add([
'Eire|GMT IST|0 

looks like it adds daylight savings, clock goes back an hour if you remove it.

You also missed the getTime function, this is setting the initial time, that's why your clock starts as 12

I've modded the pen and put all the scripts (removed 2) tags in the HTML part so you can see what's being loaded. there are no other dependencies you'll be glad to know.

Pen Forked

PS: there is no jquery being loaded here, this is pure js (all the better really, one less dependency)