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);
}
Related
I want to make this media player timer appear multiple times on the same page, with different variables settings, without reusing the same code.
This is my current timer looks like this...
<div id="countdown_1" class="count"></div>
<script>
var releaseDate = new Date('06/30/2020 10:30 PM UTC+1');
var expiryDate = new Date('07/20/2020 12:00 PM UTC+1');
var media = "<iframe width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/BBYzqI-fnHE\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>";
</script>
In timer.js
(function () {
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 = releaseDate - now;
var gone = expiryDate - now;
if (distance < 0 && gone > 0) {
clearInterval(timer);
document.getElementById('countdown_1').innerHTML = media;
return;
}
if (gone < 0) {
clearInterval(timer);
document.getElementById('countdown_1').innerHTML = 'This video has now 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_1').innerHTML ='Media player will appear automatically in:<br><br>';
document.getElementById('countdown_1').innerHTML += days + ' Days ';
document.getElementById('countdown_1').innerHTML += hours + ' Hours ';
document.getElementById('countdown_1').innerHTML += minutes + ' Minutes ';
document.getElementById('countdown_1').innerHTML += seconds + ' Seconds';
}
timer = setInterval(showRemaining, 1000);
}());
Here is the fiddle https://jsfiddle.net/agileapricot/zft6cohu/5
I believe I need to make the timer a named function with arguments?
(function MediaTimer(releaseDate,expiryDate,media) {
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;
But then how can I call it on the page with the variable types I need for the releaseDate, expiryDate and media code?
MediaTimer();
Any ideas?
You are on the right track with that. What i would do is name my timers with Ids that would be easy to concatenate like this :
<div id="countdown_1" class="count"></div>
<div id="countdown_2" class="count"></div>
<div id="countdown_3" class="count"></div>
then i would create an Array with all the Dates i need :
var dates = [{releaseDate: new Date(bla), expiracyDate : new Date(bla)},
{releaseDate: new Date(bla), expiracyDate : new Date(bla)},
{releaseDate: new Date(bla), expiracyDate : new Date(bla)}]
And then simply call the function MediaTimer() within a for loop and passing it an index:
for(var i = 0; i < dates.length; i++){
MediaTimer(i);
}
And finally, the mediaTimer function would look like this :
function MediaTimer(index) {
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;
function showRemaining() {
var elementId = 'countdown_' + (index+1);
var now = new Date();
var distance = dates[index].releaseDate - now;
var gone = dates[index].expiracyDate - now;
if (distance < 0 && gone > 0) {
clearInterval(timer);
document.getElementById(elementId).innerHTML = media;
//not sure what is media
return;
}
if (gone < 0) {
clearInterval(timer);
document.getElementById(elementId).innerHTML = 'This video has now 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(elementId).innerHTML ='Media player will appear automatically in:<br><br>';
document.getElementById(elementId).innerHTML += days + ' Days ';
document.getElementById(elementId).innerHTML += hours + ' Hours ';
document.getElementById(elementId).innerHTML += minutes + ' Minutes ';
document.getElementById(elementId).innerHTML += seconds + ' Seconds';
}
timer = setInterval(showRemaining, 1000);
};
This would allow you to have multiple timers with different dates, using the same function
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>
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.