более простой, чем флип clock.js

У меня есть одна простая страница, чтобы показать время, оставшееся до начала викторины. я использую этот код для моего таймера обратного отсчета:более простой, чем флип clock.js

$(document).ready(function() { 
 
    var clock; 
 
    clock = $('.clock').FlipClock(
 
    863999999, { 
 
     clockFace: 'DailyCounter', 
 
     countdown: true, 
 
     callbacks: { 
 
     stop: function() { 
 
      /* alert("Hello") */ 
 
     } 
 
     } 
 
    }); 
 
}); \t \t \t

<link href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.js"></script> 
 

 
<div class="clock" style="margin:40px;"></div>

есть что-то более простое и более легче, чем «флип clock.js», а не с помощью JQuery в качестве основного (полностью Javascript)

источник

2016-06-20 amin sedaghaty

http://bl.ocks.org/deltafactory/6e1cb71cfc8bb169181d

Чистое и простое использование CSS и HTML5. Анимация не должно быть никаких проблем ....

источник

2016-06-20 13:20:14

ty для ответа, но мне нужен полный отсчет freamwork, но очень простой –

я нашел решение:

 function getTimeRemaining(endtime) { 
 
      var t = endtime; 
 
      var seconds = Math.floor(t % 60); 
 
      var minutes = Math.floor((t/60) % 60); 
 
      var hours = Math.floor((t/(60 * 60)) % 24); 
 
      var days = Math.floor(t/(60 * 60 * 24)); 
 
      return { 
 
       'total': t, 
 
       'days': days, 
 
       'hours': hours, 
 
       'minutes': minutes, 
 
       'seconds': seconds 
 
      }; 
 
     } 
 

 

 
     function initializeClock(endtime) { 
 

 
      var daysSpan = document.getElementById('days'); 
 
      var hoursSpan = document.getElementById('hours'); 
 
      var minutesSpan = document.getElementById('minutes'); 
 
      var secondsSpan = document.getElementById('seconds'); 
 

 
      function updateClock() { 
 
       endtime = endtime - 1; 
 
       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 < 1) { 
 
        clearInterval(timeinterval); 
 
        alert("Hello"); 
 
       } 
 
      } 
 

 
      updateClock(); 
 
      var timeinterval = setInterval(updateClock, 1000); 
 
     }

body{ 
 
\t text-align: center; 
 
\t background: #00ECB9; 
 
    font-family: sans-serif; 
 
    font-weight: 100; 
 
} 
 
h1{ 
 
    color: #396; 
 
    font-weight: 100; 
 
    font-size: 40px; 
 
    margin: 40px 0px 20px; 
 
} 
 
#clockdiv{ 
 
\t font-family: sans-serif; 
 
\t color: #fff; 
 
\t display: inline-block; 
 
\t font-weight: 100; 
 
\t text-align: center; 
 
\t font-size: 30px; 
 
} 
 
#clockdiv > div{ 
 
\t padding: 10px; 
 
\t border-radius: 3px; 
 
\t background: #00BF96; 
 
\t display: inline-block; 
 
} 
 
#clockdiv div > span{ 
 
\t padding: 15px; 
 
\t border-radius: 3px; 
 
\t background: #00816A; 
 
\t display: inline-block; 
 
} 
 
.smalltext{ 
 
\t padding-top: 5px; 
 
\t font-size: 16px; 
 
}

<html> 
 
    <head> 
 
     <title>some title</title> 
 
    </head> 
 
    <body onload="initializeClock(863999999);"> 
 
     <h1>Countdown Clock</h1> 
 
     <div id="clockdiv"> 
 
      <div> 
 
       <span id="days"></span> 
 
       <div class="smalltext">Days</div> 
 
      </div> 
 
      <div> 
 
       <span id="hours"></span> 
 
       <div class="smalltext">Hours</div> 
 
      </div> 
 
      <div> 
 
       <span id="minutes"></span> 
 
       <div class="smalltext">Minutes</div> 
 
      </div> 
 
      <div> 
 
       <span id="seconds"></span> 
 
       <div class="smalltext">Seconds</div> 
 
      </div> 
 
     </div> 
 

 
     
 
    </body> 
 
</html>

, но мне нужно JavaScript специалисты проверить мой код ошибки.

источник

2016-06-20 15:10:41

более простой, чем флип clock.js

ответ

Смежные вопросы