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
Related
Please help me with the code . How i can create alert when time runs out in this code. i want to set alert on when time runs out .
function makeTimer() {
// var endTime = new Date("29 April 2018 9:56:00 GMT+01:00");
var endTime = new Date("29 April 2020 9:56:00 GMT+01:00");
endTime = (Date.parse(endTime) / 1000);
var now = new Date();
now = (Date.parse(now) / 1000);
var timeLeft = endTime - now;
var days = Math.floor(timeLeft / 86400);
var hours = Math.floor((timeLeft - (days * 86400)) / 3600);
var minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600)) / 60);
var seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));
if (hours < "10") {
hours = "0" + hours;
}
if (minutes < "10") {
minutes = "0" + minutes;
}
if (seconds < "10") {
seconds = "0" + seconds;
}
$("#minutes").html(minutes + "<span>Minutes</span>");
$("#seconds").html(seconds + "<span>Seconds</span>");
}
setInterval(function() {
makeTimer();
}, 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="minutes"></span> <span id="seconds"></span>
Just test
const pad = n => ("0" + n).slice(-2);
var endTime = new Date();
// uncomment below
// endTime.setMinutes(endTime.getMinutes() + 15);// 15 minutes
// remove next line, it is just to show how the count down works without waiting 15 minutes
endTime.setSeconds(endTime.getSeconds() + 10);// 10 seconds
endTime = (Date.parse(endTime) / 1000);
function makeTimer() {
var now = new Date();
now = (Date.parse(now) / 1000);
var timeLeft = endTime - now;
var days = Math.floor(timeLeft / 86400);
var hours = Math.floor((timeLeft - (days * 86400)) / 3600);
var minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600)) / 60);
var seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));
$("#minutes").html(pad(minutes) + " <span>Minute" + (minutes === 1 ? "" : "s") + "</span>");
$("#seconds").html(pad(seconds) + " <span>Second" + (seconds === 1 ? "" : "s") + "</span>");
if (seconds === 0 && minutes === 0) {
console.log("Done")
clearInterval(tId);
}
}
const tId = setInterval(makeTimer, 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="minutes"></span> <span id="seconds"></span>
Inside the function,you can simply check the values of hours, minutes and seconds.As you already have it, you can simply put an if condition to check whether the hour is 0 and minute is 0 and second is 0. Then in that condition you can simply send an alert message.
Hi Here is my code I'm just looking to make it count down to the same time each week example (midnight Wednesday)
function makeTimer() {
var endTime = new Date("Dec 12, 2019 00:00:00");
endTime = (Date.parse(endTime) / 1000);
var now = new Date();
now = (Date.parse(now) / 1000);
var timeLeft = endTime - now;
var days = Math.floor(timeLeft / 86400);
var hours = Math.floor((timeLeft - (days * 86400)) / 3600);
var minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600 )) / 60);
var seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));
if (hours < "10") { hours = "0" + hours; }
if (minutes < "10") { minutes = "0" + minutes; }
if (seconds < "10") { seconds = "0" + seconds; }
$(".days").html(days + "<span class='mid'>Days</span><span class='top'>d</span>");
$(".hours").html(hours + "<span class='mid'>Hours</span><span class='top'>h</span>");
$(".minutes").html(minutes + "<span class='mid'>Minutes</span><span class='top'>m</span>");
$(".seconds").html(seconds + "<span class='mid'>Seconds</span><span class='top'>s</span>");
if (timeLeft < 0) {
clearInterval(makeTimer);
$(".timer").hide();;
}
}
setInterval(function() { makeTimer(); }, 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="timer">
<div class="days"></div>
<div class="hours"></div>
<div class="minutes"></div>
<div class="seconds"></div>
</div>
i want to make javascript countdown which takes SQL server DateTime as endtime and C# datetime as time which i will substract from SQL server endtime here is code
<script>
var EndTime = #Context.Session.GetString("EndTime");
var nowtime = #DateTime.Now.ToString();
var difference = EndTime - nowtime;
var initialTime = difference ;
var seconds = initialTime;
function timer() {
var days = Math.floor(seconds / 24 / 60 / 60);
var hoursLeft = Math.floor((seconds) - (days * 86400));
var hours = Math.floor(hoursLeft / 3600);
var minutesLeft = Math.floor((hoursLeft) - (hours * 3600));
var minutes = Math.floor(minutesLeft / 60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
document.getElementById('countdown').innerHTML = days + "dias " + hours + "horas " + minutes + "minutos " + remainingSeconds + "segundos";
if (seconds == 0) {
clearInterval(countdownTimer);
document.getElementById('countdown').innerHTML = "Completed";
} else {
seconds--;
}
}
var countdownTimer = setInterval('timer()', 1000);
</script>
<span id="countdown" class="timer"></span>
#Context.Session.GetString("EndTime") this is datetime from SQL server
adding datetimes this way to Javascript is not working need some help THX.
<span id="countdown" class="timer"></span>
<script>
var t1 = "#Context.Session.GetString("EndTime")";
var endTime = new Date(t1);
var t2 = "#DateTime.Now.ToString()";
var nowTime = new Date(t2);
var initialTime = (endTime - nowTime)/1000;
var seconds = initialTime;
function timer() {
var days = Math.floor(seconds / 24 / 60 / 60);
var hoursLeft = Math.floor((seconds) - (days * 86400));
var hours = Math.floor(hoursLeft / 3600);
var minutesLeft = Math.floor((hoursLeft) - (hours * 3600));
var minutes = Math.floor(minutesLeft / 60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
document.getElementById('countdown').innerHTML = days + "dias " + hours + "horas " + minutes + "minutos " + remainingSeconds + "segundos";
if (seconds == 0) {
clearInterval(countdownTimer);
document.getElementById('countdown').innerHTML = "Completed";
} else {
seconds--;
}
}
var countdownTimer = setInterval('timer()', 1000);
</script>
I remembered how i had it done this works in my case THX all.
I am currently developing a website with a countdown timer at the headline: http://iphone.myhandykey.com/
The current timer is just 12hrs + few mins.. What I would like is the countdown timer will show the time remaining until 11PM on the Time Zone of the current visitor. Is that possible? Thanks!
Here is the JavaScript:
function startTimer(duration, display) {
var timer = duration, hours, minutes, seconds;
setInterval(function () {
hours = parseInt(((timer / 60) / 60 ) % 60, 10);
minutes = parseInt((timer / 60)%60, 10);
seconds = parseInt(timer % 60, 10);
hours = hours < 10 ? "0" + hours : hours;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = hours + ":" + minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
window.onload = function () {
var onehour = 60 * 600 * 1.231,
display = document.querySelector('#time');
startTimer(onehour, display);
};
Here is the HTML:
<span id=time></span>
EDIT: If the visitor's current time is for example 11:40pm, It should display 23hrs & 20mins left..
(function() {
var start = new Date;
start.setHours(23, 0, 0); // 11pm
function pad(num) {
return ("0" + parseInt(num)).substr(-2);
}
function tick() {
var now = new Date;
if (now > start) { // too late, go to tomorrow
start.setDate(start.getDate() + 1);
}
var remain = ((start - now) / 1000);
var hh = pad((remain / 60 / 60) % 60);
var mm = pad((remain / 60) % 60);
var ss = pad(remain % 60);
document.getElementById('time').innerHTML =
hh + ":" + mm + ":" + ss;
setTimeout(tick, 1000);
}
document.addEventListener('DOMContentLoaded', tick);
})();
Only <span id='time'></span> left!
Something like this:
$(document).ready(function () {
var mg = new Date(2016, 5, 21, 0, 0, 0, 0);
var tmr = window.setInterval(function () {
var d = new Date();
var dif = mg - d;
var s = parseInt(dif / 1000);
if (s < 0) {
document.getElementById('spCnt').innerHTML = 'Event starts';
window.clearInterval(tmr);
return;
}
var sec = s % 60;
var m = parseInt(s / 60);
var min = m % 60;
var h = parseInt(m / 60);
var hour = h % 24;
d = parseInt(h / 24);
document.getElementById('spCnt').innerHTML = d + ' days ' + hour + ' hours ' + min + ' min and ' + sec + ' sec remaining';
}, 1000);
});
I'm new in javascript.
My PHP script returns a value in this format
d:h:m:s
Now I would like to have a countdown which is able to countdown each second from this.
I modified a countdown. This works once a time, after the countdown "ticks" each second it returns NaN all the time. Any idea what I do wrong?
$(document).ready(function() {
setInterval(function() {
$('.countdown').each(function() {
var time = $(this).data("time").split(':');
var timestamp = time[0] * 86400 + time[1] * 3600 + time[2] * 60 + time[3] * 1;
var days = Math.floor(timestamp / 86400);
console.log(time,timestamp);
var hours = Math.floor((timestamp - days * 86400) / 3600);
var minutes = Math.floor((timestamp - hours * 3600) / 60);
var seconds = timestamp - ((days * 86400) + (hours * 3600) + (minutes * 60))-1;
$(this).data("time",""+days+":"+hours+":"+minutes+":"+seconds);
if (hours < 10) {
hours = '0' + hours;
}
if (minutes < 10) {
minutes = '0' + minutes;
}
if (seconds < 10) {
seconds = '0' + seconds;
}
$(this).text(days + ':' + hours + ':' + minutes + ':' + seconds);
});
}, 1000);
})
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1 class="countdown">02:03:05:59</h1>
As far as I can see you have 2 problems here:
after the first execution you change the pattern of the text you display in the h1. First you have 02:03:05:59. Then you want to write 02 days 03:05:58 into the tag. Next time you parse it, you get the error because you split at : and that does not work anymore as you have days instead of : as the seperator for the first part.
When calculating the minutes, you should also substract the days and not just the hours.
When you wan to keep the dd:hh:mm:ss format, you could do it like this:
$(document).ready(function() {
setInterval(function() {
$('.countdown').each(function() {
var time = $(this).text().split(':');
var timestamp = time[0] * 86400 + time[1] * 3600 + time[2] * 60 + time[3] * 1;
timestamp -= timestamp > 0;
var days = Math.floor(timestamp / 86400);
console.log(days);
var hours = Math.floor((timestamp - days * 86400) / 3600);
var minutes = Math.floor((timestamp - days * 86400 - hours * 3600) / 60);
var seconds = timestamp - days * 86400 - hours * 3600 - minutes * 60;
if (days < 10) {
days = '0' + days;
}
if (hours < 10) {
hours = '0' + hours;
}
if (minutes < 10) {
minutes = '0' + minutes;
}
if (seconds < 10) {
seconds = '0' + seconds;
}
$(this).text(days + ':' + hours + ':' + minutes + ':' + seconds);
});
}, 1000);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1 class="countdown">02:03:05:59</h1>
Your snippet goes from dd:hh:mm:ss to dd days, hh hours. So second time around, your tag contains non-parsable text.
I have changed it to something more precise. Something even MORE precise would be to give a timestamp in milliseconds in the future instead of something with seconds since it will take several seconds to render the page. If you round on minutes from the server, it would likely be better.
var aDay = 24*60*60*1000, anHour = 60*60*1000, aMin = 60*1000, aSec = 1000;
$(document).ready(function() {
$('.countdown').each(function() {
var time = $(this).data("time").split(':');
var date = new Date();
date.setDate(date.getDate()+parseInt(time[0],10))
date.setHours(date.getHours()+parseInt(time[1],10),date.getMinutes()+parseInt(time[2],10),date.getSeconds()+parseInt(time[3],10),0)
$(this).data("when",date.getTime());
});
setInterval(function() {
$('.countdown').each(function() {
var diff = new Date(+$(this).data("when"))-new Date().getTime();
var seconds, minutes, hours, days, x = diff / 1000;
seconds = Math.floor(x%60); x=(x/60|0); minutes = x % 60; x= (x/60|0); hours = x % 24; x=(x/24|0); days = x;
$(this).text(
days + ' day' +(days==1?", ":"s, ") +
hours + ' hour' +(hours==1?", ":"s, ") +
minutes + ' minute'+(minutes==1?", ":"s, ") +
seconds + ' second'+(seconds==1?".":"s.")
);
});
}, 500);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1 class="countdown" data-time="02:03:05:59"></h1>