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
Related
I would like to change the colour of the text displayed to white, however, I have no idea how to go about this, could anyone be so kind to assist me?
Code:
<!-- Display the countdown timer in an element -->
<p id="demo"></p>
<script>
// Set the date we're counting down to
var countDownDate = new Date("Sep 22, 2017 15:37:25").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 an 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);
// Display the result in the element with id="demo"
document.getElementById("demo").innerHTML = days + "Days " + hours + "Hours "
+ minutes + "Minutes " + seconds + "Seconds ";
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
</script>
PS I'm a noob and this code is from W3.
CSS Styles Using JavaScript
Every HTML element that you access via JavaScript has a style object. This object allows you to specify a CSS property and set its value.
document.getElementById("p2").style.color = "blue";
There are some ways to do this but the simpliest one is just setting one CSS inline parameter. Like this:
<p id="demo" style="color: white;"></p>
And that makes the magic. :)
Definitly check this -> https://www.w3schools.com/css/default.asp
I am trying to display a full screen image after a jQuery countdown timer has finished but I am confused how to do this within my jQuery/css/html scripts
My jQuery code is as follows:
//Sets the date and time the clock is counting down to
var countDownDate = new Date("August 23, 2017 17:43:00").getTime();
//Updates the counter every second
var x = setInterval(function() {
//Get today's date and time
var now = new Date().getTime();
// Finding the length of time between now and 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 an 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 = " you've been screwed over by Theresa May";
function myFunction() {
var m = document.getElementsByClassName("image");
m[0].innerHTML = "image";
}
}
}, 1000);
My HTML is as follows:
<!DOCTYPE HTML>
<html>
<head>
<title>Brexit Countdown 2</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href ="Brexit2.css" rel="stylesheet" type="text/css"/>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script>
<script src="Brexit2.js"></script>
</head>
<body>
<h1>Brexit Countdown</h1>
<p id="demo"></p>
</body>
</html>
My CSS is as follows-
p {
text-align: center;
font-size: 80px;
}
h1 {
text-align: center;
font-size: 200px;
}
As mentioned at the beginning I simply want to display an image along with a statement after the countdown finally finishes. I really would appreciate some help here. Many thanks.
//Consider this function to display the image and the <p>
function myFunction() {
document.getElementById("displayImage").style="display:block";
}
//This calls the myFunction() in the set time.
setInterval(myFunction, 5000);
//5000 is in milliseconds, which is 5 seconds.
<div id="displayImage" style="display:none">
<img src="https://www.google.co.in/images/branding/googleg/1x/googleg_standard_color_128dp.png">
<p>Assume that this is the image you wanna display...</p>
</div>
Please use this JSFiddle as reference. Please set the countDownDate to a future time, else it wont work.
Demo: here
Code:
//Sets the date and time the clock is counting down to
var countDownDate = new Date("August 23, 2017 23:29:00").getTime();
//Updates the counter every second
var x = setInterval(function() {
//Get today's date and time
var now = new Date().getTime();
// Finding the length of time between now and 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 an 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 = " you've been screwed over <br> by Theresa May";
var m = document.getElementsByClassName("image");
m[0].src = "https://upload.wikimedia.org/wikipedia/commons/7/79/Operation_Upshot-Knothole_-_Badger_001.jpg";
}
}, 1000);
A common way is to add the image to the html, but to hide it using a css class.
HTML:
<img id="hiddenImage" class="hiddenClass" src="someSource.jpg">
CSS:
.hiddenClass {
display: none;
}
Then, using jQuery or vanilla JS, you either change the CSS class to something else, or to remove the class.
jQuery:
// find by id, the jQuery way
var image = $('#hiddenImage');
// remove the class that was hiding the image before
// this will make it visible by default
image.removeClass('hiddenClass');
JsFiddle Demo: https://jsfiddle.net/jonahe/rxprv1c0/
I need to restart my countdown timer every next friday, i cant seem to get it done. this is my code
this is my fiddle
https://jsfiddle.net/9L7f5s6u/
var countDownDate = new Date("Mar 10, 2017 17:00:00").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24)).toString();
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)).toString();
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)).toString();
var seconds = Math.floor((distance % (1000 * 60)) / 1000).toString();
document.getElementById("circle-days").innerHTML = days + "<div class='timer-font'>Días</div>";
document.getElementById("circle-hours").innerHTML = hours + "<div class='timer-font'>Hrs</div>";
document.getElementById("circle-minutes").innerHTML = minutes + "<div class='timer-font'>Min</div>";
document.getElementById("circle-seconds").innerHTML = seconds + "<div class='timer-font'>Seg</div>";
if (distance < 0) {
clearInterval(x);
document.getElementById("timer").innerHTML = "EXPIRED";
}
}, 1000);
<span style="margin-right: 10px;">
<span id="circle-days" class="circle-time"></span>
</span>
<span style="margin-right: 10px;">
<span id="circle-hours" class="circle-time"></span>
</span>
<span style="margin-right: 10px;">
<span id="circle-minutes" class="circle-time"></span>
</span>
<span id="circle-seconds" class="circle-time"></span>
<span id="timer"></span>
See https://jsfiddle.net/9L7f5s6u/2/ using a function that returns the next day of week (in this case 5/Friday and 17 as hour)
function getNextDayOfWeek(date, dayOfWeek, hour) {
var resultDate = new Date(date.getTime());
resultDate.setDate(date.getDate() + (7 + dayOfWeek - date.getDay()) % 7);
resultDate.setHours(hour,0,0,0);
return resultDate;
}
Code based from https://codereview.stackexchange.com/questions/33527/find-next-occurring-friday-or-any-dayofweek adding a start hour.
You could go over the top and use something like MomentJS and add a week to your countDownDate.
Or you can do something like
countDownDate = new Date(countDownDate.valueOf() + 604800000);
All this snippet does is gets the time in ms from 1/1/1970 and adds 1 week in ms to that time and creates a new date object one week ahead of the countDownDate.
This is all assuming that countDownDate is a Friday.
As for resetting the timer, I believe that the code shouldn't be too hard to continue from there
I'll do something like this https://jsfiddle.net/hdLz5rux/
countDownDate.setDate(countDownDate.getDate() + 7);
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.
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>