Develop Reference

How to run timer from 0 to 10 min in javascript?

Could you please tell me how to run timer from 0 to 10 min in JavaScript?
Here is my code:
var secondsToMinutesAndSeconds = function (time) {
// Minutes and seconds
var mins = ~~(time / 60);
var secs = time % 60;
// Hours, minutes and seconds
var hrs = ~~(time / 3600);
var mins = ~~((time % 3600) / 60);
var secs = time % 60;
var ret = ""; //OUPUT: HH:MM:SS or MM:SS
if (hrs > 0) {
ret += "" + hrs + ":" + (mins < 10 ? "0" : "");
}
ret += "" + mins + ":" + (secs < 10 ? "0" : "");
ret += "" + secs;
return ret;
};
// time given by server
var uitat = 600;
var jobSessionTime ;
function callAtInterval() {
if (parseInt(uitat) > 0) {
uitat = parseInt(uitat) - 1;
jobSessionTime = secondsToMinutesAndSeconds(uitat);
console.log(jobSessionTime)
} else {
console.log('=====')
}
}
// time given by server 600
jobSessionTime = secondsToMinutesAndSeconds(600);
var stop = setInterval(callAtInterval, 1000);
Currently it prints from 10:00 to 00:00 yet
i want it to print from 00:00 to 10:00.
https://jsbin.com/reqocerefa/3/edit?html,js,console

var secondsToMinutesAndSeconds = function (time) {
// Minutes and seconds
var mins = ~~(time / 60);
var secs = time % 60;
// Hours, minutes and seconds
var hrs = ~~(time / 3600);
var mins = ~~((time % 3600) / 60);
var secs = time % 60;
var ret = ""; //OUPUT: HH:MM:SS or MM:SS
if (hrs > 0) {
ret += "" + hrs + ":" + (mins < 10 ? "0" : "");
}
ret += "" + mins + ":" + (secs < 10 ? "0" : "");
ret += "" + secs;
return ret;
};
// time given by server
var uitat = 0;
var jobSessionTime ;
function callAtInterval() {
if (parseInt(uitat) < 600) {
uitat = parseInt(uitat) + 1;
jobSessionTime = secondsToMinutesAndSeconds(uitat);
console.log(jobSessionTime)
} else {
clearInterval(stop);
}
}
// time given by server 600
jobSessionTime = secondsToMinutesAndSeconds(0);
var stop = setInterval(callAtInterval, 1000);

Try this:
var secondsToMinutesAndSeconds = function (time) {
// Minutes and seconds
var mins = ~~(time / 60);
var secs = time % 60;
// Hours, minutes and seconds
var hrs = ~~(time / 3600);
var mins = ~~((time % 3600) / 60);
var secs = time % 60;
var ret = ""; //OUPUT: HH:MM:SS or MM:SS
if (hrs > 0) {
ret += "" + hrs + ":" + (mins < 10 ? "0" : "");
}
ret += "" + mins + ":" + (secs < 10 ? "0" : "");
ret += "" + secs;
return ret;
};
// time given by server
var uitat = 0;
var jobSessionTime ;
function callAtInterval() {
if (parseInt(uitat) < 600) {
uitat = parseInt(uitat) + 1;
jobSessionTime = secondsToMinutesAndSeconds(uitat);
console.log(jobSessionTime)
} else {
console.log('=====');
clearInterval(stop); // stop timer
}
}
// time given by server 0
jobSessionTime = secondsToMinutesAndSeconds(0);
var stop = setInterval(callAtInterval, 1000);

