为倒计时脚本设置动画

时间:2017-04-02 16:19:04

标签: javascript html css

我在我的主页上使用这个倒计时脚本,现在我想为它添加一个翻转动画。





我不知道如何添加一个类和然后删除它。我尝试了youtube的教程,但每次添加教程的代码时,我的倒计时都会停止运行。 






  function getTimeRemaining(endtime){
&#xA ; var t = Date.parse(endtime) -  Date.parse(new Date());
 var seconds = Math.floor((t / 1000)%60);
 var minutes = Math.floor((t / 1000/60)%60);
 var hours = Math.floor((t /(1000 * 60 * 60))%24);
 var days = Math.floor(t /(1000 * 60 * 60 * 24));
返回{
 'total':t,
 '天':天,
 '小时':小时,
 '分钟':分钟,
 '秒':秒
 
}

 function initializeClock(id,endtime){
 var clock = document.getElementById(id);
 var daysSpan = clock.querySelector('。days');
 var hoursSpan = clock.querySelector('。hours');
 var minutesSpan = clock.querySelector('。minutes');
 var secondsSpan = clock.querySelector('。seconds');

 function updateClock(){
 var t = getTimeRemaining(endtime);

 daysSpan.innerHTML = t.days;
 hoursSpan.innerHTML =('0'+ t.hours).slice(-2);
 minutesSpan.innerHTML =('0'+ t.minutes).slice(-2);
 secondsSpan.innerHTML =('0'+ t.seconds).slice(-2);

 if(t.total< = 0){
 clearInterval(一个时间间隔);&#的xD;
 }&#的xD;
 }&#的xD;
&#的xD;
 updateClock();&#的xD;
 var timeinterval = setInterval(updateClock,1000);
}

 var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
 initializeClock('clockdiv',截止日期);  


  body {
 text-align:center;
背景:#00ECB9;
 font-family:sans-serif;
 font-weight:100;
}

 h1 {
颜色:#396;
 font-weight:100;
 font-size:40px;
保证金:40px 0px 20px;
}

 #clockdiv {
 font-family:sans-serif;
颜色:#fff;
 display:inline-block;
 font-weight:100;
 text-align:center;
 font-size:30px;
}

 #clockdiv> DIV {&#的xD;
填充:10px;
 border-radius:3px;
背景:#00BF96;
 display:inline-block;
}

 #clockdiv div>跨度{&#的xD;
填充:15px;
 border-radius:3px;
背景:#00816A;
 display:inline-block;
}

 .smalltext {
 padding-top:5px;
 font-size:16px;
}  


 <代码>&lt; h1&gt;倒计时时钟&lt; / h1&gt;&#xD;&#xA;&lt; div id =“clockdiv”&gt;&#xD;&#xA; &LT; DIV&GT;&#的xD;&#XA; &lt; span class =“days”&gt;&lt; / span&gt;&#xD;&#xA; &lt; div class =“smalltext”&gt;天&lt; / div&gt;&#xD;&#xA; &LT; / DIV&GT;&#的xD;&#XA; &LT; DIV&GT;&#的xD;&#XA; &lt; span class =“hours”&gt;&lt; / span&gt;&#xD;&#xA; &lt; div class =“smalltext”&gt;小时&lt; / div&gt;&#xD;&#xA; &LT; / DIV&GT;&#的xD;&#XA; &LT; DIV&GT;&#的xD;&#XA; &lt; span class =“minutes”&gt;&lt; / span&gt;&#xD;&#xA; &lt; div class =“smalltext”&gt; Minutes&lt; / div&gt;&#xD;&#xA; &LT; / DIV&GT;&#的xD;&#XA; &LT; DIV&GT;&#的xD;&#XA; &lt; span class =“seconds”&gt;&lt; / span&gt;&#xD;&#xA; &lt; div class =“smalltext”&gt; Seconds&lt; / div&gt;&#xD;&#xA; &LT; / DIV&GT;&#的xD;&#XA;&LT; / DIV&GT;  
&#的xD;&#XA;
&#的xD;&#XA;
&#的xD;&#XA;

&#XA;

1 个答案:

答案 0 :(得分:2)

请使用翻转动画检查倒数计时器的此链接

http://hilios.github.io/jQuery.countdown/