Swapping JS elements in SPAN with Class for output - javascript

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>

Related

JS countdown script to jQuery

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);
}

Making a countdown clock

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>

Javascript count down time failing to display

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);

javascript countdown show only hours

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.

Javascript countdown with specific timezone [duplicate]

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.

Categories