You would just make these changes to start at zero and count up to 600 seconds:
// ...
var uitat = 0; // Change `= 600` to `= 0` to start at 0 seconds
var jobSessionTime;
function callAtInterval() {
if (parseInt(uitat) < 600) { // Change `> 0` to `< 600` to stop at 600 seconds
uitat = parseInt(uitat) + 1; // Change `- 1` to `+ 1` to count up
// ...
Here is the complete code with the changes:
var secondsToMinutesAndSeconds = function(time) {
// Minutes and seconds
var mins = ~~(time / 60);
var secs = time % 60;
// Hours, minutes and seconds
var hrs = ~~(time / 3600);
var mins = ~~((time % 3600) / 60);
var secs = time % 60;
var ret = ""; //OUPUT: HH:MM:SS or MM:SS
if (hrs > 0) {
ret += "" + hrs + ":" + (mins < 10 ? "0" : "");
}
ret += "" + mins + ":" + (secs < 10 ? "0" : "");
ret += "" + secs;
return ret;
};
// time given by server
var uitat = 0; // Change `= 600` to `= 0` to start at 0 seconds
var jobSessionTime;
function callAtInterval() {
if (parseInt(uitat) < 600) { // Change `> 0` to `< 600` to stop at 600 seconds
uitat = parseInt(uitat) + 1; // Change `- 1` to `+ 1` to count up
jobSessionTime = secondsToMinutesAndSeconds(uitat);
console.log(jobSessionTime);
} else {
console.log('=====')
}
}
// time given by server 600
jobSessionTime = secondsToMinutesAndSeconds(600);
var stop = setInterval(callAtInterval, 1000);

Here is the code with 600 held in a parameter:
var secondsToMinutesAndSeconds = function (time) {
// Minutes and seconds
var mins = ~~(time / 60);
var secs = time % 60;
// Hours, minutes and seconds
var hrs = ~~(time / 3600);
var mins = ~~((time % 3600) / 60);
var secs = time % 60;
var ret = ""; //OUPUT: HH:MM:SS or MM:SS
if (hrs > 0) {
ret += "" + hrs + ":" + (mins < 10 ? "0" : "");
}
ret += "" + mins + ":" + (secs < 10 ? "0" : "");
ret += "" + secs;
return ret;
};
// time given by server
var uitat = 600;
var current = 0;
var jobSessionTime;
function callAtInterval() {
if (current < uitat) {
current += 1;
jobSessionTime = secondsToMinutesAndSeconds(current);
console.log(jobSessionTime)
} else {
console.log('=====')
clearInterval(stop);
}
}
jobSessionTime = secondsToMinutesAndSeconds(0);
var stop = setInterval(callAtInterval, 1000);

How to remove the "day" when the countdown clock is under 24 hours

I'd like the day numbers to disappear when the clock goes below 24 hours instead of having it read "00".
I've attempted a few solutions, but nothing seems to be working for me. I can attach the HTML/CSS if it is needed.
Here is my js:
//
(function(e){
e.fn.countdown = function (t, n){
function i(){
eventDate = Date.parse(r.date) / 1e3;
currentDate = Math.floor(e.now() / 1e3);
//
if(eventDate <= currentDate){
n.call(this);
clearInterval(interval)
}
//
seconds = eventDate - currentDate;
days = Math.floor(seconds / 86400);
seconds -= days * 60 * 60 * 24;
hours = Math.floor(seconds / 3600);
seconds -= hours * 60 * 60;
minutes = Math.floor(seconds / 60);
seconds -= minutes * 60;
//
days == 1 ? thisEl.find(".timeRefDays").text("Days") : thisEl.find(".timeRefDays").text("Days");
hours == 1 ? thisEl.find(".timeRefHours").text("Hours") : thisEl.find(".timeRefHours").text("Hours");
minutes == 1 ? thisEl.find(".timeRefMinutes").text("Minutes") : thisEl.find(".timeRefMinutes").text("Minutes");
seconds == 1 ? thisEl.find(".timeRefSeconds").text("Seconds") : thisEl.find(".timeRefSeconds").text("Seconds");
//
if(r["format"] == "on"){
days = String(days).length >= 2 ? days : "0" + days;
hours = String(hours).length >= 2 ? hours : "0" + hours;
minutes = String(minutes).length >= 2 ? minutes : "0" + minutes;
seconds = String(seconds).length >= 2 ? seconds : "0" + seconds
}
//
if(!isNaN(eventDate)){
thisEl.find(".days").text(days);
thisEl.find(".hours").text(hours);
thisEl.find(".minutes").text(minutes);
thisEl.find(".seconds").text(seconds)
}
else{
errorMessage = "Invalid date. Example: 27 March 2015 17:00:00";
alert(errorMessage);
console.log(errorMessage);
clearInterval(interval)
}
}
//
var thisEl = e(this);
var r = {
date: null,
format: null
};
//
t && e.extend(r, t);
i();
interval = setInterval(i, 1e3)
}
})(jQuery);
//
$(document).ready(function(){
function e(){
var e = new Date;
e.setDate(e.getDate() + 60);
dd = e.getDate();
mm = e.getMonth() + 1;
y = e.getFullYear();
futureFormattedDate = mm + "/" + dd + "/" + y;
return futureFormattedDate
}
//
$("#countdown").countdown({
date: "05 December 2019 14:00:00",
format: "on"
});
});
});
I'm not really sure what other details I can provide, but please let me know if there is anything else I can submit to make this easier to answer.

