为什么没有显示实际时间？ Jquery/CSS时钟

Question

我使用找到的代码 here, and here 构建了一个 CSS/Jquery 动画时钟。当前 clocks.js 文件中包含来自 codepen 的代码，国际项目已被删除。但似乎都没有显示当前时间。所有元素显示 - 钟面、时针、分针、秒针。每当页面加载时，它运行s（起初它不会运行在 Safari 中使用来自 cssanimation.rocks 的代码添加到 -webkit- 行中）。但一切总是从 12 点开始。

这是我的 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>

这是我的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);
}

同样在 cssanimation.rocks 页面上，有一个指令将分钟和秒容器从动画替换为过渡（如下所示），但每当我进行更改时，手的 none甚至会再四处走动，即使我有 -webkit- 版本的线条。

.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);
}

这是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);
}

请注意，我已确保此脚本已加入队列（这是在 WordPress 网站上），并且根据 Inspector 的说法，它正在加载。在 FF 和 Safari 中查看这些教程，他们的结果工作得很好。我只是不知道为什么它不为我设定时间。我知道一点php，但是jquery我还完全看不懂

Answer 1

错误，我从哪里开始你丢失的东西，所以如果你在 codepen 中查看 JS 面板并单击设置图标，你会看到那里有大量依赖项，关键是 moment JS，正在从这里加载 https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.js.

Moment 是对日期和时间进行各种处理的库。

在您的代码中您的调用时刻函数示例：

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

看起来它增加了夏令时，如果您删除它，时钟会倒退一个小时。

您还错过了 getTime 功能，这是设置初始时间，这就是为什么您的时钟开始为 12

我修改了笔并将所有脚本（删除了 2 个）标签放在 HTML 部分，这样您就可以看到正在加载的内容。没有其他您会很高兴知道的依赖项。

Pen Forked

PS：这里没有jquery被加载，这是纯js（真的更好，少了一个依赖）

Answer 2

在你的代码中似乎缺少一些东西，至少在你调用的东西中从来没有复制到 initLocalClocks() 函数中执行。

示例：https://jsfiddle.net/obravoo/sj0fg3zv/1/

在之前的回答中 moment.js 提到了脚本，但这仅适用于使用在脚本运行的用户计算机上运行的各种不同时间表的国际时钟。

要在加载网络时初始化函数，您可以使用：

window.onload = initLocalClocks();

或者如果你想使用 jQuery 你可以使用这个：

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

您的代码中的一个细节是您占用了选择器“.local”。但是在您的代码中没有包含 class ".local."

的容器

为什么没有显示实际时间？ Jquery/CSS时钟

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

jquery

css-animations

clock