Develop Reference

javascript manual countdown timer (based on the user input)

i want to make a countdown timer for a project in which the countdown start when the user inputs some time in 00:00:00 h-m-s format, i have written some code which is half correct and i'm lost what to do next
// Wait for user to click the button before reading the value
window.onload=function(){
var work = document.getElementById("dl");
work.addEventListener("click", handler);
}
function handler() {
//taking user input
var time1 = document.getElementById('hms').value;
//splitting it to seperate variables
var pieces = time1.split(":");
var hours = pieces[0];
var minutes = pieces[1];
var seconds = pieces[2];
//just calculating total number of seconds
seconds = seconds + minutes*60 + hours*3600;
var tot = seconds + minutes*60 + hours*3600;
// Save the interval's handle to `timer`
var timer = setInterval(countdown, 1000);
function countdown() {
var container = document.getElementById('count');
var counter = 0, k=1, j=1, i=0, s1= pieces[2];
//loop to print the timer
for(i=0; i<tot; i++){
if(seconds>0){
counter ++ ;
if(counter==60*k){
minutes--;
k++;
}
if(counter==3600*j){
hours--;
j++;
}
container.innerHTML = 'Please wait <b>' + hours + '</b> hours, <b>' + minutes + '</b> minutes, <b>' + seconds + '</b> seconds';
}//end of if
else {
container.innerHTML = 'Time over';
clearInterval(timer);
}
}
/* seconds--;
if (seconds > 0) {
container.innerHTML = 'Please wait <b>' + seconds + '</b> seconds..';
} else {
container.innerHTML = 'Time over';
clearInterval(timer);
} */
}
}
<input type="text" id="hms" placeholder="enter in the format 00:00:00 " />
<input type="button" id="dl" value="Start" />
<div id="count"></div>
i know i have made this complicated, can someone please make it simple? it will be a great help, thanks!

I have modified the function handler.You can try this.
function handler() {
//taking user input
var time1 = document.getElementById('hms').value;
//splitting it to seperate variables
var pieces = time1.split(":");
var hours = pieces[0];
var minutes = pieces[1];
var seconds = pieces[2];
var time = {
hours: hours * 1,
minutes: minutes * 1,
seconds: seconds * 1
};
// Save the interval's handle to `timer`
var timer = setInterval(countdown, 1000);
function countdown() {
var container = document.getElementById('count');
if (time.seconds > 0) {
time.seconds--;
}
else {
if (time.minutes > 0) {
time.minutes--;
time.seconds = 60;
}
else {
time.minutes = 60;
time.seconds = 60;
time.hours--;
}
}
if (time.hours >= 0) {
container.innerHTML = 'Please wait <b>' + time.hours + '</b> hours, <b>' + time.minutes + '</b> minutes, <b>' + time.seconds + '</b> seconds';
}
else {
container.innerHTML = 'Time over';
clearInterval(timer);
}
}
}

Daily countdown timer - Display Message at 21:57

