如何使Javascript日期和CSS3動畫一起工作？

Question

我需要連接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; }
}

Answer 1

你能用代碼發一個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或如何在特定位置啟動CSS3動畫？

這是一個有效的例子： 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>

如何使Javascript日期和CSS3動畫一起工作？

問題描述

1 個解決方案

解決方案1
2 2014-01-22 07:53:53

如何使Javascript日期和CSS3動畫一起工作？

問題描述

1 個解決方案

解決方案1 2 2014-01-22 07:53:53

解決方案1
2 2014-01-22 07:53:53