Develop Reference

How does one provide or target different data to DOM elements of one kind and does manage / maintain each of an element's rerender / update cycle?

I'm working on a page on my wordpress site where i pull data from the backend. The data has an end_date column that i use to display a countdown timer i.e. from the current date time till the end_date.
This is how i approach it:
This is the html element that will display the timer:
<div class="t1-auction-timer"></div>
This is the javascript that creates the timer:
var countDownDate = new Date("<?=$endDate?>").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
var timer = document.querySelectorAll(".t1-auction-timer");
for (var i = 0; i < timer.length; i++)
{
timer[i].innerHTML = '<ul class="clock-value"><li class="clock-days">' + padNumber(days) + '<small>days</small> </li><li class="clock-separator">:</li><li class="clock-hours"> ' + padNumber(hours) + ' <small>hrs</small> </li><li class="clock-separator">:</li><li class="clock-minutes"> ' + padNumber(minutes) + ' <small>min</small> </li><li class="clock-separator">:</li><li class="clock-seconds"> ' + padNumber(seconds) + ' <small>sec</small> </li></ul>';
}
if ( distance < 0 )
{
clearInterval(x);
for (var i = 0; i < timer.length; i++)
{
timer[i].innerHTML = "EXPIRED";
}
}
}, 1000);
function padNumber(number)
{
if( number == 0 )
{
number = "0" + number;
}
else if( number > 9 )
{
number;
}
else
{
number = "0" + number;
}
return number;
}
The <?=$endDate?> variable is passed from php. Its being passed correctly.
The number of timers to be displayed will be dynamic depending on the records in the database. The issue I'm facing is: I only get timer created from the first record. Its duplicated across all posts being displayed on the page. I suspect this has to do with my .t1-auction-timer class loop but I haven't figured it out yet.

You can try this approach which uses the data attribute.
var auctionTimer = document.getElementsByClassName('t1-auction-timer');
var interval = setInterval(function() {
if(auctionTimer.length == 0 ){clearFunction()}
for(var i= 0; i < auctionTimer.length; i++){
var endDate = auctionTimer[i].getAttribute('data-end-date')
var int = createTimer(endDate, auctionTimer[i]);
}
},1000)
function clearFunction() {
clearInterval(interval);
}
function createTimer(endDate, element){
var countDownDate = new Date(endDate).getTime();
var now = new Date().getTime();
var distance = countDownDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
element.innerHTML = '<ul class="clock-value"><li class="clock-days">' + padNumber(days) + '<small>days</small> </li><li class="clock-separator">:</li><li class="clock-hours"> ' + padNumber(hours) + ' <small>hrs</small> </li><li class="clock-separator">:</li><li class="clock-minutes"> ' + padNumber(minutes) + ' <small>min</small> </li><li class="clock-separator">:</li><li class="clock-seconds"> ' + padNumber(seconds) + ' <small>sec</small> </li></ul>';
if ( distance < 0 )
{
if ( element.classList.contains("t1-auction-timer") ){
element.classList.remove("t1-auction-timer")
element.classList.add("expierd")
expierd()
}
}
}
function padNumber(number)
{
if( number == 0 )
{
number = "0" + number;
}
else if( number > 9 )
{
number;
}
else
{
number = "0" + number;
}
return number;
}
function expierd(){
var expierdDate = document.getElementsByClassName('expierd');
for(var i= 0; i < expierdDate.length; i++){
expierdDate[i].innerHTML = "expierd"
}
}
<div class="t1-auction-timer" data-end-date="2021-01-03 16:15"></div>
<div class="t1-auction-timer" data-end-date="2021-01-01 16:15"></div>
<div class="t1-auction-timer" data-end-date="2021-01-04 16:15"></div>

