Develop Reference

Upcounter with Momentjs

My problem is that my upcounter lost 1 day.
if i set the endDateTime to 1 year and 1 day before or after today it show the right time, but if i set it to exactly 1 year before today it shows the wrong day and month. And if i put the code of updateTimer to fiddlejs.net and test it if it shows the right time than is everything right.
sorry for my bad english :)
function updateTimer() {
//change endDateTime to your actual time minus 1 year
var endDateTime = new moment("2016-04-03 4:00:00");
var startDateTime = moment();
var timeLeft = endDateTime + startDateTime;
var timeLeft = startDateTime.diff(endDateTime, 'milliseconds', true);
var years = Math.floor(moment.duration(timeLeft).asYears());
startDateTime = startDateTime.subtract(years, 'years');
timeLeft = startDateTime.diff(endDateTime, 'milliseconds', true);
var months = Math.floor(moment.duration(timeLeft).asMonths());
startDateTime = startDateTime.subtract(months, 'months');
timeLeft = startDateTime.diff(endDateTime, 'milliseconds', true);
var days = Math.floor(moment.duration(timeLeft).asDays());
startDateTime = startDateTime.subtract(days, 'days');
timeLeft = startDateTime.diff(endDateTime, 'milliseconds', true);
var hours = Math.floor(moment.duration(timeLeft).asHours());
startDateTime = startDateTime.subtract(hours, 'hours');
timeLeft = startDateTime.diff(endDateTime, 'milliseconds', true);
var minutes = Math.floor(moment.duration(timeLeft).asMinutes());
startDateTime = startDateTime.subtract(minutes, 'minutes');
timeLeft = startDateTime.diff(endDateTime, 'milliseconds', true);
var seconds = Math.floor(moment.duration(timeLeft).asSeconds());
var total = timeLeft;
if (years < 10) years = "0" + years;
if (months < 10) months = "0" + months;
if (days < 10) days = "0" + days;
if (hours < 10) hours = "0" + hours;
if (minutes < 10) minutes = "0" + minutes;
if (seconds < 10) seconds = "0" + seconds;
return {
'years': years,
'months': months,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds,
'total': total,
}
}
function animateClock(span) {
span.className = "turn";
setTimeout(function() {
span.className = "";
}, 700);
}
function initializeClock(id, endtime) {
var clock = document.getElementById(id);
var yearsSpan = clock.querySelector('.years');
var monthsSpan = clock.querySelector('.months');
var daysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');
function updateClock() {
var t = updateTimer();
yearsSpan.innerHTML = t.years;
monthsSpan.innerHTML = ('0' + t.months).slice(-2);
daysSpan.innerHTML = ('0' + t.days).slice(-2);
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
//animation
// var daysMonth = moment(t.years-t.months-t.days).daysInMonth('month');
var spans = clock.getElementsByTagName("span");
animateClock(spans[5]);
if (t.seconds == 0) animateClock(spans[4]);
if (t.minutes == 59 && t.seconds == 59) animateClock(spans[3]);
if (t.hours == 23 && t.minutes == 59 && t.seconds == 59) animateClock(spans[2]);
//if (t.months == daysMonth && t.hours == 23 && t.minutes == 59 && t.seconds == 59) animateClock(spans[1]);
// if (t.total <= 0) {
// clearInterval(timeinterval);
// }
}
updateClock();
var timeinterval = setInterval(updateClock, 1000);
}
var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
initializeClock('clockdiv', deadline);
#clockdiv {
font-family: sans-serif;
color: #2DA2DB;
display: inline-block;
font-weight: 100;
text-align: center;
font-size: 30px;
}
#clockdiv>div {
margin-bottom: 5px;
padding: 6px;
border-radius: 3px;
background: #991b1f;
display: inline-block;
border-style: solid;
border-color: black;
}
#clockdiv>div:nth-child(2) {
background: #aa1e23;
}
#clockdiv>div:nth-child(3) {
background: #bc2025;
}
#clockdiv>div:nth-child(4) {
background: #cc2027;
}
#clockdiv>div:nth-child(5) {
background: #dc1f26;
}
#clockdiv>div:nth-child(6) {
background: #ec1e24;
}
#clockdiv div>span {
font-size: 30px;
letter-spacing: 3px;
font-family: 'pixel', monospace;
color: #white;
text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
padding: 6px;
border-radius: 3px;
background: #333;
display: inline-block;
border-style: solid;
border-color: black;
}
<script src="http://momentjs.com/downloads/moment.js"></script>
<div id="clockdiv">
<div>
<span class="years"></span>
<div class="smalltext">Jahre</div>
</div>
<div>
<span class="months"></span>
<div class="smalltext">Monate</div>
</div>
<div>
<span class="days"></span>
<div class="smalltext">Tage</div>
</div>
<div>
<span class="hours"></span>
<div class="smalltext">Stunden</div>
</div>
<div>
<span class="minutes"></span>
<div class="smalltext">Minuten</div>
</div>
<div>
<span class="seconds"></span>
<div class="smalltext">Sekunden</div>
</div>
</div>

