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.
Related
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 m working on online examination i just wnat to start timer at exam start and want to end as exam finish i hv endtime on my cotroller and i m passing that endtime on view i want to start timer between system time and end time
Controller
public ActionResult TestStarted(int TestId,DateTime End_Time)
{
ViewBag.ct = 0;
ViewBag.TestId = TestId;
EAssessmentNew.BAL.StudentBal studBal = new EAssessmentNew.BAL.StudentBal();
EAssessmentNew.Dal.Student_Answer_Master _studAnsdal = new EAssessmentNew.Dal.Student_Answer_Master();
ViewBag.EndTime = End_Time;
}
View
<script type="text/javascript">
var days, hours, minutes, seconds;
var countdown = document.getElementById("lblCtime");
setInterval(function () {
var current_date = new Date().getTime();
var seconds_left = ( #ViewBag.EndTime - current_date) / 1000;
days = parseInt(seconds_left / 86400);
seconds_left = seconds_left % 86400;
hours = parseInt(seconds_left / 3600);
seconds_left = seconds_left % 3600;
minutes = parseInt(seconds_left / 60);
seconds = parseInt(seconds_left % 60);
countdown.innerHTML = days + "d, " + hours + "h, "
+ minutes + "m, " + seconds + "s";
}, 1000);
</script>
Suppose i have EndTime 1:00 PM and System Time 12:00 PM how can i start timer betwwen these two times as i want to convert my EndTime 1:00 PM into milliseconds as current date in my script returns me time in milliseconds.
What you need to do is whenever the user click on the Give Exam add the time to the Duration of exam that you are going to give him (i.e Exam Start Time 1PM and you are giving user to 1 Hour of Time to Complete the Exam then you need to pass the date with the time 1PM + 1 HOUR More so it will count from that datetime to finish the exam) and pass this as End date with this function
<script>
var end = new Date('08/14/2014 12: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 = '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>
The end date will automatically count based on the server datetime and you need not to worry about the local time.
DEMO1
DEMO2
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.