more simple than flip clock.js

Question

i have one simple page to show time remaining to start quiz. i using this code for my countdown timer:

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

 <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>

is there something more simple and more lighter than "flip clock.js" , not using jquery as core?(fully javascript)

Answer 1

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

Pure and simple using CSS and HTML5. Animation should be no problem....

Answer 2

i found solution :

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

but i need javascript professionals check my code for bugs.

more simple than flip clock.js

Question

2 answers

solution1
0 2016-06-20 13:20:14

solution2
0 2016-06-20 15:10:41

more simple than flip clock.js

Question

2 answers

solution1 0 2016-06-20 13:20:14

solution2 0 2016-06-20 15:10:41

solution1
0 2016-06-20 13:20:14

solution2
0 2016-06-20 15:10:41