I have a countdown timer in an inline JS element.
As of now they are all in one line, I would like days/hours/mins/secs to appear under each number, as shown here: http://prnt.sc/b8le72 - also, is it possible to style the text and numbers individually in CSS? (like making the text orange but keep numbers white)
https://jsfiddle.net/eyd8fd4x/
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>onepageskiw</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="js.js"></script>
</head>
<body>
<div id="forsidediv">
<img id="forsidepic" src="forsidepic.png">
</div>
<div id="countdowner">
<div id="countdown"></div>
</div>
<script>
CountDownTimer('06/25/2016 10: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 = '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 + ' dage ';
document.getElementById(id).innerHTML += hours + ' timer ';
document.getElementById(id).innerHTML += minutes + ' minutter ';
document.getElementById(id).innerHTML += seconds + ' sekunder';
}
timer = setInterval(showRemaining, 1000);
}
</script>
</body>
</html>
CSS:
#charset "utf-8";
body {
margin:0;
}
#countdowner {
color:white;
position:absolute;
margin:0;
margin-top:5em;
padding:0;
text-align:center;
width:100%;
font-size:1em;
font-family:Helvetica;
}
#forsidediv {
position:fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
text-align: center;
}
#forsidepic {
width: 100%;
}
Approach #1: Involving no change to the current div layout:
Use nbsp or such equivalent whitespace characters to pad the text. This is pure hard coding of the text content and shall break for many situations.
Working fiddle here.
Approach #2: Splitting the current div (that holds the whole data) into four separate divs - one each for days, hours, etc.
Ensure these fours divs are laid out "side-by-side" rather than "one above another". The easiest approach I am aware of for solving this 'side-by-side' problem is the old school table layout. So, put all the divs in a single <tr> of the table, to render them as a single row. That'll do the trick.
Also, I found this answer helpful, although I could not get it to work here.
Working fiddle with the table layout here.
Working fiddle with the table layout and color formatting :
Used the answer here for guidance:
span in JS: here
span in the HTML: here
My working suggestion which also pads the numbers and handles plural day/days hour/hours in Danish
CountDownTimer('06/25/2016 10:00 AM', 'countdown');
function pad(num) {
return String("0" + num).slice(-2);
}
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;
document.getElementById(id).innerHTML = '<div class="tm" id="' + id + 'days"></div>' +
'<div class="tm" id="' + id + 'hours"></div>' +
'<div class="tm" id="' + id + 'mins"></div>' +
'<div class="tm" id="' + id + 'secs"></div>';
function showRemaining() {
var now = new Date();
var distance = end - now;
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 + "days").innerHTML = days + '<br/>dag' + (days == 1 ? "" : "e");
document.getElementById(id + "hours").innerHTML = pad(hours) + '<br/>time' + (hours == 1 ? "" : "r");
document.getElementById(id + "mins").innerHTML = pad(minutes) + '<br/> minut' + (minutes == 1 ? "" : "ter");
document.getElementById(id + "secs").innerHTML = pad(seconds) + '<br/>sekund' + (seconds == 1 ? "" : "er");
}
timer = setInterval(showRemaining, 1000);
}
#charset "utf-8";
body {
margin: 0;
}
#countdowner {
color: red;
position: absolute;
margin: 0;
margin-top: 5em;
padding: 0;
text-align: center;
width: 100%;
font-size: 1em;
font-family: Helvetica;
}
#forsidediv {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
text-align: center;
}
#forsidepic {
width: 100%;
}
#countdown {
width: 100%
}
.tm {
text-align: center;
display: inline-block;
padding-left: 20px
}
<div id="forsidediv">
<img id="forsidepic" src="forsidepic.png">
</div>
<div id="countdowner">
<div id="countdown"></div>
</div>
Related
I made this countdown timer to show a video after it reaches the end. However it just goes into negative numbers. Seems to be related to the part of the code to hide the content after expiry date. Here is a JS fiddle
<div id="countdown"></div>
<div id="playsession"></div>
<script>
var releaseDate = new Date('05/29/2021 9:00 UTC+1');
var expiryDate = new Date('10/11/2021 01:00AM UTC+1');
var cdNotice = 'This session will appear automatically when the countdown finishes';
var trDay = ' Days';
var trHours = ' Hours';
var trMin = ' Minutes';
var trSec = ' Seconds';
var media = "<div class=\"wistia_responsive_padding\" style=\"padding:56.25% 0 0 0;position:relative;\"><div class=\"wistia_responsive_wrapper\" style=\"height:100%;left:0;position:absolute;top:0;width:100%;\"><iframe src=\"https:\/\/fast.wistia.net\/embed\/iframe\/eiwj630vxa?videoFoam=true\" title=\"June 19 & 20 ~ Refresh & Revive ~ Gen Rabten ~ 1 Video\" allow=\"autoplay; fullscreen\" allowtransparency=\"true\" frameborder=\"0\" scrolling=\"no\" class=\"wistia_embed\" name=\"wistia_embed\" allowfullscreen msallowfullscreen width=\"100%\" height=\"100%\"><\/iframe><\/div><\/div>\r\n<script src=\"https:\/\/fast.wistia.net\/assets\/external\/E-v1.js\" async><\/script>";
</script>
Above I set the start time and expiry time.
If the person loads the page before the countdown ends it should show the countdown. If the person loads after the countdown it will show the video.
If the person loads the page after the expiry time it should show the expired message.
Timer
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').innerHTML = "";
document.getElementById('playsession').innerHTML = media;
return;
}
if (gone < 0) {
clearInterval(timer);
document.getElementById('playsession').innerHTML = '<p>This video has now expired</p>';
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 = '<p>' + cdNotice + '</p>';
document.getElementById('countdown').innerHTML += '<p>';
if (days > 0) {
document.getElementById('countdown').innerHTML += '<b>' + days + trDay + '</b> ';
}
if (hours > 0) {
document.getElementById('countdown').innerHTML += '<b>' + hours + trHours + '</b> ';
}
if (minutes > 0) {
document.getElementById('countdown').innerHTML += '<b>' + minutes + trMin + '</b> ';
}
document.getElementById('countdown').innerHTML += '<b>' + seconds + trSec +'</b>';
document.getElementById('countdown').innerHTML += '</p>';
}
timer = setInterval(showRemaining, 1000);
Your expire date is incorrect, add space before AM, then it will work, otherwise your condition is not met, because gone = NaN.
With this it works correctly:
var expiryDate = new Date('10/11/2021 01:00 AM UTC+1')
when i use the script at 00:53, countdown shows latest 07:00 min. when the time is up, countdown timer loops 59:59 every hour. how can i do this ? I also need when the time is up, refreshes the page auto
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.timer {
text-align: center;
font-size: 60px;
margin-top: 0px;
color: white;
background-color: rgb(100, 38, 214);
}
</style>
</head>
<body>
<h1 style="text-align: center;">Countdown Timer Example</h1>
<h2 class="timer"></h2>
<script>
var countDownDate = new Date("<?php echo strtotime('+1 hour',time()); ?>").getTime();
var timeClear = setInterval(function() {
var now = new Date("<?php echo time(); ?>").getTime();
var timeLeft = countDownDate - now;
var days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
var hours = Math.floor(
(timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
);
var minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
document.querySelector(".timer").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
if (timeLeft < 0) {
clearInterval(timeClear);
document.querySelector(".timer").innerHTML = "Done";
}
}, 1000);
</script>
</body>
</html>
i have tried moment.js and maybe find the answer. how can i setup this to connect mysql with ajax ?
<script>
setInterval(function(){
const timeString = moment.utc(moment().endOf('hour').diff()).format('HH:mm:ss')
document.getElementById('timer').innerHTML = timeString;
}, 1000);
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<div id="timer"></div>
i have tried another way at first make php date to json format
timer.php
`<?php
include('config.php');
$date=date('Y/m/d H:i:s');
print json_encode ($date);
?>`
then
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script>
var serverdate;
$.get('localhost/test/timer.php', function(data){
serverDate = data.date; });
setInterval(function(){
const data.date = moment.utc(moment().endOf('hour').diff()).format('HH:mm:ss')
document.getElementById('timer').innerHTML = data.date;
}, 1000);
</script>
</head>
<body>
<div id="timer"></div>
</body>
</html>
i m so sorry for lack of my javascript =(
function refresh() {
var currentDay = new Date();
var breakStart = new Date(2017, 3, 21, 15, 20);
var breakEnd = new Date(2017, 4, 1, 8, 40);
var diff = (breakStart.getTime() - currentDay.getTime()) / 1000;
var diff2 = (breakEnd.getTime() - currentDay.getTime()) / 1000;
dayz = Math.floor(diff2 / 86400)
diff2 %= 86400;
hourz = Math.floor(diff2 / 3600)
diff2 %= 3600;
minutez = Math.floor(diff2 / 60)
diff2 %= 60;
secondz = Math.floor(diff2 / 1)
diff2 %= 1;
days = Math.floor(diff / 86400)
diff %= 86400;
hours = Math.floor(diff / 3600)
diff %= 3600;
minutes = Math.floor(diff / 60)
diff %= 60;
seconds = Math.floor(diff / 1)
diff %= 1;
if (days == 1) {
document.getElementById("final").innerHTML = ("There is " + days + " day, " + hours + " hours, " + minutes + " minutes, and " + seconds + " seconds left until spring break.");
}
if (days > 1) {
document.getElementById("final").innerHTML = ("There are " + days + " days, " + hours + " hours, " + minutes + " minutes, and " + seconds + " seconds left until spring break.");
}
if (days == 0) {
document.getElementById("final").innerHTML = ("There are " + days + " days, " + hours + " hours, " + minutes + " minutes, and " + seconds + " seconds left until spring break.");
}
if (dayz > 1 && dayz < 9) {
document.getElementById("final").innerHTML = ("We are in break! Hooray! There are " + dayz + " days, " + hourz + " hours, " + minutez + " minutes, and " + secondz + " seconds left in spring break");
}
}
setInterval(refresh, 1000);
<style> #import url('https://fonts.googleapis.com/css?family=Raleway:300');
p {
font-family: 'Raleway', sans-serif;
font-size: 400%;
color: ;
}
</style>
<!DOCTYPEhtml>
<embed src="Chamelion.mp3" autostart="true" loop="true" width="2" height="0">
<center>
<p>SPRING BREAK:</p>
</center>
<center>
<p id="final"></p>
</center>
Hello,
This program I wrote calculates the amount of time it is until spring break. I put the below line of code my html but this does not seem to work to link to my js file. On the code snippet here it works, but i'm trying to use an external script.
Sorry for the big block of code. Anything helps!
Seb
EDIT:
The code as it is in my editor:
<embed src="Chamelion.mp3" autostart="true" loop="true"
width="2" height="0">
</embed>
<script src="spring.js" type="text/javascript"></script>
<style>
#import url('https://fonts.googleapis.com/css?family=Raleway:300');
p{
font-family: 'Raleway', sans-serif;
font-size: 400%;
color: ;
}
</style>
<center><p>SPRING BREAK:</p></center>
<center><p id="final"></p></center>
<center><img src="bunny.jpg" width="300"></center>
the problems seems to be that you've loaded the script before the targeted final exists in document object model.
place the code below as the last line of the <body> element:
<body>
...
...
...
<script src="spring.js" type="text/javascript"></script>
</body>
Place the line at the end just before the tag
...
<script src="spring.js" type="text/javascript"></script>
</body>
</html>
Im coding(copied) this countdown clock to july first.
With .foo class i managed to make the clock color red and font size 50px but how can i make a seperate border for each days,hours,minutes,seconds?
This is one of my first codes so explain it simple please.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="StyleSheet.css">
<style>
h1{color:brown;
}
p
{font-size:50px;
color:lightcoral;
}
.foo{color:red;
font-size:50px;
}
</style>
</head>
<body style="background-color:cyan" "text-align:center">
<h1> </h1>
<h2> </h2>
<div id="clockdiv" class="foo">
Days:<span class="days"></span><br>
Hours: <span class="hours"></span><br>
Minutes: <span class="minutes"></span><br>
Seconds: <span class="seconds"></span>
</div>
<script>
var deadline = '7/1/2017';
initializeClock('clockdiv', deadline);
function getTimeRemaining(endtime){
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor( (t/1000) % 60 );
var minutes = Math.floor( (t/1000/60) % 60 );
var hours = Math.floor( (t/(1000*60*60)) % 24 );
var days = Math.floor( t/(1000*60*60*24) );
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function initializeClock(id, endtime){
var clock = document.getElementById(id);
var daysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');
var timeinterval = setInterval(function(){
var t = getTimeRemaining(endtime);
clock.innerHTML = 'days: ' + t.days + '<br>' +
'hours: '+ t.hours + '<br>' +
'minutes: ' + t.minutes + '<br>' +
'seconds: ' + ('0' + t.seconds).slice(-2);
if(t.total<=0){
clearInterval(timeinterval);
}
},1000);
}
</script>
</body>
</html>
assign css to your classes (days / hours / mins )etc
.days .hours .minutes .seconds {
border-style: solid;
border-width: 5px;
}
if you wanted different elements to have different styles then separate them
.days {
border-style: solid;
border-width: 5px;
}
.hours {
border-style: solid;
border-width: 10px;
}
for example.
ref: http://www.w3schools.com/CSSref/pr_border.asp
Whole file below - added an extra break between the elements to further separate them - just remove if you don't want - lines 63/64/65
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="StyleSheet.css">
<style>
h1{color:brown;
}
p
{font-size:50px;
color:lightcoral;
}
.foo{color:red;
font-size:50px;
}
.days, .hours, .minutes, .seconds {
border-style: solid !important;
border-width: 5px !important;
}
</style>
</head>
<body style="background-color:cyan" "text-align:center">
<h1> </h1>
<h2> </h2>
<div id="clockdiv" class="foo">
<span class="days"> Days:</span><br>
Hours: <span class="hours"></span><br>
Minutes: <span class="minutes"></span><br>
Seconds: <span class="seconds"></span>
</div>
<script>
var deadline = '7/1/2017';
initializeClock('clockdiv', deadline);
function getTimeRemaining(endtime){
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor( (t/1000) % 60 );
var minutes = Math.floor( (t/1000/60) % 60 );
var hours = Math.floor( (t/(1000*60*60)) % 24 );
var Days = Math.floor( t/(1000*60*60*24) );
return {
'total': t,
'Days': Days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function initializeClock(id, endtime){
var clock = document.getElementById(id);
var DaysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');
var timeinterval = setInterval(function(){
var t = getTimeRemaining(endtime);
clock.innerHTML = '<span class="days">Days: ' + t.Days + '</span><br /><br />' +
'<span class="hours">hours: '+ t.hours + '</span><br /><br />' +
'<span class="minutes">minutes: ' + t.minutes + '</span><br /><br />' +
'<span class="seconds">seconds: ' + ('0' + t.seconds).slice(-2);
if(t.total<=0){
clearInterval(timeinterval);
}
},1000);
}
</script>
</body>
</html>
The issue was that the JS was over laying the html, so we had to add the class into the JS - that way when it over laid the html, it did so with the classes intact, which then picked up styling from the css
https://jsfiddle.net/mrnf4q7g/
I've been trying to set this fiddle onto two lines such as:
123 20 13 03
Days Hours Min sec
I've tried using br and \n but it tends to staircase down the page.
Are you looking something like that?
If you need any improvements to this answer just comment.
CountDownTimer('October 21, 2015 19:00:00', 'countdown');
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 = '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 = '<div class="FL M5">' + days + '<br> days </div>';
document.getElementById(id).innerHTML += '<div class="FL M5">' + hours + '<br> hours </div>';
document.getElementById(id).innerHTML += '<div class="FL M5">' + minutes + '<br> mins ';
document.getElementById(id).innerHTML += '<div class="FL M5">' + seconds + '<br> secs </div>';
};
timer = setInterval(showRemaining, 1000);
}
body {
padding: 50px;
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}
a {
color: #00B7FF;
}
.FL{
float:left;
}
.CB{
clear:both;
}
.M5{
margin:5px;
}
<div id="countdown"></div>
Did this help?
As xwhtLikeThis said you can use a table like this:
<table>
<tr>
<td>123</td>
<td>20</td>
<td>13</td>
<td>03</td>
</tr>
<tr>
<td>Days</td>
<td>Hours</td>
<td>Min</td>
<td>Sec</td>
</tr>
</table>
I don't have time to write a fiddle for you but here's my suggestion. Write out your html with zero javascript, then take that HTML as a template and write a function like this:
function updateTime(days, hours, min, sec) {
var html = "
<div class='row'>
<div id='days'>"+days+"</div>
<div id='hours'>"+hours+"</div>
..etc
</div>
";
document.getElementById(id).innerHTML = html;
}
Easier to look at and style in my opinion, maybe even try https://mustache.github.io/
Create four separate elements within your #countdown element
<div id="countdown">
<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>
Then set those elements to display: inline-block
.sect {
display: inline-block;
}
Then set each element's innerHTML separately and include a line-break
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';
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 = 'EXPIRED!';
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);
}
body {
padding: 50px;
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}
a {
color: #00B7FF;
}
.sect {
display: inline-block;
}
<div id="countdown">
<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>