This question already has answers here:
How to initialize a JavaScript Date to a particular time zone
(20 answers)
Closed 8 years ago.
I found this piece of Javascript on StackOverFlow which displays a live countdown to a specific date.
<script>
var end = new Date('02/19/2012 10:1 AM');
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;
function showRemaining() {
var now = new Date();
var distance = end - now;
if (distance < 0) {
clearInterval(timer);
document.getElementById('countdown').innerHTML = 'EXPIRED!';
return;
}
var days = Math.floor(distance / _day);
var hours = Math.floor((distance % _day) / _hour);
var minutes = Math.floor((distance % _hour) / _minute);
var seconds = Math.floor((distance % _minute) / _second);
document.getElementById('countdown').innerHTML = days + ' Days ';
document.getElementById('countdown').innerHTML += hours + ' Hours ';
document.getElementById('countdown').innerHTML += minutes + ' Minutes ';
document.getElementById('countdown').innerHTML += seconds + ' Seconds';
}
timer = setInterval(showRemaining, 1000);
</script>
<div id="countdown"></div>
However, I want to make it so that the time it uses is EST. So that if people view the counter from different timezones, they will see the same thing. How can I accomplish this? I'm new to JavaScript and I don't know where to go from here.
This would work:
<script>
var end = new Date('02/19/2012 10:1 AM EST');
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;
function getESTOffset() {
return new Date().getTimezoneOffset() - (end.getTimezoneOffset())
}
function showRemaining() {
var now = new Date();
var distance = end - now - getESTOffset() * _hour;
if (distance < 0) {
clearInterval(timer);
document.getElementById('countdown').innerHTML = 'EXPIRED!';
return;
}
var days = Math.floor(distance / _day);
var hours = Math.floor((distance % _day) / _hour);
var minutes = Math.floor((distance % _hour) / _minute);
var seconds = Math.floor((distance % _minute) / _second);
document.getElementById('countdown').innerHTML = days + ' Days ';
document.getElementById('countdown').innerHTML += hours + ' Hours ';
document.getElementById('countdown').innerHTML += minutes + ' Minutes ';
document.getElementById('countdown').innerHTML += seconds + ' Seconds';
}
timer = setInterval(showRemaining, 1000);
</script>
<div id="countdown"></div>
The key thing here is setting the end in the timezone you want it to be in (EST) and using it's offset before the calculations.
Related
Can the function below easily be converted to jQuery?
And retain the ability to call multiple instances of the countdown?
This function takes a server time that has been echoed by the server and then countdown to the date specified.
CountDownTimer('08/19/2018 10:01 AM', 'countdown');
CountDownTimer('08/20/2017 10:01 AM', 'newcountdown');
var serverTime = new Date('08/08/2017 12:01 AM'); // server time is echoed here
var clientTime = new Date();
var offset = serverTime-clientTime;
console.log(serverTime,clientTime,offset)
function CountDownTimer(dt, id) {
var end = new Date(dt);
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;
function showRemaining() {
var now = new Date();
var distance = end - (now-offset);
if (distance < 0) {
clearInterval(timer);
document.getElementById(id).innerHTML = 'EXPIRED!';
return;
}
var days = Math.floor(distance / _day);
var hours = Math.floor((distance % _day) / _hour);
var minutes = Math.floor((distance % _hour) / _minute);
var seconds = Math.floor((distance % _minute) / _second);
document.getElementById(id).innerHTML = days + 'days ';
document.getElementById(id).innerHTML += hours + 'hrs ';
document.getElementById(id).innerHTML += minutes + 'mins ';
document.getElementById(id).innerHTML += seconds + 'secs';
}
timer = setInterval(showRemaining, 1000);
}
Here you go. Obviously, not a lot changed! Only using jQuery to look up the element by ID.
CountDownTimer('08/19/2018 10:01 AM', 'countdown');
CountDownTimer('08/20/2017 10:01 AM', 'newcountdown');
var serverTime = new Date('08/08/2017 12:01 AM'); // server time is echoed here
var clientTime = new Date();
var offset = serverTime-clientTime;
console.log(serverTime,clientTime,offset)
function CountDownTimer(dt, id) {
var end = new Date(dt);
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;
function showRemaining() {
var now = new Date();
var distance = end - (now-offset);
var $el = $("#" + id);
if (distance < 0) {
clearInterval(timer);
$el.text("EXPIRED!");
return;
}
var days = Math.floor(distance / _day);
var hours = Math.floor((distance % _day) / _hour);
var minutes = Math.floor((distance % _hour) / _minute);
var seconds = Math.floor((distance % _minute) / _second);
$el.text(days + 'days ' + hours + 'hrs ' + minutes + 'mins ' + seconds + 'secs');
}
timer = setInterval(showRemaining, 1000);
}
I'm not sure how to change the font,the size, and the color of the words on this.
<script type="text/javascript">
var end = new Date('02/19/2012 10:1 AM');
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;
function showRemaining() {
var now = new Date();
var distance = end - now;
if (distance < 0) {
clearInterval(timer);
document.getElementById('countdown').innerHTML = 'EXPIRED!';
return;
}
var days = Math.floor(distance / _day);
var hours = Math.floor((distance % _day) / _hour);
var minutes = Math.floor((distance % _hour) / _minute);
var seconds = Math.floor((distance % _minute) / _second);
document.getElementById('countdown').innerHTML = days + 'days ';
document.getElementById('countdown').innerHTML += hours + 'hrs ';
document.getElementById('countdown').innerHTML += minutes + 'mins ';
document.getElementById('countdown').innerHTML += seconds + 'secs';
}
timer = setInterval(showRemaining, 1000);
</script>
<div id="countdown"></div>
Try this sample:
Just add a new line to your code:
document.getElementById('countdown').style.cssText = 'color: green; font-size: 40px;';
It will help you to define any style you want.
var end = new Date('02/19/2017 10:1 AM');
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;
function showRemaining() {
var now = new Date();
var distance = end - now;
if (distance < 0) {
clearInterval(timer);
document.getElementById('countdown').innerHTML = 'EXPIRED!';
return;
}
var days = Math.floor(distance / _day);
var hours = Math.floor((distance % _day) / _hour);
var minutes = Math.floor((distance % _hour) / _minute);
var seconds = Math.floor((distance % _minute) / _second);
document.getElementById('countdown').style.cssText = 'color: green; font-size: 40px;';
document.getElementById('countdown').innerHTML = days + ' days ';
document.getElementById('countdown').innerHTML += hours + ' hrs ';
document.getElementById('countdown').innerHTML += minutes + ' mins ';
document.getElementById('countdown').innerHTML += seconds + ' secs';
}
timer = setInterval(showRemaining, 1000);
<span id="countdown"></span>
As noticed #andlrc, you can do It without JavaScript. Use CSS styles. Add a new style to your html page
<style type="text/css">
#countdown {
color: green;
font-size: 40px;
}
</style>
<span id="countdown"></span>
I want to display a countdown at the top of my page in my asp.net mvc site and I have been trying to create this using javascript, however the countdown is not displaying on my page and I don't understand why. Any help would be greatly appreciated thanks!
This is my view and my script
#model Site.ViewModels.SummaryVm
<head>
<title>Order Summary</title>
</head>
<header>
<h2> Here is your order summary, please review before proceeding with payment. Please complete this transaction within 15 minutes or your order will be cancelled.</h2>
</header>
<div class="float-left">
<h2 id="countdown"></h2>
</div>
<script type="text/javascript">
var dt = '#ViewBag.CountDown_Time';
var dateAr = dt.split('-');
var newDate = dateAr[1] + '/' + dateAr[0] + '/' + dateAr[2];
var end = new Date(dateAr[1] + '/' + dateAr[0] + '/' + dateAr[2]);
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;
function showRemaining() {
var now = new Date();
var distance = end - now;
if (distance < 0) {
clearInterval(timer);
document.getElementById('countdown').innerHTML = 'EXPIRED!';
var eventID = 'eventID='+#Model.eventID;
var orderID = 'orderID='+#Model.orderID;
var quantity = 'quantity='+#Model.ticketQuantity;
var days = Math.floor(distance / _day);
var hours = Math.floor((distance % _day) / _hour);
var minutes = Math.floor((distance % _hour) / _minute);
var seconds = Math.floor((distance % _minute) / _second);
document.getElementById('countdown').innerHTML = hours + 'hrs ';
document.getElementById('countdown').innerHTML += minutes + 'mins ';
document.getElementById('countdown').innerHTML += seconds + 'secs';
}
timer = setInterval(showRemaining, 1000);
}
</script>
This is my Controller method
public ActionResult CreateOrder(OrderVm orderVm)
{
//code removed form brevity
if (Session["CountDown_Time"] == null)
{
Session["CountDown_Time"] = DateTime.Now.AddMinutes(15).ToString("dd-MM-yyyy h:mm:ss tt");
}
ViewBag.CountDown_Time = Session["CountDown_Time"];
return View("OrderSummary", summaryVm);
}
showRemaining is not called, you want to start the interval outside of the method itself, like this:
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;
function showRemaining() {
var now = new Date();
var distance = end - now;
if (distance < 0) {
clearInterval(timer);
document.getElementById('countdown').innerHTML = 'EXPIRED!';
} else {
var eventID = 'eventID='+#Model.eventID;
var orderID = 'orderID='+#Model.orderID;
var quantity = 'quantity='+#Model.ticketQuantity;
var days = Math.floor(distance / _day);
var hours = Math.floor((distance % _day) / _hour);
var minutes = Math.floor((distance % _hour) / _minute);
var seconds = Math.floor((distance % _minute) / _second);
document.getElementById('countdown').innerHTML = hours + 'hrs ';
document.getElementById('countdown').innerHTML += minutes + 'mins ';
document.getElementById('countdown').innerHTML += seconds + 'secs';
}
}
timer = setInterval(showRemaining, 1000);
I am using the code below to countdown to a date and time. The output is shown as<div id="countdown">203days 20hrs 44mins 31secs</div>. I've want to wrap the numbers in <span class="num"> and the labels in <span class="label">. I've managed to do the labels, but I have no idea where to do the numbers. Any help?
<script>
var end = new Date('08/30/2015 03:00 PM');
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;
function showRemaining() {
var now = new Date();
var distance = end - now;
if (distance < 0) {
clearInterval(timer);
document.getElementById('countdown').innerHTML = 'AWWWWW SHIT!';
return;
}
var days = Math.floor(distance / _day);
var hours = Math.floor((distance % _day) / _hour);
var minutes = Math.floor((distance % _hour) / _minute);
var seconds = Math.floor((distance % _minute) / _second);
document.getElementById('countdown').innerHTML = days + '<span class="label">days</span>';
document.getElementById('countdown').innerHTML += hours + '<span class="label">hrs</span>';
document.getElementById('countdown').innerHTML += minutes + '<span class="label">mins</span>';
document.getElementById('countdown').innerHTML += seconds + '<span class="label">secs</span>';
}
timer = setInterval(showRemaining, 1000);
</script>
<div id="countdown"></div>
I want to countdown to specific date, but I dont want to display years, months, days, minutes and seconds, but only hours. I have following code:
<script type="text/javascript">
var end = new Date('02/5/2014 10:1 AM');
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;
function showRemaining() {
var now = new Date();
var distance = end - now;
if (distance < 0) {
clearInterval(timer);
document.getElementById('countdown').innerHTML = 'EXPIRED!';
return;
}
var days = Math.floor(distance / _day);
var hours = Math.floor((distance % _day) / _hour);
// var minutes = Math.floor((distance % _hour) / _minute);
// var seconds = Math.floor((distance % _minute) / _second);
document.getElementById('countdown').innerHTML = days + 'days ';
document.getElementById('countdown').innerHTML += hours + 'hrs ';
// document.getElementById('countdown').innerHTML += minutes + 'mins ';
// document.getElementById('countdown').innerHTML += seconds + 'secs';
}
timer = setInterval(showRemaining, 1000);
</script>
When I comment out minutes and seconds It will display days and hours. When I comment out days it will display something like this: 14hrs14hrs14hrs14hrs14hrs14hrs14hrs and so on.
How can I display only hours?
thank you
It happens because you are concatenating it over gain each time. Just remove the + operator:
document.getElementById('countdown').innerHTML += hours + 'hrs ';
to
document.getElementById('countdown').innerHTML = hours + 'hrs ';
A little time more on this and you could achieve it by yourself.