【发布时间】：2015-05-03 06:22:58
【问题描述】：
我使用 here 和 here 找到的代码构建了一个小的 CSS/Jquery 动画时钟。当前，clocks.js 文件中包含来自 codepen 的代码，其中国际项目已被删除。但似乎都没有显示当前时间。所有元素显示 - 钟面，时针，分针，秒针。每当页面加载时，它就会运行（起初它不会在 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 页面上，有一条指令将分钟和秒容器从动画替换为过渡（如下所示），但是每当我进行更改时，任何手都不会再移动了，即使我有 -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还不是我能读的。
【问题讨论】：
-
好吧，我确实让它工作了。我不确定为什么这会有所不同，但我没有从functions.php文件中加入脚本，而是从footer.php中调用它。虽然它似乎是从函数加载的，但它显然没有执行。现在可以了，而且看起来很棒！耶谢谢你的帮助:)
标签： jquery css-animations clock