Functions button effects another function

I am trying to add multiple stop watches on a page for tracking tracking how much time it takes users to complete tasks. I have a function that works, I copied it and tried to make a second function duplicate with certain things change the buttons effect the other function. Any help would be appreciated.
<script>
var time = 0;
var running = 0;
function startPause()
{
if(running == 0){
running = 1;
increment();
document.getElementById("startPause").innerHTML = "Pause";
}else{
running = 0;
document.getElementById("startPause").innerHTML = "Resume";
}
}
function reset()
{
running = 0;
time = 0;
document.getElementById("startPause").innerHTML = "Start";
document.getElementById("output").innerHTML = "00:00:00";
}
function increment()
{
if(running == 1){
setTimeout(function(){
time++;
var mins = Math.floor(time/10/60);
var secs = Math.floor(time/10 % 60);
var tenths = time % 10;
if(mins < 10){
mins = "0" + mins;
}
if(secs < 10){
secs = "0" + secs;
}
document.getElementById("output").innerHTML = mins + ":" + secs + ":" + "0" + tenths;
increment();
},100);
}
}
</script>
<script>
var time = 0;
var running = 0;
function startPause2()
{
if(running == 0){
running = 1;
increment2();
document.getElementById("startPause2").innerHTML = "Pause";
}else{
running = 0;
document.getElementById("startPause2").innerHTML = "Resume";
}
}
function reset2()
{
running = 0;
time = 0;
document.getElementById("startPause2").innerHTML = "Start";
document.getElementById("output2").innerHTML = "00:00:00";
}
function increment2()
{
if(running == 1){
setTimeout(function(){
time++;
var mins = Math.floor(time/10/60);
var secs = Math.floor(time/10 % 60);
var tenths = time % 10;
if(mins < 10){
mins = "0" + mins;
}
if(secs < 10){
secs = "0" + secs;
}
document.getElementById("output2").innerHTML = mins + ":" + secs + ":" + "0" + tenths;
increment();
},100);
}
}
</script>
html {
size: 100%,100%;
background-color: #f2f2f2;
}
h1{
font-Family: Arial;
color: #5573A9;
font-size: 40px;
position: static;
}
body {
display: block;
margin:8px, dotted line;
background-color: #f2f2f2;
}
#output{
position:center;
width:120px;
height:25px;
background-color:#CCC;
border:3px solid #999;
}
#output2{
position: relative;
width:120px;
height:25px;
background-color:#CCC;
border:3px solid #999;
}
table {
display:table;
border-collapse:seperate;
border-spacing: 52px;
border-color: #FFF;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Time Study</title>
<h1>Time Study</h1>
</head>
<body>
<table>
<tr>
<th>Bin</th>
<th>Bulk</th>
</tr>
<tr>
<td>
<p id="output"></p>
<div id="controls">
<button id="startPause" onclick="startPause()">Start</button>
<button onclick="reset()">Reset</button>
</div>
</td>
<td>
<p id="output2"></p>
<div id="controls2">
<button id="startPause2" onclick="startPause2()">Start</button>
<button onclick="reset2()">Reset</button>
</div>
</td>
</tr>
</table>
</body>
</html>

Anyway possible to make a countdown timer change color at an certain time with javascript? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
Im trying to make a countdown timer that would change the color when reaches two different points, it supposed to go orange when reaches "00:59" and then change to red when reaches " 00:00 " How do I do that with javascript.
<html>
<head>
<title>Countdown</title>
<script type="text/javascript">
// set minutes
var mins = 1;
// calculate the seconds (don't change this! unless time progresses at a different speed for you...)
var secs = mins * 60;
var timeout;
function countdown() {
timeout = setTimeout('Decrement()', 1000);
}
function Decrement() {
if (document.getElementById) {
minutes = document.getElementById("minutes");
seconds = document.getElementById("seconds");
// if less than a minute remaining
if (seconds < 59) {
seconds.value = secs;
} else {
minutes.value = getminutes();
seconds.value = getseconds();
}
secs--;
if (secs < 0) {
clearTimeout(timeout);
return;
}
countdown();
}
}
function getminutes() {
// minutes is seconds divided by 60, rounded down
mins = Math.floor(secs / 60);
return ("0" + mins).substr(-2);
}
function getseconds() {
// take mins remaining (as seconds) away from total seconds remaining
return ("0" + (secs - Math.round(mins * 60))).substr(-2);
}
</script>
</head>
<body>
<div id="timer">
This is only valid for the next <input id="minutes" type="text" style="width: 60px; border: none; background-color:none; font-size: 50px; font-weight: bold;"> : <input id="seconds" type="text" style="width: 60px; border: none; background-color:none; font-size: 50px; font-weight: bold;">
</div>
<script>
countdown();
</script>

It's very easy, you just need to add a condition before inserting value in both div or minutes/seconds.
<html>
<head>
<title>Countdown</title>
<script type="text/javascript">
// set minutes
var mins = 1;
// calculate the seconds (don't change this! unless time progresses at a different speed for you...)
var secs = mins * 60;
var timeout;
function countdown() {
timeout = setTimeout('Decrement()', 1000);
}
function colorchange(minutes, seconds)
{
if(minutes.value =="00" && seconds.value =="59")
{
minutes.style.color="orange";
seconds.style.color="orange";
}
else if(minutes.value =="00" && seconds.value =="00")
{
minutes.style.color="red";
seconds.style.color="red";
}
}
function Decrement() {
if (document.getElementById) {
minutes = document.getElementById("minutes");
seconds = document.getElementById("seconds");
// if less than a minute remaining
if (seconds < 59) {
seconds.value = secs;
} else {
minutes.value = getminutes();
seconds.value = getseconds();
}
colorchange(minutes,seconds);
secs--;
if (secs < 0) {
clearTimeout(timeout);
return;
}
countdown();
}
}
function getminutes() {
// minutes is seconds divided by 60, rounded down
mins = Math.floor(secs / 60);
return ("0" + mins).substr(-2);
}
function getseconds() {
// take mins remaining (as seconds) away from total seconds remaining
return ("0" + (secs - Math.round(mins * 60))).substr(-2);
}
</script>
</head>
<body>
<div id="timer">
This is only valid for the next <input id="minutes" type="text" style="width: 60px; border: none; background-color:none; font-size: 50px; font-weight: bold;"> :
<input id="seconds" type="text" style="width: 60px; border: none; background-color:none; font-size: 50px; font-weight: bold;">
</div>
<script>
countdown();
</script>

Here you are. I use a colors array, store currentColorIndex, then reset index if it > colors.length. You can improve this by create random number for currentColorIndex, avoid my boring loop.
var mins = 1;
var secs = mins * 60;
var timeout;
function countdown() {
timeout = setTimeout('Decrement()', 1000);
}
// THE MAGIC BEGIN HERE
var colors = ["red", "green", "blue", "cyan", "magenta", "yellow", "black"];
var currentColorIndex = 0;
function Decrement() {
if (document.getElementById) {
minutes = document.getElementById("minutes");
seconds = document.getElementById("seconds");
// if less than a minute remaining
if (seconds < 59) {
seconds.value = secs;
} else {
minutes.style.color = colors[currentColorIndex];
seconds.style.color = colors[currentColorIndex];
minutes.value = getminutes();
seconds.value = getseconds();
if (++currentColorIndex > colors.length) currentColorIndex = 0;
}
secs--;
if (secs < 0) {
clearTimeout(timeout);
return;
}
countdown();
}
}
function getminutes() {
// minutes is seconds divided by 60, rounded down
mins = Math.floor(secs / 60);
return ("0" + mins).substr(-2);
}
function getseconds() {
// take mins remaining (as seconds) away from total seconds remaining
return ("0" + (secs - Math.round(mins * 60))).substr(-2);
}
countdown();
This is only valid for the next
<input id="minutes" type="text" style="width: 60px; border: none; background-color:none; font-size: 50px; font-weight: bold;">:
<input id="seconds" type="text" style="width: 60px; border: none; background-color:none; font-size: 50px; font-weight: bold;">
Hope this helps.

// if less than a minute remaining
if (seconds < 59) {
seconds.value = secs;
document.getElementById('timer').style.backgroundColor = '#f08000';
} else {
minutes.value = getminutes();
seconds.value = getseconds();
}
secs--;
if (secs < 0) {
document.getElementById('timer').style.backgroundColor = '#ff0000';
clearTimeout(timeout);
return;
}
countdown();
When the timer reaches a certain point (as already in the if statements), change the color of the timer div using the DOM.

How to make my countdown timer go up once it reaches 00:00 using javascript

I was trying to make a countdown timer that once it reaches " 00:00 " it should go up again without limit.
I can't figure it out how to make my countdown go up once it reaches " 00:00 " maybe you can help me.
<html>
<head>
<title>Countdown</title>
<script type="text/javascript">
// set minutes
var mins = 1;
// calculate the seconds (don't change this! unless time progresses at a different speed for you...)
var secs = mins * 60;
var timeout;
function countdown() {
timeout = setTimeout('Decrement()', 1000);
}
function colorchange(minutes, seconds)
{
if(minutes.value =="00" && seconds.value =="59")
{
minutes.style.color="orange";
seconds.style.color="orange";
}
else if(minutes.value =="00" && seconds.value =="30")
{
minutes.style.color="red";
seconds.style.color="red";
}
}
function Decrement() {
if (document.getElementById) {
minutes = document.getElementById("minutes");
seconds = document.getElementById("seconds");
// if less than a minute remaining
if (seconds < 59) {
seconds.value = secs;
} else {
minutes.value = getminutes();
seconds.value = getseconds();
}
colorchange(minutes,seconds);
secs--;
if (secs < 0) {
clearTimeout(timeout);
return;
}
countdown();
}
}
function getminutes() {
// minutes is seconds divided by 60, rounded down
mins = Math.floor(secs / 60);
return ("0" + mins).substr(-2);
}
function getseconds() {
// take mins remaining (as seconds) away from total seconds remaining
return ("0" + (secs - Math.round(mins * 60))).substr(-2);
}
</script>
</head>
<body>
<div id="timer">
This is only valid for the next <input id="minutes" type="text" style="width: 110px; border: none; background-color:none; font-size: 100px; font-weight: bold;"> :
<input id="seconds" type="text" style="width: 110px; border: none; background-color:none; font-size: 100px; font-weight: bold;">
</div>
<script>
countdown();
</script>

I think your current solution is a little overcomplicated. You have a function that sets a timeout that calls another function which does the work and then re-calls the function that sets the timeout again.
Instead of doing that, just use the setInterval method instead.
Similarly to what #JoColina suggested, set a direction variable that indicates which direction to count, and then set up different behavior for counting up vs. counting down.
var direction = 'down';
var mins = 1.1;
var secs = mins * 60;
function colorchange() {
var className;
if (direction == 'up') {
className = 'success';
} else if (secs <= 30) {
className = 'danger';
} else if (secs <= 59) {
className = 'warning';
}
document.getElementById('timeText').className = className;
}
function getminutes() {
// minutes is seconds divided by 60, rounded down
mins = Math.floor(secs / 60);
return ("0" + mins).substr(-2);
}
function getseconds() {
// take mins remaining (as seconds) away from total seconds remaining
return ("0" + (secs - Math.round(mins * 60))).substr(-2);
}
function countdown() {
setInterval(function() {
var minutes = document.getElementById('minutes');
var seconds = document.getElementById('seconds');
minutes.value = getminutes();
seconds.value = getseconds();
colorchange();
if (direction == 'down') {
secs--;
if (secs <= 0) {
direction = 'up';
}
} else if (direction == 'up') {
secs++;
}
}, 1000);
}
countdown();
.success,
.success input {
color: green;
}
.warning,
.warning input {
color: orange;
}
.danger,
.danger input {
color: red;
}
<div id="timer">
This is only valid for the next
<span id="timeText">
<input id="minutes" type="text" style="width: 110px; border: none; background-color:none; font-size: 100px; font-weight: bold;">:
<input id="seconds" type="text" style="width: 110px; border: none; background-color:none; font-size: 100px; font-weight: bold;">
</span>
</div>

tl;dr, however you could declare a global boolean like var down = true;, and once your timer reaches 00:00, you just change down = true to down = false.
Then, on the function that changes the counter you add:
if(down){
Decrement();
}else{
Increment():
}
And if, for example, you want to decrement again once it reaches 13:54 you once more add a down = true.
Hope this helps!

Javascript Countdown to stop at 0:00

I've found this countdown script and made some basic formatting changes but I can't figure out how to get the timer to stop at 0:00 instead of going into minus figures.
Any help would be appreciated :)
<title>Countdown</title>
<script type="text/javascript">
// set minutes
var mins = 3;
// calculate the seconds (don't change this! unless time progresses at a different speed for you...)
var secs = mins * 60;
function countdown() {
setTimeout('Decrement()', 1000);
}
function Decrement() {
if (document.getElementById) {
minutes = document.getElementById("minutes");
seconds = document.getElementById("seconds");
// if less than a minute remaining
if (seconds < 59) {
seconds.value = secs;
} else {
minutes.value = getminutes();
seconds.value = getseconds();
}
secs--;
setTimeout('Decrement()', 1000);
}
}
function getminutes() {
// minutes is seconds divided by 60, rounded down
mins = Math.floor(secs / 60);
return mins;
}
function getseconds() {
// take mins remaining (as seconds) away from total seconds remaining
return secs - Math.round(mins * 60);
}
</script>
</head>
<body>
<div id="timer"><font size="4"><b>You have</b></font>
<input id="minutes" type="text" style="width: 16px; border: none; background-color:transparent; color: #FF0000; font-size: 24px; font-weight: bold;"><font size="4"><b>:</b></font>
<input id="seconds" type="text" style="width: 30px; border: none; background-color:transparent; color: #FF0000; font-size: 24px; font-weight: bold;"> <font size="4"><b>to claim your free game.</b></font></div>
<script>
countdown();
</script>

