I have a working countdown timer "days, hours, minutes, seconds" and I need to change the color of the seconds "var" from white to yellow while the other var's will keep the white color.
The problem is that the whole countdown date is being placed on a single div and I cannot add a specific class or a span to the "seconds" variable.
I tried many different solutions but none seems to work in this case so I decided to ask for help and make a Question.
The HTML.
<div class="container">
<div id="countdown" align="center"> <!-- The countdown is being displayed here -->
</div>
</div>
The JS.
CountDownTimer('06/01/2016 06:00 AM', 'countdown');
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;
if (distance < 0) {
clearInterval(timer);
document.getElementById(id).innerHTML = 'end';
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 + ' ';
document.getElementById('countdown').innerHTML += hours + ' ';
document.getElementById('countdown').innerHTML += minutes + ' ';
document.getElementById('countdown').innerHTML += seconds + ' ';
}
timer = setInterval(showRemaining, 1000);
}
Working JS FIDDLE here where you can see for yourself:
https://jsfiddle.net/baqc6nx2/1/
And here is the image explaining how the seconds var should be colored yellow and the others white.
Sorry for my bad English, and thank you for your time.
EDIT:---------------------------------------------------------------
This is not a duplicate, I know the last child selectors, but in this case it wont work, I tried.
Edit-----------------------------------------------------------------
TGO Helped me and now it is working, please reopen the question so I can complete it.
Here is an updated fiddle which solves your problem. http://jsfiddle.net/baqc6nx2/2
For convenience, this is the changed line of code:
document.getElementById('countdown').innerHTML += '<span style="color:yellow;">' + seconds + '</span> ';
Here I create a span tag, give it the proper CSS style to turn the color yellow, and the seconds value is put inside the span element.
Related
I'm a graphic designer who has also been tasked with building a website for the church that I work for. I've built many websites in the past, so this isn't an issue at all, however, something that I'm looking to do with this site is to have as many elements that can just simply run on their own as possible. I'm a complete beginner when it comes to JavaScript, and honestly don't really have an idea at all about what I'm doing.
I'd like for the new site to have a custom countdown timer that will count down to when we go live, and then display a link for our live stream for a set period of time, and then reset. The code below shows what I've already managed to write from just searching around on the internet. The problem with it is that it relies on a person (which half of the time is a web-volunteer) to remember to change the date and time to the next service after the current service is finished, and 90% of the time they forget.
In a perfect world, I'd like for this countdown timer to automatically countdown to the nearest Tuesday at 6:00 pm, then show a link to our live stream for 20 minutes, then reset. Or if Sunday at 10:00 am comes first, countdown to Sunday at 10am, then show a link to our live stream for one hour and 15 minutes, and then reset. Theoretically I would imagine this could run indefinitely as it would just check for if Tuesday at 6pm comes first, or if Sunday at 10am comes first, then countdown to those times, pause, show some hyperlinked text, and then repeat.
I apologize if this has already been talked about here, I tried searching as thoroughly as I could and couldn't find anything.
Any help at all would be greatly appreciated.
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p id="demo" class="countdown-live" style="text-align:center;"></p>
<script>
// Set the date we're counting down to
var countDownDate = new Date("October 20, 2020 18:00:00").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
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);
// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = days + " d " + hours + " h "
+ minutes + " m & " + seconds + " s";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = 'Watch Live!';
}
}, 1000);
</script>
</body>
</html>
This is a little delayed but here's something that works with a little maintenance.
(() => {
var currentDate = new Date();
currentDate = currentDate.toLocaleString("en-US", {
timeZone: "America/New_York"
});
// Service times
var serviceTEN = "2021/12/06 11:15";
var serviceTWELVE = "2021/12/06 13:45";
var serviceTWO = "2021/12/06 15:45";
var serviceFIVE = "2021/12/06 16:45";
var serviceSEVEN = "2021/12/06 19:45";
var waiting;
// Set current service
var currentService = serviceTEN;
function pad(num, size) {
var s = "0" + num;
return s.substr(s.length - size);
}
// Get the current time, set the correct timezone, and parse it to the same layout.
// Find the difference between the current date and the service time.
// Have that be the time remaining.
function getTimeRemaining(endtime) {
var now = new Date();
now = now.toLocaleString("en-US", {
timeZone: "America/New_York"
});
// Parse the date to find each variable (seconds, minutes, hours, days)
let t = Date.parse(endtime) - Date.parse(now);
let seconds = Math.floor((t / 1000) % 60);
let minutes = Math.floor((t / 1000 / 60) % 60);
let hours = Math.floor((t / (1000 * 60 * 60)) % 24);
let days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
total: t,
days: days,
hours: hours,
minutes: minutes,
seconds: seconds,
};
}
// the id refers to "js-clock" which is the beginning of the ID, this can be changed
function clock(id, endtime) {
let days = document.getElementById(id + "-days");
let hours = document.getElementById(id + "-hours");
let minutes = document.getElementById(id + "-minutes");
let seconds = document.getElementById(id + "-seconds");
let timeinterval = setInterval(function() {
let t = getTimeRemaining(endtime);
// Look through the service times and figure out which service it should be.
if (t.total <= 0) {
if (waiting === true) {
location.reload();
} else if (t.total < -300000) {
switch (endtime) {
case serviceTEN:
endtime = serviceTWELVE;
break;
case serviceTWELVE:
endtime = serviceTWO;
break;
case serviceTWO:
endtime = serviceFIVE;
break;
case serviceFIVE:
endtime = serviceSEVEN;
break;
default:
break;
}
} else {
clearInterval(timeinterval);
}
} else {
waiting = true;
// Edit the 2 or 3 to change amount of digits
days.innerHTML = pad(t.days, 3);
hours.innerHTML = pad(t.hours, 2);
minutes.innerHTML = pad(t.minutes, 2);
seconds.innerHTML = pad(t.seconds, 2);
}
}, 1000);
}
clock("js-clock", currentService);
})();
<div class="mainOverlayCountdown-k" id="mainOverlayCountdownID-k">
<h1 id="countdownHeader-k">Next service begins in:</h1>
<div class="countdown-cover">
<div id="js-clock" class="countdowntimer">
<div id="js-clock-days" class="clock-number">00</div>
<div class="clock-label">Days</div>
<div id="js-clock-hours" class="clock-number">00</div>
<div class="clock-label">Hrs</div>
<div id="js-clock-minutes" class="clock-number">00</div>
<div class="clock-label">Min</div>
<div id="js-clock-seconds" class="clock-number">00</div>
<div class="clock-label">Sec</div>
</div>
</div>
</div>
To change the service times, edit the service'TIME' Variables. You might have to play around with it to get the correct timezone.
to add/delete service times, but make sure you also add/delete it in the variables where you set the date, and the switch function.
Hope this helps!
I have a list of 10 divs that load at the same time. I need to apply a seperate timer to each one that will display a time frame based on ordered time minus current time. I can only get the timer to display in the first loaded div and none of the rest. Any ideas what I am doing wrong in my code?
here is the jQuery to load the list:
$('#orderList').append("<li id='listOrd'><div id='numDiv"+val.id+"' class='orderListBtn'><div class='orderListBtnTxt'><img id='myImage' onload='counter()' class='noImage' src='Images/NewOrderIcon.png'>"+" " +val.id+"<br> " +val.location+"<br> " +val.playername+"<br> " +val.items[0].itemticketname+" <br>" +val.totalprice+"<br> " +val.transtime+"<br> "+"<span id='r'></span></div></div></li>");
and below is the timer
<script type="text/javascript">chNum = "<?php include('aphpfile.php')?>";
function counter() {setInterval(function(){
var t = parseInt(chNum);
var now = new Date();
var timeDiff = now.getTime() - t;
var seconds = Math.floor(timeDiff / 1000);
var minutes = Math.floor(seconds / 60);
var hours = Math.floor(minutes / 60);
//var days = Math.floor(hours / 24);
hours %= 24;
minutes %= 60;
seconds %= 60;
r=document.getElementById('r');
r.textContent = hours + ':' + minutes +':'+ seconds;
}, 1000);
}
Here's a working fiddle:
https://jsfiddle.net/dhqnad9a/
HTML:
<div class="aligned-center">
<div id="countdown">
<h5>Campaign Ends:</h5>
<span class="sect" id="days"></span>
<span class="sect" id="hrs"></span>
<span class="sect" id="mins"></span>
<span class="sect" id="secs"></span>
</div>
</div>
JavaScript:
CountDownTimer('October 21, 2015 19:00:00', 'countdown');
var days = document.getElementById('days');
var hrs = document.getElementById('hrs');
var mins = document.getElementById('mins');
var secs = document.getElementById('secs');
function CountDownTimer(date, id) {
var end = new Date(date);
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;
var showRemaining = function() {
var now = new Date();
var distance = end - now;
if (distance < 0) {
clearInterval(timer);
document.getElementById(id).innerHTML = 'ENDED!';
return;
}
days.innerHTML = Math.floor(distance / _day) + '<br> days ';
hrs.innerHTML = Math.floor((distance % _day) / _hour) + '<br> hours ';
mins.innerHTML = Math.floor((distance % _hour) / _minute) + '<br> mins ';
secs.innerHTML = Math.floor((distance % _minute) / _second) + '<br> secs';
};
timer = setInterval(showRemaining, 1000);}
I want to add CSS styles (not sure if its possible thru JS) to the numbers, such that the font-size and weight are different from line 1 to line 2.
So far, I can only change both thru .sect class, do I need to rewrite the JS?
Here's what I'm hoping to do:
In your JavaScript, just wrap the text that needs to be changed individually with a DIV or SPAN, then change the CSS for that class. In other words, use this instead:
days.innerHTML = "<span class='big'>" + Math.floor(distance / _day) + '</span><br><span class="small">days</span>';
hrs.innerHTML = "<span class='big'>" + Math.floor((distance % _day) / _hour) + '</span><br><span class="small">hours</span>';
mins.innerHTML = "<span class='big'>" + Math.floor((distance % _hour) / _minute) + '</span><br><span class="small">mins</span>';
secs.innerHTML = "<span class='big'>" + Math.floor((distance % _minute) / _second) + '</span><br><span class="small">secs</span>';
And define the CSS for the new .big and .small classes:
.big{
font:bold 12pt Arial, sans-serif;
color:#777;
}
.small{
font:bold 8pt Arial, sans-serif;
}
Here are the changes: https://jsfiddle.net/vcsq40of/
Edit: Since I randomly received an upvote on this answer today, I thought I'd update it to include that the above Fiddle no longer has jQuery included (I assume the CDN where I pulled it from originally no longer has it available at that path), and that the date it is looking at has already passed (so it needs to be changed to a future date to work properly). If you want to see this demo, you can use that link, add jQuery, and change the date. Or you can use this new updated Fiddle: https://jsfiddle.net/vcsq40of/1/
I did something like this and it made them bigger for sure but i couldn't quite get the "thicker" look like it seems you wanted, but i like inline style changes for such a thing
<span class="sect" id="days" style="font-size:30px;font-weight:bold"></span>
<span class="sect" id="hrs" style="font-size:30px;font-weight:bold"></span>
<span class="sect" id="mins" style="font-size:30px;font-weight:bold"></span>
<span class="sect" id="secs" style="font-size:30px;font-weight:bold"></span>
just wrap the text that you want to have a different style with a span.
e.g.
days.innerHTML = Math.floor(distance / _day) + '<br> <span class="sect2">days</span> ';
notice the <span class="sect2">days</span> in the code above. now define the css you want in the .sect2 class and you're done.
here's a working JSFIDDLE
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.
What I'd like to accomplish is a countdown that updates live... like this:
6 Days (just the days)
12 Hours (just hours within 1 day)
59 Minutes (just minutes within 1 hour)
59 Seconds (just seconds within 1 minute)
Best way to accomplish this?
You can find a working example at http://jsfiddle.net/gaby/QH6X8/79/
var end = new Date('15 Dec 2010');
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 ) {
// handle expiry here..
clearInterval( timer ); // stop the timer from continuing ..
alert('Expired'); // alert a message that the timer has expired..
}
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 );
var countdownElement = document.getElementById('countdown');
countdownElement.innerHTML = 'Days: ' + days + '<br />';
countdownElement.innerHTML += 'Hours: ' + hours+ '<br />';
countdownElement.innerHTML += 'Minutes: ' + minutes+ '<br />';
countdownElement.innerHTML += 'Seconds: ' + seconds+ '<br />';
}
timer = setInterval(showRemaining, 1000);
jQuery Countdown plugin
here you can generate countdown timer if you like - just press generate and copy paste the results into .html file
http://www.ricocheting.com/code/javascript/html-generator/countdown-timer
Notable mention: http://www.littlewebthings.com/projects/countdown/
(probable irrelevant since you mentioned that you don't want to use a plugin)
The problem with the above accepted approach is that there will be issues here related to timezone differences and daylight saving time. See this question asked by me Javascript Countdown and Timezone and Daylight Saving Time Issues
jCounter offers control on what format you want your countdown to display among other control settings and methods.