An approach which directly uses a lot from the OP's code almost unchanged does, within an interval, process a collection of timer elements by (re)rendering each timer again and again.
A timer element's markup base will be the already above (in the comments) mentioned <time/> element where the the OP's endDate will be retrieved from this element's datetime attribute (also again and again) ...
function padNumber(number) {
return (number >= 10) && number || `0${ number }`;
}
function updateTimer(nodeList, timer, timerData) {
// GUARD
if (timer.dataset.isExpired === "true") {
return;
}
const countDownDate = new Date(timer.dateTime).getTime();
const now = new Date().getTime();
const distance = countDownDate - now;
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
if (distance >= 0) {
timer.innerHTML = `<ul class="clock-value">
<li class="clock-days">${ padNumber(days) } <small>days</small></li>
<li class="clock-hours">${ padNumber(hours) } <small>hrs</small></li>
<li class="clock-minutes">${ padNumber(minutes) } <small>min</small></li>
<li class="clock-seconds">${ padNumber(seconds) } <small>sec</small></li>
</ul>`;
} else {
timer.innerHTML = "EXPIRED";
timer.dataset.isExpired = "true";
// clear the interval only in case each timer has been expired.
if ([
...nodeList
].every(elmNode =>
elmNode.dataset.isExpired === "true"
)) {
clearInterval(timerData.timerId);
}
}
}
function updateAllTimers(nodeList, timerData) {
nodeList.forEach(timer => updateTimer(nodeList, timer, timerData));
}
function initializeAllTimers() {
const nodeList = document.querySelectorAll('.t1-auction-timer');
const data = {
timerId: null
};
updateAllTimers(nodeList, data);
data.timerId = setInterval(updateAllTimers, 1000, nodeList, data);
}
initializeAllTimers();
body {
margin: 0;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
padding: 2px 10px 3px 10px;
}
li .auction-name {
font-family: courier;
}
ul.clock-value,
ul.clock-value > li {
padding: 0;
display: inline-block;
}
ul.clock-value > li {
font-family: ui-monospace;
}
ul.clock-value li:not(:last-child) small:after {
content: ":";
display: inline-block;
width: .7em;
font-weight: bold;
text-align: right;
}
<ul>
<li>
Auction <span class="auction-name">Foo</span> expires at/in ...
<time class="t1-auction-timer" datetime="2020-12-21 22:15">2020-12-21 22:15</time>
</li>
<li>
Auction <span class="auction-name">Bar</span> expires at/in ...
<time class="t1-auction-timer" datetime="2020-12-22 03:15">2020-12-22 03:15</time>
</li>
<li>
Auction <span class="auction-name">Baz</span> expires at/in ...
<time class="t1-auction-timer" datetime="2020-12-22 11:30">2020-12-22 11:30</time>
</li>
<li>
Auction <span class="auction-name">Biz</span> expires at/in ...
<time class="t1-auction-timer" datetime="2020-12-22 14:45">2020-12-22 14:45</time>
</li>
<li>
Auction <span class="auction-name">Buz</span> expires at/in ...
<time class="t1-auction-timer" datetime="2020-12-23 10:20">2020-12-23 10:20</time>
</li>
<li>
Auction <span class="auction-name">Fiz</span> expires at/in ...
<time class="t1-auction-timer" datetime="2020-12-24 10:55">2020-12-24 10:55</time>
</li>
<li>
Auction <span class="auction-name">Faz</span> expires at/in ...
<time class="t1-auction-timer" datetime="2021-01-04 16:15">2021-01-04 16:15</time>
</li>
</ul>
The above approach might be changed towards creating a list of already pre-rendered timer components where each component's update is not anymore based on assigning a huge piece of always newly created HTML markup to a DOM node's innerHTML.
In order to enable a more generic / flexible usage of such components, one now can pass a template-string of custom timer-markup as well as a custom "expired" message to the initializing method. In addition any component now gets identified by its data-countdown-component attribute which makes the creation / initialization process independent from any forced or just layout-related CSS class-names.
function emptyElementNode(elmNode) {
Array
.from(elmNode.childNodes)
.forEach(node => node.remove());
}
function createTemplateFromMarkup(templateMarkup) {
const container = document.createElement('div');
container.innerHTML = String(templateMarkup);
return container.firstElementChild;
}
function getTimeMeasureFromMilliseconds(value) {
let days = (value / 3600000 / 24);
let hours = ((days - Math.floor(days)) * 24);
let minutes = ((hours - Math.floor(hours)) * 60);
let seconds = ((minutes - Math.floor(minutes)) * 60);
days = Math.floor(days);
hours = Math.floor(hours);
minutes = Math.floor(minutes);
seconds = Math.floor(seconds + 0.001);
seconds = ((seconds < 60) && seconds) || 0;
minutes = ((minutes < 60) && minutes) || 0;
hours = ((hours < 24) && hours) || 0;
return { days, hours, minutes, seconds };
}
function formatMeasure(value) {
return ((value >= 10) && value || `0${ value }`);
}
function createTimerComponent(rootNode, template, expiredMessage) {
const expirationDate = new Date(rootNode.dateTime);
const [
elmDays,
elmHours,
elmMinutes,
elmSeconds
] = [...template.querySelectorAll([
'[data-countdown-days]',
'[data-countdown-hours]',
'[data-countdown-minutes]',
'[data-countdown-seconds]',
].join(','))];
const component = {
rootNode,
elmDays,
elmHours,
elmMinutes,
elmSeconds,
isExpired: false,
expiredMessage,
expiresTimestamp: expirationDate.getTime(),
};
emptyElementNode(component.rootNode);
rootNode.dateTime = expirationDate.toUTCString();
rootNode.appendChild(template);
return component;
}
function updateTimer(componentList, component, timerData) {
// GUARD
if (component.isExpired) {
return;
}
const { dateNow } = timerData;
const { expiresTimestamp } = component;
const { elmDays, elmHours, elmMinutes, elmSeconds } = component;
const time = (expiresTimestamp - dateNow);
if (time >= 0) {
const measures = getTimeMeasureFromMilliseconds(time);
elmSeconds.textContent = formatMeasure(measures.seconds);
elmMinutes.textContent = formatMeasure(measures.minutes);
elmHours.textContent = formatMeasure(measures.hours);
elmDays.textContent = formatMeasure(measures.days);
} else {
component.isExpired = true;
emptyElementNode(component.rootNode);
component.rootNode.textContent = component.expiredMessage;
// clear the interval only in case each timer has been expired.
if (componentList.every(item => item.isExpired)) {
clearInterval(timerData.timerId);
}
}
}
function updateAllTimers(componentList, timerData) {
timerData.dateNow = Date.now();
componentList.forEach(component =>
updateTimer(componentList, component, timerData)
);
}
function initializeAllTimers(templateMarkup, expiredMessage = 'Closed') {
const defaultTemplateMarkup = [
'<span>',
'<span data-countdown-days></span> <small>days</small>, ',
'<span data-countdown-hours></span> <small>hours</small>, ',
'<span data-countdown-minutes></span> <small>minutes</small>, ',
'<span data-countdown-seconds></span> <small>seconds</small>',
'</span>',
].join('');
let template = createTemplateFromMarkup(templateMarkup);
if (!template || template.querySelectorAll([
'[data-countdown-days]',
'[data-countdown-hours]',
'[data-countdown-minutes]',
'[data-countdown-seconds]',
].join(',')).length !== 4) {
template = createTemplateFromMarkup(defaultTemplateMarkup);
}
const componentList = [
...document.querySelectorAll('[data-countdown-component]')
].map(elmNode =>
createTimerComponent(elmNode, template.cloneNode(true), expiredMessage)
);
const data = {
timerId: null,
dateNow: null,
};
updateAllTimers(componentList, data);
data.timerId = setInterval(updateAllTimers, 1000, componentList, data);
}
initializeAllTimers(`<ul class="clock-value">
<li class="clock-days">
<span data-countdown-days></span> <small>days</small>
</li>
<li class="clock-hours">
<span data-countdown-hours></span> <small>hours</small>
</li>
<li class="clock-minutes">
<span data-countdown-minutes></span> <small>minutes</small>
</li>
<li class="clock-seconds">
<span data-countdown-seconds></span> <small>seconds</small>
</li>
</ul>`, 'Expired');
body {
margin: 0;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
padding: 2px 10px 3px 10px;
}
li .auction-name {
font-family: courier;
}
ul.clock-value,
ul.clock-value > li {
padding: 0;
display: inline-block;
}
ul.clock-value > li {
font-family: ui-monospace;
}
ul.clock-value li:not(:last-child) small:after {
content: ":";
display: inline-block;
width: .7em;
font-weight: bold;
text-align: right;
}
<ul>
<li>
Auction <span class="auction-name">Foo</span> expires at/in ...
<time data-countdown-component datetime="2020-12-21 22:15">2020-12-21 22:15</time>
</li>
<li>
Auction <span class="auction-name">Bar</span> expires at/in ...
<time data-countdown-component datetime="2020-12-22 03:15">2020-12-22 03:15</time>
</li>
<li>
Auction <span class="auction-name">Baz</span> expires at/in ...
<time data-countdown-component datetime="2020-12-22 11:30">2020-12-22 11:30</time>
</li>
<li>
Auction <span class="auction-name">Biz</span> expires at/in ...
<time data-countdown-component datetime="2020-12-22 14:45">2020-12-22 14:45</time>
</li>
<li>
Auction <span class="auction-name">Buz</span> expires at/in ...
<time data-countdown-component datetime="2020-12-23 10:20">2020-12-23 10:20</time>
</li>
<li>
Auction <span class="auction-name">Fiz</span> expires at/in ...
<time data-countdown-component datetime="2020-12-24 10:55">2020-12-24 10:55</time>
</li>
<li>
Auction <span class="auction-name">Faz</span> expires at/in ...
<time data-countdown-component datetime="2021-01-04 16:15">2021-01-04 16:15</time>
</li>
</ul>