I'm struggling to figure out how Date() works, I found this on the web and wanted to make a countdown that stops at 21:57 UTC Time. It currently displays the message at 21:00 and apears until 22:00.
I tried to add if(currenthours != 21 && currentminutes >= 57){ and always broke it and got the message. I want it to stop 3 minutes before 22:00 and display the message. After it gets to 22:00 restart the countdown for the next day at 21:57.
Any help will be greatly appreciated !
var date;
var display = document.getElementById('time');
setInterval(function(){
date = new Date( );
var currenthours = date.getUTCHours();
// alert(currenthours);
var currentminutes = date.getUTCMinutes();
// alert(currentminutes);
var hours;
var minutes;
var secondes;
if (currenthours != 21) {
if (currenthours < 21) {
hours = 20 - currenthours;
} else {
hours = 21 + (24 - currenthours);
}
minutes = 60 - date.getUTCMinutes();
secondes = 60 - date.getUTCSeconds();
display.innerHTML = ('00' + hours).slice(-2) + ' HOURS ' + '<p>' +
('00' + minutes).slice(-2) + ' MINUTES ' + '</p>' +
('00' + secondes).slice(-2) + ' SECONDS';
} else {
display.innerHTML = "IT'S 21:57";
}
},1000);
<div id='time'></div>
Made a fiddle
https://jsfiddle.net/5qrs0tcp/1/
This is what I ended up with :
/*
|================================|
| COUNTDOWN TIMER |
|================================|
*/
// Return the UTC time component of a date in h:mm:ss.sss format
if (!Date.prototype.toISOTime) {
Date.prototype.toISOTime = function() {
return this.getUTCHours() + ':' +
('0' + this.getUTCMinutes()).slice(-2) + ':' +
('0' + this.getUTCSeconds()).slice(-2);
}
}
// Return the difference in time between two dates
// in h:mm:ss.sss format
if (!Date.prototype.timeDiff) {
Date.prototype.timeDiff = function(date2) {
var diff = Math.abs(this - date2);
return timeobj = {
hours : (diff/3.6e6|0), // hours
minutes : ('0' + ((diff%3.6e6)/6e4|0)).slice(-2), // minutes
seconds : ('0' + ((diff%6e4)/1e3|0)).slice(-2) // seconds
}
}
}
function countDown() {
var now = new Date();
var limitHr = 19;
var limitMin = 55;
var limitDate = new Date(+now);
// Set limitDate to next limit time
limitDate.setUTCHours(limitHr, limitMin, 0, 0);
// var msg = ['Currently: ' + now.toISOTime() + '<br>' + 'Limit: ' + limitDate.toISOTime()];
var msg = [];
var diff;
// If outside limitHr:limitMin to (limitHr + 1):00
if (now.getUTCHours() == limitHr && now.getUTCMinutes() >= limitMin) {
msg.push('Countdown stopped');
setTimeout(function(){
msg = ['Wait for it'];
var jsonCounter = {
stats : msg
}
jsonfile.writeFileSync(DailyGamePath, jsonCounter, {spaces: 3});
},5000);
var jsonCounter = {
stats : msg
}
jsonfile.writeFileSync(DailyGamePath, jsonCounter, {spaces: 3});
} else {
if (now > limitDate) limitDate.setDate(limitDate.getDate() + 1);
var jsonCounter = {
hours : now.timeDiff(limitDate).hours,
minutes : now.timeDiff(limitDate).minutes,
seconds : now.timeDiff(limitDate).seconds,
validating : msg
}
jsonfile.writeFileSync(DailyGamePath, jsonCounter, {spaces: 3});
}
}
setInterval(countDown, 1000);
var daily_status;
setTimeout( function(){
setInterval( function() {
jsonfile.readFile(DailyGamePath, (err, obj) => {
daily_status={
hours: obj.hours,
minutes: obj.minutes,
seconds: obj.seconds,
stats: obj.stats,
validating: obj.validating
};
return daily_status;
});
}, 1000);
}, 3000);
setTimeout( function(){
io.sockets.on('connection', (socket) => {
setInterval( function() {
// var GameStatus=DailyGameStatus();
socket.broadcast.emit('stream', {hours:daily_status.hours, minutes:daily_status.minutes, seconds:daily_status.seconds, stats:daily_status.stats, validating:daily_status.validating});
}, 1000);
});
}, 3000);

Date objects are very simple, they're just a time value and some handy methods.
I think your logic just needs to be:
if (currenthours != 21 && currentminutes < 57) {
// set the out of hours message
} else {
// time is from 21:57 to 21:59 inclusive
}
The countdown doesn't quite work because you're counting to 00 not to 57, but otherwise there doesn't seem to be an issue.
var date;
var display = document.getElementById('time');
setInterval(function(){
date = new Date( );
var currenthours = date.getUTCHours();
var currentminutes = date.getUTCMinutes();
var hours;
var minutes;
var secondes;
var limitHr = 5; // Change these to required values
var limitMin = 02; // Using 5:12 for convenience
var message = 'Currently: ' + date.toISOString() + '<p>';
// Create new message if outside limitHr:limitMin to limitHr:59 inclusive
if (currenthours != limitHr || currentminutes < limitMin) {
if (currenthours <= limitHr) {
hours = limitHr - currenthours;
} else {
hours = limitHr + (24 - currenthours);
}
minutes = limitMin - date.getUTCMinutes();
minutes += minutes < 0? 60 : 0;
secondes = 60 - date.getUTCSeconds();
message += ('00' + hours).slice(-2) + ' HOURS ' + '<p>' +
('00' + minutes).slice(-2) + ' MINUTES ' + '</p>' +
('00' + secondes).slice(-2) + ' SECONDS';
} else {
message += 'It\'s on or after ' + limitHr + ':' +
('0'+limitMin).slice(-2) + ' GMT';
}
// Display the message
display.innerHTML = message;
},1000);
<div id="time"></div>
Yes, the timer has issues but that wasn't part of the question. For a counter, it's simpler to just work in time differences, so I've added some methods to Date.prototype for ISO time (to be consistent with ISO Date) and time difference, then use those functions.
The function builds a Date for the end time so that calculations can use Date methods.
// Return the UTC time component of a date in h:mm:ss.sss format
if (!Date.prototype.toISOTime) {
Date.prototype.toISOTime = function() {
return this.getUTCHours() + ':' +
('0' + this.getUTCMinutes()).slice(-2) + ':' +
('0' + this.getUTCSeconds()).slice(-2) + '.' +
('00' + this.getUTCMilliseconds()).slice(-3) + 'Z';
}
}
// Return the difference in time between two dates
// in h:mm:ss.sss format
if (!Date.prototype.timeDiff) {
Date.prototype.timeDiff = function(date2) {
var diff = Math.abs(this - date2);
var sign = this > date2? '+' : '-';
return sign + (diff/3.6e6|0) + ':' + // hours
('0' + ((diff%3.6e6)/6e4|0)).slice(-2) + ':' + // minutes
('0' + ((diff%6e4)/1e3|0)).slice(-2) + '.' + // seconds
('00' + (diff%1e3)).slice(-3); // milliseconds
}
}
function countDown() {
var now = new Date();
var limitHr = 1;
var limitMin = 10;
var limitDate = new Date(+now);
// Set limitDate to next limit time
limitDate.setUTCHours(limitHr, limitMin, 0, 0);
var msg = ['Currently: ' + now.toISOTime() + '<br>' + 'Limit: ' + limitDate.toISOTime()];
var diff;
// If outside limitHr:limitMin to (limitHr + 1):00
if (now.getUTCHours() != limitHr || now.getUTCMinutes() != limitMin) {
if (now > limitDate) limitDate.setDate(limitDate.getDate() + 1);
msg.push(now.timeDiff(limitDate));
} else {
msg.push('It\'s after ' + limitHr + ':' + ('0'+limitMin).slice(-2));
}
document.getElementById('msgDiv2').innerHTML = msg.join('<br>');
}
window.onload = function() {
setInterval(countDown, 1000);
}
<div id="msgDiv2"></div>>
I've left the milliseconds in, round to seconds if you wish.
I've left the timer using setInterval, though I'd prefer to use setTimeout and manually calculate the time to just after the next full second so that it never skips. Most browsers using setTimeout will slowly drift so that they skip a second every now and then. Not really an issue unless you happen to see it, or compare it to the tick of the system clock.

Only one timer working at the time (html+js)

I have one timer and i want it in two different places in my website. But only one is working at the time.
Here is Script + first timer below it.
<script>
var interval;
var minutes = 8;
var seconds = 41;
window.onload = function() {
countdown('countdown');
myFunction();
myFunctiontoo();
}
function countdown(element) {
interval = setInterval(function() {
var el = document.getElementById("timerx");
if(seconds == 0) {
if(minutes == 0) {
el.innerHTML = "Free trial bonus has expired!";
clearInterval(interval);
return;
} else {
minutes--;
seconds = 60;
}
}
if(minutes > 0) {
var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute');
} else {
var minute_text = '';
}
var second_text = seconds > 1 ? 'seconds' : 'second';
el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + '';
seconds--;
}, 1000);
}
</script>
<div class="countdown"><span style="color:#EA0423;">Free Trial bonus ends in </span><span id="timerx" style="font-weight:bold;">8 minutes and 42 seconds</span>.
</div>
A bit lower in my HTML code i have another timer.
<span style="color:#FFF1D6;">Free Trial bonus ends in </span><span id="timerx" style="font-weight:bold;">8 minutes and 42 seconds</span>.
The second timer unfortunately is not working.

Method getElementById other than getElementsByClassName return only one DOM element.
Method getElementsByClassName returns an array of elements so you can get them using an index
Here is working example: PLUNKER
You can us getElementsByClassName and your code would look like this:
function countdown(element) {
var start_value = "Free trial bonus has expired!"
interval = setInterval(function() {
var el1 = document.getElementsByClassName("timerx")[0];
var el2 = document.getElementsByClassName("timerx")[1];
if(seconds == 0) {
if(minutes == 0) {
el1.innerHTML = start_value;
el2.innerHTML = start_value;
clearInterval(interval);
return;
} else {
minutes--;
seconds = 60;
}
}
if(minutes > 0) {
var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute');
} else {
var minute_text = '';
}
var second_text = seconds > 1 ? 'seconds' : 'second';
el1.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + '';
el2.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + '';
seconds--;
}, 1000);
}

If you are calling the timer twice in the same page you need to have two IDs. The id="timerx"
<span id="timerx_"<?php echo 'DYNAMIC VARIBALE'; ?>>timer</span>
And use this new ID

is there possible to loop javascript function id?

is there possible to loop javascript function id? I have a form and the form is create using for loop; so I using this autosave javascript to save a draft; now the javascript only run the $("#remark1"). So I need to use for loop to loop the $("#remark1").
<script type="text/javascript">
$(function() {
if (localStorage) {
var content = localStorage.getItem("autoSave");
if(content) {
$("#remark1").text(content);
}
}
$("#remark1").autoSave(function() {
var time = showTime();
$("#msg").text("Draft Autosaved " + time).show();
}, 2000);
$("#refresh").click(function() {
location.reload();
});
$("#clear").click(function() {
localStorage.clear();
location.reload();
});
function showTime() {
var timeNow = new Date();
var hours = timeNow.getHours();
var minutes = timeNow.getMinutes();
var seconds = timeNow.getSeconds();
var timeString = "" + ((hours > 12) ? hours - 12 : hours);
timeString += ((minutes < 10) ? ":0" : ":") + minutes;
timeString += ((seconds < 10) ? ":0" : ":") + seconds;
timeString += (hours >= 12) ? " P.M." : " A.M.";
return timeString;
}
});
I want to loop ("remark1"), any kind solution?

Do you mean something like this?
function dynamicSave( id ) {
$("#" + id).autoSave(function() {
var time = showTime();
$("#msg").text("Draft Autosaved " + time).show();
}, 2000);
}
var ids = [ 'remark1', 'remark2' ];
ids.each(function(id) {
dynamicSave( id );
});

Javascript Countdown Timer Counting Down Not Updating Seconds/Minutes Properly

I have created a countdown timer. However, it does not count down properly. Instead of counting down per second or minutes, it counts down by hundreths and does not update properly. I created another counting up timer using the same code but it works properly counting up per increment - it counts up minutes everytime 60 seconds have passed. I'm wondering how I can make this timer count down properly.
JSBin:
http://jsbin.com/funiveremi/6/edit
Updated* Adding in the 60 Seconds Counter:
http://jsbin.com/hohusuvube/2/edit
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>User Input Timer</title>
<script type="text/javascript" src="part2.js"></script>
</head>
<body>
<h1><div id="time">00:00:00</div></h1>
<div id="result"></div>
<button id="start" onclick ="startClock();" >Start</button>
<button id="stop" onclick="stopTimer();">Stop</button>
<button id="clear" onclick="resetTimer();">Reset</button>
</body>
</html>
JAVASCIPT
hundreths = 10;
seconds = 15;
minutes = 20;
document.getElementById("time").innerHTML = minutes + ":" + seconds + ":" + hundreths;
var currentTime = document.getElementById('time');
var t;
function startClock() {
function add() {
hundreths--;
if (hundreths < 0) {
hundreths = 0;
seconds--;
if (seconds < 0) {
seconds = 0;
minutes--;
}
if(minutes < 0) {
seconds= 0;
minutes= 0;
stopTimer();
}
}
if (hundreths > 9 && seconds < 9) {
currentTime.innerHTML = "0" + minutes + ":" + "0" + seconds + ":" + hundreths;
}
else if ((seconds > 9 ) && (hundreths < 9)) {
currentTime.innerHTML = "0" + minutes + ":" + seconds + ":" + "0" + hundreths;
}
else if((seconds > 9) && (hundreths > 9)) {
currentTime.innerHTML = "0" + minutes + ":" + seconds + ":" + hundreths;
}
else if ((minutes > 9) && (seconds < 9) && (hundreths < 9)) {
currentTime.innerHTML = minutes + ":" + "0" + seconds + ":" + "0" + hundreths;
}
else if ((minutes > 9) && (seconds > 9) && (hundreths < 9)) {
currentTime.innerHTML = minutes + ":" + seconds + ":" + "0" + hundreths;
}
else if ((minutes > 9) && (seconds > 9) && (hundreths < 9)) {
currentTime.innerHTML = minutes + ":" + seconds + ":" + hundreths;
}
else {
currentTime.innerHTML = "0" + minutes + ":" + "0" + seconds + ":" + "0" + hundreths;
}
timer();
} // end function add();
function timer() {
t = setTimeout(add, 100);
}
timer();
} // end function startClock();
function stopTimer() {
document.getElementById("result").innerHTML = "<p>" + ("Your time is: " + minutes + " minutes, " + seconds + " seconds, " + "and " + hundreths + " hundreths") + "</p>";
clearTimeout(t);
} // end function stopTimer();
function resetTimer() {
clearTimeout(t);
currentTime.innerHTML = "00:00:00";
} // end function resetTimer();

Just use the Jquery Countdown plugin.
http://hilios.github.io/jQuery.countdown/
The implementation will be easier. something like this.
<div id="getting-started"></div>
<script type="text/javascript">
$("#getting-started").countdown("2016/01/01", function(event) {
$(this).text(event.strftime('%D days %H:%M:%S'));
});
</script>

This will work, you had the logic about when to set seconds incorrect so it was constantly resetting itself. One of the best things to do in these kinds of cases if you're stuck is to simply try changing the if statements, remove some of them and play with different values. It can help teach you what's really happening in a system, and give you a clue as to what is wrong. Another tip is just to read the code aloud to yourself in normal English. As you read it aloud you will often realize you're mistakes by hearing yourself say the logic.
hundreths--;
if (hundreths < 0) {
hundreths = 10;
seconds--;
if (seconds < 0) {
seconds = 59;
minutes--;
}
if(minutes < 0) {
seconds= 0;
minutes= 0;
stopTimer();
}
}