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>
Related
I have jQuery function timer.
(function( $ ){
$.fn.makeTimer = function(val){
var val = val;
setInterval(function() {
var result;
var startTime = new Date(val);
startTime = (Date.parse(startTime) / 1000);
var now = new Date();
now = (Date.parse(now) / 1000);
var timePassed = now - startTime;
var years = Math.floor(timePassed / (86400 * 365));
var months = Math.floor((timePassed / (86400 * 30.41)) - (years * 12));
var days = Math.floor((timePassed / 86400) - (years * 365) - (months * 30.41));
var hours = Math.floor( (timePassed / 3600 ) - (years * (24 * 365)) - (months * (24 * 30.41)) - (days * 24) ) ;
var minutes = Math.floor( (timePassed / 60) - ( years * (1440 * 365) ) - (months * (1440 * 30.41)) - (days * (60 * 24)) - (hours * 60 ) );
var seconds = Math.floor(timePassed - (years * (86400 * 365)) - (months * (86400 * 30.41)) - (days * 86400) - (hours * 3600) - (minutes * 60) );
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; }
console.log(hours + ":" + minutes + ":" + seconds);
result = hours + ":" + minutes + ":" + seconds;
return result;
}, 1000);
};
})( jQuery );
$("#timers").makeTimer("07 April 2022 13:00:00 GMT+07:00");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="timers"></div>
And I call like this,
$("#timers").makeTimer("07 April 2022 13:00:00 GMT+07:00");
This is the HTML element,
<div id="timers"></div>
After tried to run the code, I can't print/echo the text into $("#timers"), but when I try to console.log(hours + ":" + minutes + ":" + seconds); I can see the value.
What I want, how to return result correctly into this element?
Add at the top of your function:
var $element = this;
Then, after calculating results:
$element.text(result)
If you need all the values:
$element.append(`<br />${result}`)
(function( $ ){
$.fn.makeTimer = function(val){
var val = val;
var $element = this;
setInterval(function() {
var result;
var startTime = new Date(val);
startTime = (Date.parse(startTime) / 1000);
var now = new Date();
now = (Date.parse(now) / 1000);
var timePassed = now - startTime;
var years = Math.floor(timePassed / (86400 * 365));
var months = Math.floor((timePassed / (86400 * 30.41)) - (years * 12));
var days = Math.floor((timePassed / 86400) - (years * 365) - (months * 30.41));
var hours = Math.floor( (timePassed / 3600 ) - (years * (24 * 365)) - (months * (24 * 30.41)) - (days * 24) ) ;
var minutes = Math.floor( (timePassed / 60) - ( years * (1440 * 365) ) - (months * (1440 * 30.41)) - (days * (60 * 24)) - (hours * 60 ) );
var seconds = Math.floor(timePassed - (years * (86400 * 365)) - (months * (86400 * 30.41)) - (days * 86400) - (hours * 3600) - (minutes * 60) );
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; }
console.log(hours + ":" + minutes + ":" + seconds);
result = hours + ":" + minutes + ":" + seconds;
$element.text(result);
return result;
}, 1000);
};
})( jQuery );
$("#timers").makeTimer("07 April 2022 13:00:00 GMT+07:00");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="timers"></div>
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.
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>
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 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