Countdown timer is restarting evertime I hit refresh

Whenever I refresh my browser its restarting from the start. I uploaded it on server..I'm getting the same result.
Here's my code:
function getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function initializeClock(id, endtime) {
var clock = document.getElementById(id);
var daysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');
function updateClock() {
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 <= 0) {
clearInterval(timeinterval);
}
}
updateClock();
var timeinterval = setInterval(updateClock, 1000);
}
var deadline = new Date(Date.parse(new Date()) + 33 * 24 * 60 * 60 * 1000);
initializeClock('clockdiv', deadline);
#clockdiv {
font-family: Calibri;
color: #001a00;
display: inline-block;
font-weight: 10;
text-align: center;
font-size: 30px;
}
#clockdiv>div {
padding: 10px;
border-radius: 3px;
display: inline-block;
}
.smalltext {
padding-top: 5px;
font-size: 16px;
}
<div id="clockdiv">
<div>
<span class="days"></span>
<div class="smalltext">Days</div>
</div>
<div>
<span class="hours"></span>
<div class="smalltext">Hours</div>
</div>
<div>
<span class="minutes"></span>
<div class="smalltext">Minutes</div>
</div>
<div>
<span class="seconds"></span>
<div class="smalltext">Seconds</div>
</div>
</div>
Here's the fiddle- code
What am I doing wrong here?
At first I thought it'll be fine if I upload it on server..but still getting the same result.
If there's another code..please help me out or guide me..how to do it!
Thanks!

