CODEWITHSUNDEEP
javascripttimer
kemu
kemu

Reputation: 33

I can't get my javascript counter to work correctly

I am trying to work on timer for my website b/w two date ( now date and my cdate input) please i would like someone to help me out with my code

function ctimer() {
	var cdate = new Date("2017-03-31 13:06:57");
	var now = new Date();
	var timeDiff = cdate.getTime() - now.getTime();
	if (timeDiff <= 0) {
                clearTimeout(timer);
		
        }
	var seconds = Math.floor(timeDiff / 1000);
	var minutes = Math.floor(seconds / 60);
	var hours = Math.floor(minutes / 60);
	var days = Math.floor(hours / 24);


	document.getElementById("daysBox").innerHTML = days;
	document.getElementById("hoursBox").innerHTML = hours;
	document.getElementById("minsBox").innerHTML = minutes;
	document.getElementById("secsBox").innerHTML = seconds;
	var timer = setTimeout('ctimer()',1000);
}
<span id="daysBox"></span>
Days
<span id="hoursBox"></span>
Hrs:
<span id="minsBox"></span>
Min:
<span id="secsBox"></span>
Sec

<script>ctimer();</script>

Upvotes: 2

Views: 78

Answers (3)

Bourbia Brahim
Bourbia Brahim

Reputation: 14702

You just forget the % to get only remaining values of minute , seconde and hours 

function ctimer() {
	var cdate = new Date("2017-04-31 13:06:57");
	var now = new Date();
	var timeDiff = cdate.getTime() - now.getTime();

	var seconds = Math.floor(timeDiff / 1000);
	var minutes = Math.floor(seconds / 60);
	var hours = Math.floor(minutes / 60);
	var days = Math.floor(hours / 24);


	
	var timer = setTimeout('ctimer()',1000);
        if (timeDiff <= 0) {
            clearTimeout(timer);
            return;
        }
        document.getElementById("daysBox").innerHTML = (days);
	    document.getElementById("hoursBox").innerHTML = (hours%24);
	    document.getElementById("minsBox").innerHTML = (minutes%60);
	    document.getElementById("secsBox").innerHTML = (seconds%60);
}

ctimer()
<h2>reamaining time to 2017-06-31 13:06:57 is :</h2>
<span id="daysBox"></span>
Days
<span id="hoursBox"></span>
Hrs:
<span id="minsBox"></span>
Min:
<span id="secsBox"></span>
Sec

Upvotes: 1

Jamiec
Jamiec

Reputation: 136104

A couple of things changed

  • dont pass a string to setTimeout
  • calculate days/hrs/mins/secs remaining with use of modulo
  • Make timer global, otherwise it wont stop counting down.

var timer;
function ctimer() {
	var cdate = new Date("2017-06-31 13:06:57");
	var now = new Date();
	var timeDiff = cdate.getTime() - now.getTime();
	if (timeDiff <= 0) {
                clearTimeout(timer);
		
        }
	var days = Math.floor(timeDiff / (24*60*60*1000))
	var hours = Math.floor(timeDiff / (60*60*1000)) % 24;
	var minutes = Math.floor(timeDiff / (60*1000)) % 60;
	var seconds = Math.floor(timeDiff / 1000) % 60;


	document.getElementById("daysBox").innerHTML = days;
	document.getElementById("hoursBox").innerHTML = hours;
	document.getElementById("minsBox").innerHTML = minutes;
	document.getElementById("secsBox").innerHTML = seconds;
	timer = setTimeout(ctimer,1000);
}
ctimer();
<span id="daysBox"></span>
Days
<span id="hoursBox"></span>
Hrs:
<span id="minsBox"></span>
Min:
<span id="secsBox"></span>
Sec

Upvotes: 1

oviemoses
oviemoses

Reputation: 402

Add this after the day variable

var days = Math.floor(hours / 24);
hours %= 24;
minutes %= 60;
seconds %= 60;

Upvotes: 2

Related Questions