Geek Answers Handbook

Javasacript Countdown timer in days, hours, minutes, seconds

I am trying to create a clock based on time. It is not based on current_dates. The initial time to be pulled will be from a separate php file. This will be for a game based browser. When someone clicks a button to run this script. it checks if certain requirements are met, and if so, this script will be triggered. Based on the level of the object, it will pull out the start timer for that level. Hope this makes sense. Anyway, I based the script timer on the first code that I provide.

This script only takes minutes and seconds into account. I changed it to include days and hours. Somewhere in this process, I got confused, and the script doesn't work at all. I'm also not quite sure if this is the best method to calculate this. So, if you have a cleaner method at the same time, please share. Thank you in advance.

This script is based on the minutes / seconds script I saw. Here's the original source:

<span id="countdown" class="timer"></span> <script> var seconds = 60; function secondPassed() { var minutes = Math.round((seconds - 30)/60); var remainingSeconds = seconds % 60; if (remainingSeconds < 10) { remainingSeconds = "0" + remainingSeconds; } document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds; if (seconds == 0) { clearInterval(countdownTimer); document.getElementById('countdown').innerHTML = "Buzz Buzz"; } else { seconds--; } } var countdownTimer = setInterval('secondPassed()', 1000); </script>

Here is a modified script that I am trying to include in days, hours, minutes and seconds.

 <span id="countdown"></span> <script> var current_level = 93578; function timer() { var days = Math.round(current_level/86400); var remainingDays = Math.round(current_level - (days * 86400)); if (days <= 0){ days = current_level; } var hours = Math.round(remainingDays/3600); var remainingHours = Math.round(remainingDays - (hours * 3600)); if (hours >= 24){ hours = 23; } var minutes = Math.round(remainingHours/60); var remainingMinutes = Math.round(remainingHours - (minutes * 60)); if (minutes >= 60) { minutes = 59; } var seconds = Math.round(remainingMinutes/60); document.getElementById('countdown').innerHTML = days + ":" + hours ":" + minutes + ":" + seconds; if (seconds == 0) { clearInterval(countdownTimer); document.getElementById('countdown').innerHTML = "Completed"; } } var countdownTimer = setInterval('timer()', 1000); </script>
+7
javascript php timer countdowntimer
source share
5 answers

I finally went back to looking at this and rewriting the code, and it works like a charm.

 <span id="countdown" class="timer"></span> <script> var upgradeTime = 172801; var seconds = upgradeTime; function timer() { var days = Math.floor(seconds/24/60/60); var hoursLeft = Math.floor((seconds) - (days*86400)); var hours = Math.floor(hoursLeft/3600); var minutesLeft = Math.floor((hoursLeft) - (hours*3600)); var minutes = Math.floor(minutesLeft/60); var remainingSeconds = seconds % 60; if (remainingSeconds < 10) { remainingSeconds = "0" + remainingSeconds; } document.getElementById('countdown').innerHTML = days + ":" + hours + ":" + minutes + ":" + remainingSeconds; if (seconds == 0) { clearInterval(countdownTimer); document.getElementById('countdown').innerHTML = "Completed"; } else { seconds--; } } var countdownTimer = setInterval('timer()', 1000); </script>
+14
source share

You can use this js to efficiently control the timer.

http://countdownjs.org/

+2
source share

Personally, I would use jquery countdown timer integration. It is simple and has several display options in different formats. Since I'm pretty new to JS, this was the easiest way to get a counter / timer.

http://keith-wood.name/countdown.html

+1
source share
 <span id="date_regist"></span> <script type="text/javascript"> <script src="http://rc.sefunsoed.org/assets/js/countdown/jquery.countdown.min.js"></script> var s = '2017/03/01 15:21:21'; f = '2017/03/01 15:22:00'; format = '%-w <sup>week%!w</sup> ' + '%-d <sup>day%!d</sup> ' + '%H <sup>hr</sup> ' + '%M <sup>min</sup> ' + '%S <sup>sec</sup>'; jQuery('#date_regist').countdown(s) .on('update.countdown', function(event) { jQuery(this).html("<b>will be open </b>" + event.strftime(format)); }) .on('finish.countdown', function(event) { jQuery("#date_regist").remove() jQuery("body").append('<span id="date_regist"></span>') jQuery("#date_regist").countdown(f) .on('update.countdown', function(event) { jQuery(this).html("<b> is open for </b>" + event.strftime(format)); }) .on('finish.countdown', function(event) { jQuery('#rework').hide(); //jQuery(this).html("<b> is closed.</b>"); }); }); </script>
0
source share

Here is my tried and tested example based on your code

 <span id="countdown"></span> <script> var current_level = 3002; function timer() { var days = Math.floor(current_level/86400); var remainingDays = current_level - (days * 86400); //if (days <= 0){ // days = current_level; //} var hours = Math.floor(remainingDays/3600); var remainingHours = remainingDays - (hours * 3600); //if (hours >= 24){ // hours = 23; //} var minutes = Math.floor(remainingHours/60); var remainingMinutes = remainingHours - (minutes * 60); //if (minutes >= 60) { // minutes = 59; //} var seconds = remainingMinutes; document.getElementById('countdown').innerHTML = days + ":" + hours + ":" + minutes + ":" + seconds; //if (seconds == 0) { // clearInterval(countdownTimer); // document.getElementById('countdown').innerHTML = "Completed"; //} current_level--; } var countdownTimer = setInterval(timer, 1000); </script>
0
source share

More articles:


All Articles