我需要连接CSS3过渡以与Javascript时钟中的当前时间对齐。这是什么意思?当时钟为30秒时,时钟的边框半径应为半蓝色和半红色。经过的每一秒都会发生变化。
我目前已经创建了一个工作得很好并在下面发布的Javascript时钟。这是某些地方的5点之一。
我的CSS3过渡在外观和感觉上正确循环,但它没有同步到Javascript时钟。有谁知道怎么做?
这是小提琴:http://jsfiddle.net/LMo/85ePP/3/
function updateClock ( ) {
var currentTime = new Date ( );
var currentHoursRaw = currentTime.getHours ( );
var currentHours = currentTime.getHours ( );
var currentMinutes = currentTime.getMinutes ( );
var currentSeconds = currentTime.getSeconds ( );
// Pad the minutes and seconds with leading zeros, if required
currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;
// Compose the string for display
var currentTimeString = "5" + ":" + currentMinutes + ":" + currentSeconds;
if(currentHoursRaw == 1) {
$("#time").html(currentTimeString + "<br/>" +"<span>Area '8'</span>");
//target iframe.attribute replace with the other area
}
if(currentHoursRaw == 2) {
$("#time").html(currentTimeString + "<br/>" + "<span>Area '7'</span>");
}
if(currentHoursRaw == 3) {
$("#time").html(currentTimeString + "<br/>" + "<span>Area '6'</span>");
}
if(currentHoursRaw == 4) {
$("#time").html(currentTimeString + "<br/>" + "<span>Area '5'</span>");
}
if(currentHoursRaw == 5) {
$("#time").html(currentTimeString + "<br/>" + "<span>Area '4'</span>");
}
if(currentHoursRaw == 6) {
$("#time").html(currentTimeString + "<br/>" + "<span>Area '3'</span>");
}
if(currentHoursRaw == 7) {
$("#time").html(currentTimeString + "<br/>" + "<span>Area '2'</span>");
}
if(currentHoursRaw == 8) {
$("#time").html(currentTimeString + "<br/>" + "<span>Area '1'</span>");
}
if(currentHoursRaw == 9) {
$("#time").html(currentTimeString + "<br/>" + "<span>Area 'UTC'</span>");
}
if(currentHoursRaw == 10) {
$("#time").html(currentTimeString + "<br/>" + "<span>Area '-1'</span>");
}
if(currentHoursRaw == 11) {
$("#time").html(currentTimeString + "<br/>" + "<span>Area '-2'</span>");
}
if(currentHoursRaw == 12) {
$("#time").html(currentTimeString + "<br/>" + "<span>Area '-3'</span>");
}
if(currentHoursRaw == 13) {
$("#time").html(currentTimeString + "<br/>" + "<span>Area '-4'</span>");
}
if(currentHoursRaw == 14) {
$("#time").html(currentTimeString + "<br/>" + "<span>Area '-5'</span>");
}
if(currentHoursRaw == 15) {
$("#time").html(currentTimeString + "<br/>" + "<span>Area '-6'</span>");
}
if(currentHoursRaw == 16) {
$("#time").html(currentTimeString + "<br/>" + "<span>Area '-7'</span>");
}
if(currentHoursRaw == 17) {
$("#time").html(currentTimeString + "<br/>" + "<span>Area '-8'</span>");
}
if(currentHoursRaw == 18) {
$("#time").html(currentTimeString + "<br/>" + "<span>Area '-9'</span>");
}
if(currentHoursRaw == 19) {
$("#time").html(currentTimeString + "<br/>" + "<span>Area '-10/+14'</span>");
}
if(currentHoursRaw == 20) {
$("#time").html(currentTimeString + "<br/>" + "<span>Area '-11/+13'</span>");
}
if(currentHoursRaw == 21) {
$("#time").html(currentTimeString + "<br/>" + "<span>Area '12'</span>");
}
if(currentHoursRaw == 22) {
$("#time").html(currentTimeString + "<br/>" + "<span>Area '11'</span>");
}
if(currentHoursRaw == 23) {
$("#time").html(currentTimeString + "<br/>" + "<span>Area '10'</span>");
}
if(currentHoursRaw == 24) {
$("#time").html(currentTimeString + "<br/>" + "<span>Area '9'</span>");
}
}
$(document).ready(function(){
setInterval('updateClock()', 1000);
});
CSS过渡:
.timerSize4 {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
position: absolute;
z-index: 7;
width: 433px;
height: 433px;
border-radius: 50%;
}
#timer4 {
opacity: .7;
top: 24%;
left: 37%;
background-color: #99182d;
/* Plays an animation with the same speed from beginning to end */
-webkit-animation-timing-function: steps(1);
animation-timing-function: steps(1);
-webkit-animation-duration: 60s;
animation-duration: 60s;
-webkit-animation-name: timerBGChange;
animation-name: timerBGChange;
z-index: -1;
}
/* deals with the right half ot he circle */
#timer4a {
background-color: #02266e;
/* Clip property lets you specify a rectangle to clip an absolutey position element*/
clip:rect(0px,216.5px,433px,0px);
-webkit-animation-timing-function: linear,steps(1);
animation-timing-function: linear,steps(1);
-webkit-animation-duration: 30s,60s;
animation-duration: 30s,60s;
-webkit-animation-name: timerRotate,timerBGChange2;
animation-name: timerRotate,timerBGChange2;
z-index: 7;
}
/* deals with second half of circle */
#timer4b {
background-color: #02266e;
clip:rect(0,433px,433px,216.5px);
-webkit-animation-timing-function: steps(1);
animation-timing-function: steps(1);
-webkit-animation-duration: 60s;
animation-duration: 60s;
-webkit-animation-name: timerBG1;
animation-name: timerBG1;
z-index: 7;
}
/* blue on right side unil it hits 30 */
#timer4c {
background-color: #02266e;
clip:rect(0px,216.5px,433px,0px);
-webkit-animation-timing-function: steps(1);
animation-timing-function: steps(1);
-webkit-animation-duration: 60s;
animation-duration: 60s;
-webkit-animation-name: timerBG2;
animation-name: timerBG2;
z-index: 7;
}
@-webkit-keyframes timerBGChange {
0% { background-color: #02266e; }
50% { background-color: #99182d; }
}
@-webkit-keyframes timerRotate {
0% { -webkit-transform:rotate(0); }
100% { -webkit-transform:rotate(360deg); }
}
@-webkit-keyframes timerBGChange2 {
0% { background-color: #99182d; }
50% { background-color: #02266e; }
}
@-webkit-keyframes timerBG1 {
0% { opacity: 0; background-color: #99182d; }
25% { opacity: 1; }
50% { opacity: 0; background-color: #02266e; }
75% { opacity: 1; }
}
@-webkit-keyframes timerBG2 {
0% { opacity: 1; }
25% { opacity: 0; background-color: #99182d; }
50% { opacity: 1; }
75% { opacity: 0; background-color: #02266e; }
}
@keyframes timerBGChange {
0% { background-color: #02266e; }
50% { background-color: #99182d; }
}
@keyframes timerRotate {
0% { transform:rotate(0); }
100% { transform:rotate(360deg); }
}
@keyframes timerBGChange2 {
0% { background-color: #99182d; }
50% { background-color: #02266e; }
}
@keyframes timerBG1 {
0% { opacity: 0; background-color: #99182d; }
25% { opacity: 1; }
50% { opacity: 0; background-color: #02266e; }
75% { opacity: 1; }
}
@keyframes timerBG2 {
0% { opacity: 1; }
25% { opacity: 0; background-color: #99182d; }
50% { opacity: 1; }
75% { opacity: 0; background-color: #02266e; }
}
答案 0 :(得分:2)
您可以使用代码发布http://jsfiddle.net/示例吗?
实现您想要的最佳选择是添加必要的类(.timerSize4
),该类从驱动时钟的javascript函数触发动画。
然后,您可以添加一个同步2个时钟的animation-delay
的类。
像$("<style>.timerSize4 {animation-delay:"+theNegativeTimerDelayInMs+" ms;}</style>").appendTo("body")
有关动画延迟的更多信息,请点击此处: http://www.w3schools.com/cssref/css3_pr_animation-delay.asp 要么 How can I start CSS3 Animations at a specific spot?
这是一个有效的例子: http://jsfiddle.net/85ePP/2/
更新:这是更改(我还更改了文档就绪功能):
function startTimer(){
var currentTime = new Date();
var currentSeconds = currentTime.getSeconds();
var currentMs = -currentTime.getMilliseconds()-currentSeconds*1000;
$("<style>.timerSize4 {animation-delay: "+currentMs+"ms;-webkit-animation-delay: "+currentMs+"ms;}</style>").appendTo("head");
updateClock();
setInterval(function(){updateClock();}, 1000);
}
$(document).ready(function(){
startTimer();
});
更新:它适用于Chrome。在Firefox中它在秒和小s之间有一个空格,并没有认为它是有效的CSS。它现在有效。我也从几秒变为毫秒,因此更准确。
更新:这是适合我的完整示例:
<style>
/* CLOCK */
.clock-container {
left: 29.5%;
position: absolute;
top: 8%;
z-index: 20;
}
#clock {
background:rgba(2,38,110,.95);
border-radius: 50%;
height: 22.1875em;
margin-top: 48%;
text-align: center;
text-transform: uppercase;
width: 22.1875em;
left: 48%;
position: relative;
z-index: 10;
}
#time {
font-family: 'Gotham-Black';
font-size:60px;
letter-spacing: 3px;
text-align: center;
padding-top:138px;
z-index: 10;
}
span {
display: inline;
margin-top: 10px;
font-family: 'Gotham-Medium';
font-size: 16px;
}
/*CODE FROM BEN'S PURE CSS CLOCK
http://lab.thisisbensblog.com/purecssclock/
*/
.timerSize4 {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
position: absolute;
z-index: 7;
width: 433px;
height: 433px;
border-radius: 50%;
}
#timer4 {
opacity: .7;
top: 24%;
left: 37%;
background-color: #99182d;
/* Plays an animation with the same speed from beginning to end */
-webkit-animation-timing-function: steps(1);
animation-timing-function: steps(1);
-webkit-animation-duration: 60s;
animation-duration: 60s;
-webkit-animation-name: timerBGChange;
animation-name: timerBGChange;
z-index: -1;
}
/* deals with the right half ot he circle */
#timer4a {
background-color: #02266e;
/* Clip property lets you specify a rectangle to clip an absolutey position element*/
clip:rect(0px,216.5px,433px,0px);
-webkit-animation-timing-function: linear,steps(1);
animation-timing-function: linear,steps(1);
-webkit-animation-duration: 30s,60s;
animation-duration: 30s,60s;
-webkit-animation-name: timerRotate,timerBGChange2;
animation-name: timerRotate,timerBGChange2;
z-index: 7;
}
/* deals with second half of circle */
#timer4b {
background-color: #02266e;
clip:rect(0,433px,433px,216.5px);
-webkit-animation-timing-function: steps(1);
animation-timing-function: steps(1);
-webkit-animation-duration: 60s;
animation-duration: 60s;
-webkit-animation-name: timerBG1;
animation-name: timerBG1;
z-index: 7;
}
/* blue on right side unil it hits 30 */
#timer4c {
background-color: #02266e;
clip:rect(0px,216.5px,433px,0px);
-webkit-animation-timing-function: steps(1);
animation-timing-function: steps(1);
-webkit-animation-duration: 60s;
animation-duration: 60s;
-webkit-animation-name: timerBG2;
animation-name: timerBG2;
z-index: 7;
}
@-webkit-keyframes timerBGChange {
0% { background-color: #02266e; }
50% { background-color: #99182d; }
}
@-webkit-keyframes timerRotate {
0% { -webkit-transform:rotate(0); }
100% { -webkit-transform:rotate(360deg); }
}
@-webkit-keyframes timerBGChange2 {
0% { background-color: #99182d; }
50% { background-color: #02266e; }
}
@-webkit-keyframes timerBG1 {
0% { opacity: 0; background-color: #99182d; }
25% { opacity: 1; }
50% { opacity: 0; background-color: #02266e; }
75% { opacity: 1; }
}
@-webkit-keyframes timerBG2 {
0% { opacity: 1; }
25% { opacity: 0; background-color: #99182d; }
50% { opacity: 1; }
75% { opacity: 0; background-color: #02266e; }
}
@keyframes timerBGChange {
0% { background-color: #02266e; }
50% { background-color: #99182d; }
}
@keyframes timerRotate {
0% { transform:rotate(0); }
100% { transform:rotate(360deg); }
}
@keyframes timerBGChange2 {
0% { background-color: #99182d; }
50% { background-color: #02266e; }
}
@keyframes timerBG1 {
0% { opacity: 0; background-color: #99182d; }
25% { opacity: 1; }
50% { opacity: 0; background-color: #02266e; }
75% { opacity: 1; }
}
@keyframes timerBG2 {
0% { opacity: 1; }
25% { opacity: 0; background-color: #99182d; }
50% { opacity: 1; }
75% { opacity: 0; background-color: #02266e; }
}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
function updateClock ( ) {
var currentTime = new Date ( );
var currentHoursRaw = currentTime.getHours ( );
var currentHours = currentTime.getHours ( );
var currentMinutes = currentTime.getMinutes ( );
var currentSeconds = currentTime.getSeconds ( );
// Pad the minutes and seconds with leading zeros, if required
currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;
// Compose the string for display
var currentTimeString = "5" + ":" + currentMinutes + ":" + currentSeconds;
if(currentHoursRaw == 1) {
$("#time").html(currentTimeString + "<br/>" +"<span>Area '8'</span>");
}
if(currentHoursRaw == 2) {
$("#time").html(currentTimeString + "<br/>" + "<span>Area '7'</span>");
}
if(currentHoursRaw == 3) {
$("#time").html(currentTimeString + "<br/>" + "<span>Area '6'</span>");
}
if(currentHoursRaw == 4) {
$("#time").html(currentTimeString + "<br/>" + "<span>Area '5'</span>");
}
if(currentHoursRaw == 5) {
$("#time").html(currentTimeString + "<br/>" + "<span>Area '4'</span>");
}
if(currentHoursRaw == 6) {
$("#time").html(currentTimeString + "<br/>" + "<span>Area '3'</span>");
}
if(currentHoursRaw == 7) {
$("#time").html(currentTimeString + "<br/>" + "<span>Area '2'</span>");
}
if(currentHoursRaw == 8) {
$("#time").html(currentTimeString + "<br/>" + "<span>Area '1'</span>");
}
if(currentHoursRaw == 9) {
$("#time").html(currentTimeString + "<br/>" + "<span>Area 'UTC'</span>");
}
if(currentHoursRaw == 10) {
$("#time").html(currentTimeString + "<br/>" + "<span>Area '-1'</span>");
}
if(currentHoursRaw == 11) {
$("#time").html(currentTimeString + "<br/>" + "<span>Area '-2'</span>");
}
if(currentHoursRaw == 12) {
$("#time").html(currentTimeString + "<br/>" + "<span>Area '-3'</span>");
}
if(currentHoursRaw == 13) {
$("#time").html(currentTimeString + "<br/>" + "<span>Area '-4'</span>");
}
if(currentHoursRaw == 14) {
$("#time").html(currentTimeString + "<br/>" + "<span>Area '-5'</span>");
}
if(currentHoursRaw == 15) {
$("#time").html(currentTimeString + "<br/>" + "<span>Area '-6'</span>");
}
if(currentHoursRaw == 16) {
$("#time").html(currentTimeString + "<br/>" + "<span>Area '-7'</span>");
}
if(currentHoursRaw == 17) {
$("#time").html(currentTimeString + "<br/>" + "<span>Area '-8'</span>");
}
if(currentHoursRaw == 18) {
$("#time").html(currentTimeString + "<br/>" + "<span>Area '-9'</span>");
}
if(currentHoursRaw == 19) {
$("#time").html(currentTimeString + "<br/>" + "<span>Area '-10/+14'</span>");
}
if(currentHoursRaw == 20) {
$("#time").html(currentTimeString + "<br/>" + "<span>Area '-11/+13'</span>");
}
if(currentHoursRaw == 21) {
$("#time").html(currentTimeString + "<br/>" + "<span>Area '12'</span>");
}
if(currentHoursRaw == 22) {
$("#time").html(currentTimeString + "<br/>" + "<span>Area '11'</span>");
}
if(currentHoursRaw == 23) {
$("#time").html(currentTimeString + "<br/>" + "<span>Area '10'</span>");
}
if(currentHoursRaw == 24) {
$("#time").html(currentTimeString + "<br/>" + "<span>Area '9'</span>");
}
}
function startTimer(){
var currentTime = new Date ( );
var currentSeconds = currentTime.getSeconds();
var currentMs = -currentTime.getMilliseconds()-currentSeconds*1000;
$("<style>.timerSize4 {animation-delay: "+currentMs+"ms; -webkit-animation-delay: "+currentMs+"ms;}</style>").appendTo("head");
//$(".clock-container>.timerSize4").attr("id","timer4");
updateClock();
setInterval(function(){updateClock();}, 1000);
}
$(document).ready(function(){
startTimer();
});
</script>
</head>
<body>
<div class="clock-container">
<div id="clock">
<p id="time"></p>
</div>
<div id="timer4" class="timerSize4">
<div id="timer4a" class="timerSize4"></div>
<div id="timer4b" class="timerSize4"></div>
<div id="timer4c" class="timerSize4"></div>
</div>
</div><!-- clock container -->
</body>