CODEWITHSUNDEEP
javascripthtmlcsstime
Cuckoo
Cuckoo

Reputation: 366

Make my clock animation fire one second/minute early

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>

Upvotes: 2

Views: 81

Answers (1)

Keith
Keith

Reputation: 24191

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>

Upvotes: 3

Related Questions