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.
Related
I just want to know how to make countdown after 0 0 0 0 its directly back to 23:59:59 so i have a problem when i try to create countdown function when its expired it will go to -0d -0h -0m -1s , -0d -0h -0m -2s but when i refresh it back to 23.59.58 , 23,59,57. i just want to know after clear interval it direcy go to 23.59.59 not -0d -0h -0m -0s . this is my script
countdown.js
function warTime2(countDownDate) {
var countDownDate = new Date();
countDownDate.setHours(14);
countDownDate.setMinutes(0);
countDownDate.setSeconds(0);
var now = new Date();
if (now.getHours() < countDownDate.getHours()) {
countDownDate = countDownDate;
} else if (countDownDate.getHours() <= now.getHours()) {
countDownDate.setDate(countDownDate.getDate() + 1);
}
var x = setInterval(function () {
var now = new Date();
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
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);
if (hours < 10) {
hours = "0" + hours;
}
if (minutes < 10) {
minutes = "0" + minutes;
}
if (seconds < 10) {
seconds = "0" + seconds;
}
document.getElementById("second_chip_war").innerHTML =
"02:00 PM War Start in " + hours + ":" + minutes + ":" + seconds;
if (distance < 0) {
clearInterval(x);
let newDate = countDownDate + 8 * 3600 * 1000;
warTime2(newDate);
}
}, 1000);
}
Thank you, glad to hear if you want to help me
You need to check whether distance is less than 0 when you first assign it, and if so, increase countDownDate by a day before recomputing distance and continuing the function:
function warTime2(countDownDate) {
var countDownDate = new Date();
countDownDate.setHours(14);
countDownDate.setMinutes(0);
countDownDate.setSeconds(0);
var now = new Date();
if (now.getHours() < countDownDate.getHours()) {
countDownDate = countDownDate;
} else
if (countDownDate.getHours() <= now.getHours()) {
countDownDate.setDate(countDownDate.getDate() + 1);
}
var x = setInterval(function() {
var now = new Date();
var distance = countDownDate - now;
if (distance < 0) {
// countdown complete, add a day to countDownDate and restart
countDownDate.setDate(countDownDate.getDate() + 1);
distance = countDownDate - now;
}
// Time calculations for days, hours, minutes and seconds
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);
if (hours < 10) {
hours = "0" + hours;
}
if (minutes < 10) {
minutes = "0" + minutes;
}
if (seconds < 10) {
seconds = "0" + seconds;
}
document.getElementById("second_chip_war").innerHTML = "02:00 PM War Start in " + hours + ":" +
minutes + ":" + seconds;
}, 1000);
}
warTime2('2020-06-21');
<div id="second_chip_war"></div>
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'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>
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