You need to check if seconds and mins are both zero and if they are return out of the Decrement function rather than calling setTimeout again.
function Decrement() {
if (document.getElementById) {
minutes = document.getElementById("minutes");
seconds = document.getElementById("seconds");
// if less than a minute remaining
if (seconds.value < 59) {
seconds.value = secs;
} else {
minutes.value = getminutes();
seconds.value = getseconds();
}
console.log(seconds.value);
if (minutes.value == 0 && seconds.value == 0) {
return;
}
secs--;
setTimeout('Decrement()', 1000);
}
}
I am not certain what you are going for with the < 59 condition. Try removing that logic like this:
function Decrement() {
if (document.getElementById) {
minutes = document.getElementById("minutes");
seconds = document.getElementById("seconds");
minutes.value = getminutes();
seconds.value = getseconds();
console.log(seconds.value);
if (minutes.value == 0 && seconds.value == 0) {
return;
}
secs--;
setTimeout('Decrement()', 1000);
}
}

This is a bad algorithm to make a countdown. Something like that would be better
var timeout, timer;
startChrono(3*60*1000); //3 min
function startChrono (milisec) {
timeout = (new Date()).getTime() + milisec;
timer = setInterval("tick()", 1000);
}
function tick () {
var now = (new Date()).getTime();
var diff = now - timeout;
if (diff <= 0) {
clearInterval(timer);
diff = 0;
}
render(diff);
}
function render (milisec) {
var sec = Math.floor(milisec / 1000);
var min = Math.floor(milisec / 60);
sec = sec - (min*60);
document.getElementById("minutes").value = sec;
document.getElementById("seconds").value = min;
}