It is because of this line
var deadline = new Date(Date.parse(new Date()) + 33 * 24 * 60 * 60 * 1000);
You keep setting the date to 33 days in the future, so every time the page loads this is set.
If you change this line to the following and pass in your desired date.
var deadline = new Date(Date.parse('2017-10-30'));
Run code snippet below.
function getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function initializeClock(id, endtime) {
var clock = document.getElementById(id);
var daysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');
function updateClock() {
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 <= 0) {
clearInterval(timeinterval);
}
}
updateClock();
var timeinterval = setInterval(updateClock, 1000);
}
var deadline = new Date(Date.parse('2017-10-30'));
initializeClock('clockdiv', deadline);
#clockdiv {
font-family: Calibri;
color: #001a00;
display: inline-block;
font-weight: 10;
text-align: center;
font-size: 30px;
}
#clockdiv>div {
padding: 10px;
border-radius: 3px;
display: inline-block;
}
.smalltext {
padding-top: 5px;
font-size: 16px;
}
<div id="clockdiv">
<div>
<span class="days"></span>
<div class="smalltext">Days</div>
</div>
<div>
<span class="hours"></span>
<div class="smalltext">Hours</div>
</div>
<div>
<span class="minutes"></span>
<div class="smalltext">Minutes</div>
</div>
<div>
<span class="seconds"></span>
<div class="smalltext">Seconds</div>
</div>
</div>

When you set
var deadline = new Date(Date.parse(new Date()) + 33 * 24 * 60 * 60 * 1000);
every time you load the script, it will always be 33 days (and so on) from now. So you'll have to give the script a fixed deadline like so:
var deadline = new Date(Date.parse('2017-10-12'));

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>

How to show minute, second, hour in time progress bar

I have a time progress bar. I use this code. In this time bar, I get the time in seconds, but I want to show minute, second, hour in the time progress bar.
var timer = 0,
timeTotal = 2500,
timeCount = 20,
timeStart = 0,
cFlag;
function updateProgress(percentage) {
var x = (percentage/timeTotal)*100,
y = x.toFixed(3);
$('#pbar_innerdiv').css("width", x + "%");
$('#pbar_innertext').css("left", x + "%").text((percentage / 1000).toFixed(2) + "\00a0s");
}
function animateUpdate() {
var perc = new Date().getTime() - timeStart;
if(perc < timeTotal) {
updateProgress(perc);
timer = setTimeout(animateUpdate, timeCount);
} else {
updateProgress(timeTotal);
}
}
$(document).ready(function() {
$('#pbar_outerdiv').click(function() {
if (cFlag == undefined) {
clearTimeout(timer);
cFlag = true;
timeStart = new Date().getTime();
animateUpdate();
}
else if (!cFlag) {
cFlag = true;
animateUpdate();
}
else {
clearTimeout(timer);
cFlag = false;
}
});
});
jsfiddle.net/McNetic/hnfRe/397

You can try this. DEMO LINK HERE
<div id="pbar_outerdiv" style="width: 300px; height: 20px; border: 1px solid grey; z-index: 1; position: relative; border-radius: 5px; -moz-border-radius: 5px;">
<div id="pbar_innerdiv" style="background-color: lightblue; z-index: 2; height: 100%; width: 0%;"></div>
<div id="pbar_innertext" style="z-index: 3; position: absolute; top: 0; left: 0; height: 100%; color: black; font-weight: bold; text-align: center;">0 s</div>
</div>
<p>Click once to start!</p>
<p>Click again to toggle Start/Stop</p>
JS...
var timer = 0,
timeTotal = 250000,
timeCount = 20,
timeStart = 0,
cFlag;
function updateProgress(percentage) {
var x = (percentage/timeTotal)*100,
y = x.toFixed(3);
var totalSec= (percentage / 1000);
var min = parseInt(totalSec/60);
var sec = parseInt(totalSec%60);
var hr= parseInt(min/60);
min = parseInt(min % 60);
$('#pbar_innerdiv').css("width", x + "%");
$('#pbar_innertext').css("left", x + "%").text(hr+":"+min+":"+sec + "");
}
function animateUpdate() {
var perc = new Date().getTime() - timeStart;
if(perc < timeTotal) {
updateProgress(perc);
timer = setTimeout(animateUpdate, timeCount);
} else {
updateProgress(timeTotal);
}
}
$(document).ready(function() {
$('#pbar_outerdiv').click(function() {
if (cFlag == undefined) {
clearTimeout(timer);
cFlag = true;
timeStart = new Date().getTime();
animateUpdate();
}
else if (!cFlag) {
cFlag = true;
animateUpdate();
}
else {
clearTimeout(timer);
cFlag = false;
}
});
});
CSS...
#pbar_outerdiv { cursor: pointer; }

With percentaje (line 11):
function updateProgress(percentage) {
var x = (percentage/timeTotal)*100,
y = x.toFixed(3);
$('#pbar_innerdiv').css("width", x + "%");
$('#pbar_innertext').css("left", x + "%").text(x.toFixed(2) + '%');
}
SEE DEMO
With hours, minutes and seconds:
var seconds = 1000;
var minutes = seconds * 60;
var hours = minutes * 60;
var days = hours * 24;
var years = days * 365;
function updateProgress(percentage) {
var x = (percentage/timeTotal)*100,
y = x.toFixed(3);
$('#pbar_innerdiv').css("width", x + "%");
$('#pbar_innertext').css("left", x + "%").text( Math.floor(percentage/hours) + 'h ' + Math.floor(percentage/minutes) + 'm ' + Math.floor(percentage/seconds) + 's');
}
SEE DEMO.
I think for that you should use requestAnimationFrame:
var timeTotal = 2500,
timeStart = 0,
cFlag = false;
var seconds = 1000;
var minutes = seconds * 60;
var hours = minutes * 60;
var days = hours * 24;
var years = days * 365;
function updateProgress() {
var time = new Date().getTime() - timeStart;
var x = (time/timeTotal)*100,
y = x.toFixed(3);
$('#pbar_innerdiv').css("width", x + "%");
$('#pbar_innertext').css("left", x + "%").text( Math.floor(time/hours) + 'h ' + Math.floor(time/minutes) + 'm ' + Math.floor(time/seconds) + 's');
if(time <= timeTotal && cFlag) {
requestAnimationFrame(updateProgress);
}
}
$(document).ready(function() {
$('#pbar_outerdiv').click(function() {
if (cFlag === false) {
cFlag = true;
timeStart = new Date().getTime();
updateProgress();
}
else {
cFlag = false;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pbar_outerdiv" style="width: 300px; height: 20px; border: 1px solid grey; z-index: 1; position: relative; border-radius: 5px; -moz-border-radius: 5px;">
<div id="pbar_innerdiv" style="background-color: lightblue; z-index: 2; height: 100%; width: 0%;"></div>
<div id="pbar_innertext" style="z-index: 3; position: absolute; top: 0; left: 0; height: 100%; color: black; font-weight: bold; text-align: center;">0h 0m 0s</div>
</div>
<p>Click once to start!</p>
<p>Click again to toggle Start/Stop</p>
UPDATED WITH PAUSE ALLOW AND RESUME:
var timeTotal = 5 * minutes,
timePaused = 0,
timePausedStart = 0,
timeStart = 0,
cFlag = false,
stopped = false;
var seconds = 1000;
var minutes = seconds * 60;
var hours = minutes * 60;
var days = hours * 24;
var years = days * 365;
function updateProgress() {
if( !timePausedStart ) { // if not paused
var time = new Date().getTime() - timeStart - timePaused;
var x = (time/timeTotal)*100,
y = x.toFixed(3);
$('#pbar_innerdiv').css("width", x + "%");
$('#pbar_innertext').css("left", x + "%").text( Math.floor(time/hours%24) + 'h ' + Math.floor(time/minutes%60) + 'm ' + Math.floor(time/seconds) + 's');
if(time > timeTotal) {
cFlag = false;
}
if( Math.floor(time/seconds) == 3*60+30 && !stopped){ // pause at 3 m 30 s
stopped = true;
pause();
}
}
if( cFlag )
requestAnimationFrame(updateProgress);
}
$(document).ready(function() {
$('#pbar_outerdiv').click(function() {
if (cFlag === false) {
cFlag = true;
timeStart = new Date().getTime();
timePaused = 0;
updateProgress();
} else if( cFlag === true && timePausedStart ){ // reset pause
timePaused += new Date().getTime() - timePausedStart;
timePausedStart = 0;
}
else {
pause();
}
});
});
var pause = function(){
timePausedStart = new Date().getTime();
};
#pbar_outerdiv { cursor: pointer; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pbar_outerdiv" style="width: 300px; height: 20px; border: 1px solid grey; z-index: 1; position: relative; border-radius: 5px; -moz-border-radius: 5px;">
<div id="pbar_innerdiv" style="background-color: lightblue; z-index: 2; height: 100%; width: 0%;"></div>
<div id="pbar_innertext" style="z-index: 3; position: absolute; top: 0; left: 0; height: 100%; color: black; font-weight: bold; text-align: center;">0h 0m 0s</div>
</div>
<p>Click once to start!</p>
<p>Click again to toggle Start/Stop</p>

Instead of printing (percentage / 1000).toFixed(2), you can use percentage to split your time in millisecond to h:m's.ms
You can simply compute the desired values with integer divisions
h = Math.floor(percentage / 3600000);
m = Math.floor((percentage - h * 3600000) / 60000);
s = Math.floor((percentage - h * 3600000 - m * 60000) / 1000);
ms = Math.floor(percentage - h * 3600000 - m * 60000 - s * 1000);
Then, you can just use toString() to convert your int to strings. I concatenated the values with 0 and and used slice() to keep only the two last character. This allow you to print hours, minutes, ... in two digits format
text = ("0" + h.toString() ).slice(-2) + ":" +
("0" + m.toString() ).slice(-2) + "'" +
("0" + s.toString() ).slice(-2) + "\"" +
("0" + ms.toString()).slice(-2);