How to calculate the difference between time inputs in javascript?

I want to calculate my work time. It works fine when I input
08:00 - 09:00 = 01:00
But when I input this time
23:30 - 01:30 = 10:00
It should return 02:00
function pad(num) {
return ("0" + num).slice(-2);
}
function diffTime(start, end) {
var s = start.split(":"),
sMin = +s[1] + s[0] * 60,
e = end.split(":"),
eMin = +e[1] + e[0] * 60,
diff = eMin - sMin;
if (diff < 0) {
sMin -= 12 * 60;
diff = eMin - sMin
}
var h = Math.floor(diff / 60),
m = diff % 60;
return "" + pad(h) + ":" + pad(m);
}
document.getElementById('button').onclick = function() {
document.getElementById('delay').value = diffTime(
document.getElementById('timeOfCall').value,
document.getElementById('timeOfResponse').value
);
}
<input type="time" id="timeOfCall">
<input type="time" id="timeOfResponse">
<button type="button" id="button">CLICK</button>
<input type="time" id="delay">

I would use a Date object to calculate the difference in time. Since you are only interested in the time, you can use any date to construct a valid date string. The reason why you are getting 10 hours is because there is no date to show that it is 1am the following day (this is from my understanding of your question).
You can do something like below to get the job done.
const pad = num => (num < 10) ? `0${num}` : `${num}`;
const addADay = (start, end) => {
const sHour = parseInt(start.split(':')[0], 10);
const eHour = parseInt(end.split(':')[0], 10);
return (eHour < sHour);
};
const diffTime = (start, end) => {
const startDate = new Date(`2019/01/01 ${start}:00`);
const endDate = addADay(start, end)
? new Date(`2019/01/02 ${end}:00`)
: new Date(`2019/01/01 ${end}:00`);
const diff = endDate.getTime() - startDate.getTime();
const hours = Math.floor(diff / 3600000);
const min = (diff - (hours * 3600000)) / 60000;
return `${pad(hours)}:${pad(min)}`;
}
console.log(diffTime('08:00','09:00')); // returns 01:00
console.log(diffTime('23:00','01:30')); // returns 02:30

The most important part in the required algorithm is finding if the end date is tomorrow.
based on your code here is a working example with my suggestion.
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<input type="time" id="timeOfCall">
<input type="time" id="timeOfResponse">
<button type="button" id="button" onclick="diffTime()">CLICK
</button>
<input type="time" id="delay">
<script>
function pad(num) {
return ("0" + num).slice(-2);
}
function diffTime() {
var start = document.getElementById("timeOfCall").value;
var end = document.getElementById("timeOfResponse").value;
// start date will be today
var d1 = new Date();
var s = start.split(":")
var date1 = new Date(d1.getFullYear(),d1.getMonth(),d1.getDate(),s[0],s[1],0,0);
var s2 = end.split(":")
// end date
if(s2[0] < s[0])
{
// its tommorow...
var ms = new Date().getTime() + 86400000;
var tomorrow = new Date(ms);
d1=tomorrow;
}
var date2 = new Date(d1.getFullYear(),d1.getMonth(),d1.getDate(),s2[0],s2[1],0,0);
var diff = date2.getTime() - date1.getTime();
var msec = diff;
var hh = Math.floor(msec / 1000 / 60 / 60);
msec -= hh * 1000 * 60 * 60;
var mm = Math.floor(msec / 1000 / 60);
msec -= mm * 1000 * 60;
var ss = Math.floor(msec / 1000);
msec -= ss * 1000;
alert(hh + ":" + mm + ":" + ss);
}
document.getElementById("timeOfCall").defaultValue = "23:30";
document.getElementById("timeOfResponse").defaultValue = "01:30";
</script>
</body>
</html>

Hello I have change your code slightly. The explanation is, let your start time is 10:00 and end time is 09:00. Now think with clock wise. the time had to go to 9:00 with 24 hours. So the calculation is difference between 24 and 10 hours and add the rest of the time.
D = E + (24 - S)
function pad(num) {
return ("0" + num).slice(-2);
}
function diffTime(start, end) {
var s = start.split(":"),
sMin = +s[1] + s[0] * 60,
e = end.split(":"),
eMin = +e[1] + e[0] * 60,
diff = eMin - sMin;
if (diff < 0) {
diff = eMin + (24 * 60 - sMin); /* You had to caculate with 24 hours */
}
var h = Math.floor(diff / 60),
m = diff % 60;
return "" + pad(h) + ":" + pad(m);
}
document.getElementById('button').onclick = function() {
document.getElementById('delay').value = diffTime(
document.getElementById('timeOfCall').value,
document.getElementById('timeOfResponse').value
);
}
<input type="time" id="timeOfCall">
<input type="time" id="timeOfResponse">
<button type="button" id="button">CLICK</button>
<input type="time" id="delay">

Here is another simpler way to look at the problem which satisfies all of your test cases, try your all test cases if any case fails then tell me i will fix it.
you just take the hours first and then check if is am or pm and then simply count the minutes.
function diffTime(start, end) {
var s = start.split(":");
var e = end.split(":");
var dHour;
var dMinute ;
var startHour = parseInt(s[0]);
var endHour = parseInt(e[0]);
var startMinute = parseInt(s[1]);
var endMinute = parseInt(e[1]);
// For counting difference of hours
if((startHour>12 && endHour>12) || (startHour<12 && endHour<12))
{
if(startHour<endHour)
{
dHour = endHour - startHour;
}
else if(startHour>endHour)
{
dHour = 24 - ( startHour - endHour);
}
else
{
dHour = 24;
}
}
else if(startHour>12 && endHour<=12)
{
dHour = (24 - startHour) + endHour;
}
else if(startHour<=12 && endHour > 12)
{
dHour = endHour - startHour;
}
else
{
dHour = 24
}
// For Counting Difference of Minute
if (startMinute>endMinute)
{
dMinute = 60 - (startMinute - endMinute);
dHour = dHour - 1;
}
else if(startMinute<endMinute)
{
dMinute = endMinute - startMinute;
}
else
{
dMinute = 0
}
return dHour + " Hours " + dMinute + " Minutes";
}
document.getElementById('button').onclick = function() {
document.getElementById('delay').value = diffTime(
document.getElementById('timeOfCall').value,
document.getElementById('timeOfResponse').value);
}
<input type="time" id="timeOfCall">
<input type="time" id="timeOfResponse">
<button type="button" id="button">CLICK</button>
<input type="text" id="delay">

thank you friend i solve my problem, Miraz Chowdhury's code has done my job

function diff(t1, t2) {
const day = 86400000;
function pad(num) {
return ("0" + num).slice(-2);
}
let time1 = t1.split(":").map(el => parseInt(el));
let time2 = t2.split(":").map(el => parseInt(el));
let zero = (new Date(1990, 0, 1, 0, 0)).setMilliseconds(0)
let aaa = (new Date(1990, 0, 1, time1[0], time1[1])).setMilliseconds(0)
let bbb = (new Date(1990, 0, 1, time2[0], time2[1])).setMilliseconds(0)
let diff = day -Math.abs(aaa - bbb)<Math.abs(aaa - bbb)?day -Math.abs(aaa - bbb):Math.abs(aaa - bbb)
return `${pad(Math.round(diff/1000/60/60))}:${pad(Math.abs(Math.round(diff/1000/60%60)))}`;
}
console.log(diff("09:00", "08:00"));
console.log(diff("23:30", "01:30"));
console.log(diff("01:30", "23:30"));

Auto-updatable values in angularJS

I have array of dates $scope.dates = [] ($scope.dates[0].date). I need to create another array with auto-updateble(!) values of durations.
$scope.dates[i].duration = Date.now() - $scope.dates[i].date.
I want to create timer in seconds:
<tr ng-repeat="x in dates">
<td>{{x.date | date:'HH:mm:ss'}}</td>
<td>{{x.duration}}</td>
Edit: Probled solved

