Question

我试图让我的分钟编号和小时编号动画一秒钟开火。正如您将看到的那样，动画当前是在秒数滚动时发生的，我希望当秒数滚降时会发生动画“＆＃39; 59＆＃39;＆＃39;

我尝试更改秒数以更快地显示一秒来纠正此使用情况。

date.setSeconds(date.getSeconds + 1)

但这个数字很疯狂。我将计时器号码转换为后台位置，这可能是懒惰的，但如果我能让它正常工作，这似乎是一个简单的答案。任何想法将不胜感激。可以在这里找到工作演示。 Clock

＆＃13;

<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);

＆＃13;

@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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

我认为这可以做你想要的......

＆＃13;

(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);  
})();

＆＃13;

@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;
}

＆＃13;

<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>

＆＃13;

让我的时钟动画提前一秒钟/分钟

1 个答案: