I'm trying to add an intro animation to a timer using JS, but it seems to restart each time the function with a setinterval runs. The function updates the timer every second. This is my script:
function updateTimer(){
var target = Date.parse("9 January 2023, 00:00:00");
var today = new Date();
var diff = target - today;
var days = Math.floor(diff / (1000 * 60 * 60 * 24));
var hours = Math.floor(diff / (1000 * 60 * 60));
var mins = Math.floor(diff / (1000 * 60));
var secs = Math.floor(diff / 1000);
var days = days;
var hours = hours - days * 24;
var minutes = mins - hours * 60;
var seconds = secs - mins * 60;
document.getElementById("timer").innerHTML =
'<div>' + days + '<span> Days</span></div>' +
'<div>' + hours + '<span> Hours</span></div>' +
'<div>' + minutes + '<span> Minutes</span></div>' +
'<div>' + seconds + '<span> Seconds</span></div>';
}
setInterval('updateTimer()', 1000);
The script will show timer on the following HTML code:
<div id="timer">
<div><span>Days</span></div>
<div><span>Hours</span></div>
<div><span>Minutes</span></div>
<div><span>Seconds</span></div>
</div>
And the animation that im trying to apply has the following keyframes:
#keyframes timerSlideUp{
0%{
opacity: 0%; animation-delay: 5s;
}
100%{
opacity: 100%;
}
}
With the decorative CSS:
#timer{
color: white;
padding: 20px;
text-align: center;
}
#timer div{
display: inline-block;
min-width: 40px;
padding: 15px;
background: transparent;
border-radius: 3px;
border: 5px solid white;
margin-top: 30%;
margin-left: 5px;
margin-right: 5px;
text-align: center;
font-size: 2em;
font-weight: bold;
animation: timerSlideUp 5s forwards;
}
I haven't tried anything because I don't know at all how I could get around or fix this.
I'm trying to make the timer to fade in and stay in place (thus the "forwards" in the "animation" property). I'm planning to also add other animations in the future, so these restarts make it impossible.
Thanks in advance!
Move the animation up into the parent element and set animation-iteration-count to 1
I set a background: blue on the body as the white color didn't show anything when running the snippet
function updateTimer() {
var target = Date.parse("9 January 2023, 00:00:00");
var today = new Date();
var diff = target - today;
var days = Math.floor(diff / (1000 * 60 * 60 * 24));
var hours = Math.floor(diff / (1000 * 60 * 60));
var mins = Math.floor(diff / (1000 * 60));
var secs = Math.floor(diff / 1000);
var days = days;
var hours = hours - days * 24;
var minutes = mins - hours * 60;
var seconds = secs - mins * 60;
document.getElementById("timer").innerHTML =
'<div>' + days + '<span> Days</span></div>' +
'<div>' + hours + '<span> Hours</span></div>' +
'<div>' + minutes + '<span> Minutes</span></div>' +
'<div>' + seconds + '<span> Seconds</span></div>';
}
setInterval('updateTimer()', 1000);
body {
background: blue;
}
#keyframes timerSlideUp {
0% {
opacity: 0%;
animation-delay: 5s;
}
100% {
opacity: 100%;
}
}
#timer {
color: white;
padding: 20px;
text-align: center;
animation: timerSlideUp 5s forwards 1;
}
#timer div {
display: inline-block;
min-width: 40px;
padding: 15px;
background: transparent;
border-radius: 3px;
border: 5px solid white;
margin-top: 30%;
margin-left: 5px;
margin-right: 5px;
text-align: center;
font-size: 2em;
font-weight: bold;
}
<div id="timer">
<div><span>Days</span></div>
<div><span>Hours</span></div>
<div><span>Minutes</span></div>
<div><span>Seconds</span></div>
</div>
Related
I am trying to create a countdown timer like in the image but I am not able to do it correctly. Could you please help me create this timer please?
I tried to create the timer but couldn't. I am not able to add the labels like Days, Hourse, Minutes, and seconds in the code outside of the black background so it looks like the above image. here is the code I created:
// Set the date we're counting down to
var countDownDate = new Date("Feb 21, 2023 00:00:00").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get today's 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);
// Add leading zeros to values less than 10
days = days.toString().padStart(2, "0");
hours = hours.toString().padStart(2, "0");
minutes = minutes.toString().padStart(2, "0");
seconds = seconds.toString().padStart(2, "0");
// Display the result in the element with id="demo"
document.getElementById("days").innerHTML = days;
document.getElementById("hours").innerHTML = hours;
document.getElementById("minutes").innerHTML = minutes;
document.getElementById("seconds").innerHTML = seconds;
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("countdownText").innerHTML = "EXPIRED";
} else {
document.getElementById("countdownText").innerHTML = "";
}
}, 1000);
<div style="display: inline-block; background-color: black; padding: 10px; border-radius: 10px;">
<div style="display: inline-block; background-color: brown; padding: 10px; margin-right: 10px; border-radius: 10px;">
<div style="font-size: 50px; color: white; font-family: monospace;" id="days"></div>
</div>
<div style="display: inline-block; background-color: brown; padding: 10px; margin-right: 10px; border-radius: 10px;">
<div style="font-size: 50px; color: white; font-family: monospace;" id="hours"></div>
</div>
<div style="display: inline-block; background-color: brown; padding: 10px; margin-right: 10px; border-radius: 10px;">
<div style="font-size: 50px; color: white; font-family: monospace;" id="minutes"></div>
</div>
<div style="display: inline-block; background-color: brown; padding: 10px; border-radius: 10px;">
<div style="font-size: 50px; color: white; font-family: monospace;" id="seconds"></div>
</div>
</div>
<div style="color: black; font-weight: bold; text-align: center; margin-left: -650px;">
<span id="countdownText"></span>
</div>
This piece of your code could look like this:
days = days.toString().padStart(1, "0");
Your complete code is on CodeSandbox:
https://codesandbox.io/s/reverent-pond-c9m38x?file=/index.html
Hope this helps you.
I did some modification to your code and also added colon between div as per design you gave.
// Set the date we're counting down to
var countDownDate = new Date("Feb 21, 2023 00:00:00").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get today's 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);
// Add leading zeros to values less than 10
days = days.toString().padStart(2, "0");
hours = hours.toString().padStart(2, "0");
minutes = minutes.toString().padStart(2, "0");
seconds = seconds.toString().padStart(2, "0");
// Display the result in the element with id="demo"
document.getElementById("days").innerHTML = days;
document.getElementById("hours").innerHTML = hours;
document.getElementById("minutes").innerHTML = minutes;
document.getElementById("seconds").innerHTML = seconds;
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("countdownText").innerHTML = "EXPIRED";
} else {
document.getElementById("countdownText").innerHTML = "<h2 style='margin:0px 25px;'>days</h2><h2 style='margin:0px 25px;'>hours</h2><h2 style='margin:0px 20px;'>minutes</h2><h2 style='margin:0px 20px;'>seconds</h2>";
}
}, 1000);
<div style="display: inline-block; background-color: black; padding: 10px; border-radius: 10px;">
<div style="display: inline-block; background-color: brown; padding: 10px; border-radius: 10px;">
<div style="font-size: 50px; color: white; font-family: monospace;" id="days"></div>
</div>
<span style="color:white; font-size:4rem;">:</span>
<div style="display: inline-block; background-color: brown; padding: 10px; border-radius: 10px;">
<div style="font-size: 50px; color: white; font-family: monospace;" id="hours"></div>
</div>
<span style="color:white; font-size:4rem;">:</span>
<div style="display: inline-block; background-color: brown; padding: 10px; border-radius: 10px;">
<div style="font-size: 50px; color: white; font-family: monospace;" id="minutes"></div>
</div>
<span style="color:white; font-size:4rem;">:</span>
<div style="display: inline-block; background-color: brown; padding: 10px; border-radius: 10px;">
<div style="font-size: 50px; color: white; font-family: monospace;" id="seconds"></div>
</div>
</div>
<span style="color:white; font-size:4rem;">:</span>
<div style="color: black; font-weight: bold; text-align: center; border:2px solid yellow">
<span id="countdownText" style="display:flex; gap:5; color:black">
</span>
</div>
This question already has answers here:
How to eliminate error: "Implied eval is evil"
(5 answers)
How to change a settimeout into a function instead of a string
(2 answers)
Closed 10 months ago.
apologies for asking this when I've seen other threads where it was asked (similarly) but I"m not understanding the recommendations in previous posts. I'm very inexperienced with javascript and muddle through it here and there. Any help would be greatly appreciated.
I'm trying to create a countdown timer to a specific date. Locally the counter seems fine and it runs but upon going onto a dev environment is the an error:
"Implied eval. Consider passing a function instead of a string"
Here is the code I'm using:
function updateTimer() {
future = Date.parse("aug 24, 2022 01:30:00");
now = new Date();
diff = future - now;
days = Math.floor(diff / (1000 * 60 * 60 * 24));
hours = Math.floor(diff / (1000 * 60 * 60));
mins = Math.floor(diff / (1000 * 60));
secs = Math.floor(diff / 1000);
d = days;
h = hours - days * 24;
m = mins - hours * 60;
s = secs - mins * 60;
document.getElementById("timer")
.innerHTML =
'<div style="display:inline-block; min-width:90px; padding:15px; background:#000000; border-radius:10px; border:2px solid #0d0d0d; margin:6px;">' + d + '<span style="color: #58595B; display: block; margin-top: 6px; font-size: .35em; font-weight: 400;">DAYS</span></div>' +
'<div style="display:inline-block; min-width:90px; padding:15px; background:#000000; border-radius:10px; border:2px solid #0d0d0d; margin:6px;">' + h + '<span style="color: #58595B; display: block; margin-top: 6px; font-size: .35em; font-weight: 400;">HOURS</span></div>' +
'<div style="display:inline-block; min-width:90px; padding:15px; background:#000000; border-radius:10px; border:2px solid #0d0d0d; margin:6px;">' + m + '<span style="color: #58595B; display: block; margin-top: 6px; font-size: .35em; font-weight: 400;">MINUTES</span></div>' +
'<div style="display:inline-block; min-width:90px; padding:15px; background:#000000; border-radius:10px; border:2px solid #0d0d0d; margin:6px;">' + s + '<span style="color: #58595B; display: block; margin-top: 6px; font-size: .35em; font-weight: 400;">SECONDS</span></div>';
}
setInterval('updateTimer()', 1000);
The error is on the last line.
Thank you in advance
I am trying to match the format in the image below.
Here is the code I have now: https://codepen.io/Brite1/pen/wvPrggj (looks like I just need to add spacing and center all numbers/text). I am not sure how to add spacing and how to center all text and numbers correctly. Please help, thanks!
body {
align-items: center;
background-color: transparent;
display: flex;
}
.container {
color: transparent;
margin: 0 auto;
text-align: center;
}
.circle-time{
color: #FE7030;
font-size: 60px;
font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
font-weight: bold;
text-align: center;
}
.timer-font{
font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
font-weight: bold;
color: #027B46;
font-size: 25px;
}
Use a wrapper and remove flex from the body. After removing the flex property from body add it in the wrapper and then use text-align to center the text.
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;
}
var countDownDate = getNextDayOfWeek(new Date(), 5, 15);
// 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)).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();
// Display the result in the element with id="timer"
document.getElementById("circle-days").innerHTML = days + "<div class='timer-font'>Days</div>";
document.getElementById("circle-hours").innerHTML = hours + "<div class='timer-font'>Hours</div>";
document.getElementById("circle-minutes").innerHTML = minutes + "<div class='timer-font'>Minutes</div>";
document.getElementById("circle-seconds").innerHTML = seconds + "<div class='timer-font'>Seconds</div>";
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("timer").innerHTML = "Drawing Winners...";
}
}, 1000);
* {
margin: 0;
padding: 0;
width: 100%;
}
body {
background-color: transparent;
}
.wrapper {
display: flex;
gap: 10%;
align-items: center;
justify-content: center;
}
.container {
color: transparent;
margin: 0 auto;
text-align: center;
}
.circle-time {
color: #FE7030;
font-size: 60px;
font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
font-weight: bold;
text-align: center;
}
.timer-font {
font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
font-weight: bold;
color: #027B46;
font-size: 25px;
}
span {
text-align: center;
}
<div class="wrapper">
<span style="margin-right: 20px;">
<span id="circle-days" class="circle-time"></span>
</span>
<span style="margin-right: 20px;">
<span id="circle-hours" class="circle-time"></span>
</span>
<span style="margin-right: 20px;">
<span id="circle-minutes" class="circle-time"></span>
</span>
<span id="circle-seconds" class="circle-time"></span> <span id="timer"></span>
</div>
You can use a flex container, and set the elements to be the same size with flex: 1 0 150px, which reads flex-grow: 1, flex-shrink: 0, flex-basis: 150px. You can use the width of your liking, but you'll get the idea.
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;
}
var countDownDate = getNextDayOfWeek(new Date(), 5, 15);
// 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)).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();
// Display the result in the element with id="timer"
document.getElementById("circle-days").innerHTML = days + "<div class='timer-font'>Days</div>";
document.getElementById("circle-hours").innerHTML = hours + "<div class='timer-font'>Hours</div>";
document.getElementById("circle-minutes").innerHTML = minutes + "<div class='timer-font'>Minutes</div>";
document.getElementById("circle-seconds").innerHTML = seconds + "<div class='timer-font'>Seconds</div>";
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("timer").innerHTML = "Drawing Winners...";
}
}, 1000);
body {
align-items: center;
background-color: transparent;
display: flex;
}
.flex-wrapper {
display: flex;
min-width: 600px;
}
.flex-wrapper>span {
flex: 1 0 150px;
}
.container {
color: transparent;
margin: 0 auto;
text-align: center;
}
.circle-time {
color: #FE7030;
font-size: 60px;
font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
font-weight: bold;
text-align: center;
}
.timer-font {
font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
font-weight: bold;
color: #027B46;
font-size: 25px;
}
<div class="flex-wrapper">
<span id="circle-days" class="circle-time">00</span>
<span id="circle-hours" class="circle-time">00</span>
<span id="circle-minutes" class="circle-time">00</span>
<span id="circle-seconds" class="circle-time">00</span>
<span id="timer"></span>
</div>
See live example here.
I created this which is to be a stopwatch but seems as though it does not want to run in IE, it will work fine in chrome but it needs to be put into a site that only runs in IE please help....
var h1 = document.getElementsByTagName('h1')[0],
start = document.getElementById('start'),
stop = document.getElementById('stop'),
clear = document.getElementById('clear'),
seconds = 0,
minutes = 0,
hours = 0,
t;
function add() {
seconds++;
if (seconds >= 60) {
seconds = 0;
minutes++;
if (minutes >= 60) {
minutes = 0;
hours++;
}
}
h1.textContent = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds);
timer();
}
function timer() {
t = setTimeout(add, 1000);
}
// timer();
/* Start button */
start.onclick = function() {
timer();
start.style.visibility = "hidden";
stop.style.visibility = "visible";
}
/* Stop button */
stop.onclick = function() {
clearTimeout(t);
stop.style.visibility = "hidden";
start.style.visibility = "visible";
}
/* Clear button */
clear.onclick = function() {
clearTimeout(t);
h1.textContent = "00:00:00";
seconds = 0;
minutes = 0;
hours = 0;
stop.style.visibility = "hidden";
start.style.visibility = "visible";
}
#timer {
position: absolute;
top: 35px;
left: 20px;
}
.time {
font-size: 42px;
margin-left: 40px;
margin-top: 5px;
}
.btn-timer {
width: 80px;
height: 40px;
cursor: pointer;
font-family: helvetica, sans-serif;
font-size: 16px;
}
h1 {
font: bold 24px Helvetica, sans-serif;
color: black;
}
h1 {
display: block;
font-size: 2em;
-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}
<div id="timer">
<button id="start" class="btn-timer">START</button>
<button id="stop" class="btn-timer" style="visibility:hidden">STOP</button>
<button id="clear" class="btn-timer">CLEAR</button>
<h1 class="time"><time>00:00:00</time></h1>
</div>
Any help would be great
I'm trying to get my minute number and hour number animation fire one second early. As you will see, the animation currently occurs when the seconds roll off '00', I'd like the animation's to occur when the seconds roll off '59'.
I've tried altering the seconds to display one second faster to correct this useing.
date.setSeconds(date.getSeconds + 1)
But the number goes crazy. I'm converting the timer numbers to background positions, which is probably lazy, but it seems a simple answer if I can get it to work properly. Any ideas would be greatly appreciated. Working demo can be found here. Clock
<script>
setInterval(function() {
var date = new Date();
var hours = date.getHours() * 100;
var minutes = date.getMinutes() * 100;
var seconds = date.getSeconds() * 100;
var milliseconds = date.getMilliseconds() / 10;
/* var minutesNormal = date.getMinutes();*/
var minCounter = 0;
var hourCounter = 0;
if (seconds === 0) {
minCounter = milliseconds - 100;
} else {
minCounter = 0;
}
if (minutes === 0) {
hourCounter = milliseconds - 100;
} else {
hourCounter = 0;
}
var compClock = document.getElementById("compareClock").innerHTML = "<p>" + hours / 100 + " " + minutes / 100 + " " + seconds / 100 + "</p>"
/* + "<p>Nomral Minute: " + minutesNormal + " Altered Minute: " + minutes / 100*/;
var hoursBar = document.getElementById("hours").style.backgroundPosition = "0px " + (hours + hourCounter) + "px";
var minutesBar = document.getElementById("minutes").style.backgroundPosition = "0px " + (minutes + minCounter) + "px";
var secondsBar = document.getElementById("seconds").style.backgroundPosition = "0px " + (seconds + milliseconds) + "px";
/* alert(secondsBar);*/
}, 10);
#charset "utf-8";
#container {
width: 960px;
position:relative;
margin:auto;
}
#containerCover {
height:100px;
width:300px;
position:absolute;
z-index:1;
background-image: url(images/clock_front.png);
background-repeat: no-repeat;
}
#clock {
position:absolute;
width:300px;
height:100px;
background:#616161;
}
#hours {
width:100px;
height:100px;
background-image: url(images/hours.jpg);
background-repeat: repeat-y;
float: left;
}
#minSecContainer {
width:200px;
float: right;
}
#minutes {
width:100px;
height:100px;
background-image: url(images/minutes.jpg);
background-repeat: repeat-y;
float: left;
}
#seconds {
width:100px;
height:100px;
background-image: url(images/seconds.jpg);
background-repeat: repeat-y;
float: right;
}
#testDiv {
background-image: url(images/minutes.jpg);
background-position: 0px 100px;
height: 100px;
width: 100px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="testDiv"></div>
<div id="compareClock"></div>
<div id="containerCover"></div>
<div id="clock">
<div id="hours"></div>
<div id="minSecContainer">
<div id="minutes"></div>
<div id="seconds"></div>
</div>
</div>
</div>
</body>
</html>
I think this does what you want..
(function () {
var
d_compareclock = document.getElementById("compareClock"),
d_hours = document.getElementById("hours"),
d_minutesBar = document.getElementById("minutes"),
d_secondsBar = document.getElementById("seconds");
setInterval(function() {
var
date = new Date(),
hours = date.getHours() * 100,
minutes = date.getMinutes() * 100,
milliseconds = date.getMilliseconds() / 10,
seconds = date.getSeconds() * 100;
if (date.getSeconds() >= 59) {
minutes += milliseconds;
if (date.getMinutes() >= 59)
hours += milliseconds;
}
d_compareclock.innerHTML = "<p>" + hours / 100 +
" " + minutes / 100 + " " + seconds / 100 + "</p>"
d_hours.style.backgroundPosition = "0px " + (hours) + "px";
d_minutesBar.style.backgroundPosition = "0px " +
(minutes) + "px";
d_secondsBar.style.backgroundPosition = "0px " +
(seconds + milliseconds) + "px";
}, 10);
})();
#charset "utf-8";
#container {
width: 960px;
position:relative;
margin:auto;
}
#containerCover {
height:100px;
width:300px;
position:absolute;
z-index:1;
background-image: url(http://infinitedv.co.uk/clock/images/clock_front.png);
background-repeat: no-repeat;
}
#clock {
position:absolute;
width:300px;
height:100px;
background:#616161;
}
#hours {
width:100px;
height:100px;
background-image: url(http://infinitedv.co.uk/clock/images/hours.jpg);
background-repeat: repeat-y;
float: left;
}
#minSecContainer {
width:200px;
float: right;
}
#minutes {
width:100px;
height:100px;
background-image: url(http://infinitedv.co.uk/clock/images/minutes.jpg);
background-repeat: repeat-y;
float: left;
}
#seconds {
width:100px;
height:100px;
background-image: url(http://infinitedv.co.uk/clock/images/seconds.jpg);
background-repeat: repeat-y;
float: right;
}
#testDiv {
background-image: url(http://infinitedv.co.uk/clock/images/minutes.jpg);
background-position: 0px 100px;
height: 100px;
width: 100px;
}
<div id="container">
<div id="compareClock"></div>
<div id="containerCover"></div>
<div id="clock">
<div id="hours"></div>
<div id="minSecContainer">
<div id="minutes"></div>
<div id="seconds"></div>
</div>
</div>
</div>