Call this function, it will maintain object in $rootScope object:
$rootScope.timerActivate = function () {
console.log('activateTimer ::');
if(!$rootScope.time)
{
$rootScope.time = {}
}
var countDown = function () {
var today = new Date();
var hours = new Date().getHours();
var hours = (hours + 24) % 24;
var mid = 'am';
if (hours == 0) { //At 00 hours we need to show 12 am
hours = 12;
}
else if (hours > 12)
{
hours = hours % 12;
mid = 'pm';
}
var minute = today.getMinutes();
var sec = today.getSeconds();
$rootScope.time.hours = (hours < 10) ? '0' + hours : hours;
$rootScope.time.minutes = (minute < 10) ? '0' + minute : minute;
$rootScope.time.seconds = (sec < 10) ? '0' + sec : sec;
$rootScope.time.blink = (sec % 2) ? ':' : ' ';
$rootScope.time.mid = mid;
$timeout(countDown, 1000);
};
$timeout(countDown, 1000);
};

You should use $interval. https://docs.angularjs.org/api/ng/service/$interval

HeIp me for litle thing Countdown

I don't know javascript. How to add minute to datadate in that html/javascript?
Example:
Datadate is 3,19--> Wednesday 7pm. I wanna make it 3,19,30--> Wednesday 7pm past half (7:30pm).
function getRemaining(EVENTDAY, EVENTHOUR, now) {
now = new Date();
var dow = now.getDay();
var hour = now.getHours() + now.getMinutes() / 60 + now.getSeconds() / 3600;
var offset = EVENTDAY - dow;
if (offset < 0 || (offset === 0 && EVENTHOUR < hour)) {
offset += 7;
}
var eventDate = now.getDate() + offset;
var eventTime = new Date(now.getFullYear(), now.getMonth(), eventDate,
EVENTHOUR, 0, 0);
var millis = eventTime.getTime() - now.getTime();
var seconds = Math.round(millis / 1000);
var minutes = Math.floor(seconds / 60);
seconds %= 60;
var hours = Math.floor(minutes / 60);
minutes %= 60;
var days = Math.floor(hours / 24);
hours %= 24;
if (seconds < 10) seconds = "0" + seconds;
if (minutes < 10) minutes = "0" + minutes;
if (hours < 10) hours = "0" + hours;
return days + "d " + hours + "h " + minutes + "m ";
}
function tick() {
$.each($('.countdown'), function (i, v) {
startdate = $(this).attr('datadate');
startdate = startdate.split(',');
$(this).html(getRemaining(startdate[0], startdate[1]));
});
}
setInterval(tick, 1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="countdown" datadate='6,19'></span>
<br>
<span class="countdown" datadate='2,19'></span>
<br>
<span class="countdown" datadate='3,19'></span>
<br>
<span class="countdown" datadate='3,20'></span>
<br>
Hope you can help me.
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII

First of all, the last parameter from the function getRemaining(EVENTDAY, EVENTHOUR, now) is always null ( or undefined ). I removed the parameter and made a function-scoped variable.
I also made some visual changes to the code. Here You go, this should work:
function getRemaining(EVENTDAY, EVENTHOUR, EVENTMINUTE) {
var now = new Date();
var offset = EVENTDAY - now.getDay();
var hour = now.getHours() + now.getMinutes() / 60 + now.getSeconds() / 3600;
if (offset < 0 || (offset === 0 && EVENTHOUR < hour)) {
offset += 7;
}
var eventDate = now.getDate() + offset;
var eventTime = new Date(now.getFullYear(), now.getMonth(), eventDate, EVENTHOUR, EVENTMINUTE, 0);
var millis = eventTime.getTime() - now.getTime();
var seconds = Math.round(millis / 1000);
var minutes = Math.floor(seconds / 60);
var hours = Math.floor(minutes / 60);
var days = Math.floor(hours / 24);
seconds %= 60;
minutes %= 60;
hours %= 24;
if (seconds < 10) seconds = "0" + seconds;
if (minutes < 10) minutes = "0" + minutes;
if (hours < 10) hours = "0" + hours;
return days + "d " + hours + "h " + minutes + "m ";
}
function tick() {
$.each($('.countdown'), function (i, v) {
startdate = $(this).attr('datadate');
startdate = startdate.split(',');
$(this).html(getRemaining(startdate[0], startdate[1], startdate[2]));
});
}
setInterval(tick, 1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="countdown" datadate='6,5,8'></span>
<span class="countdown" datadate='3,10,30'></span>

You could use a library like moment.js
Then:
moment().format('MMMM Do YYYY, h:mm:ss a'); // February 12th 2015, 6:05:32 pm