【发布时间】：2017-03-03 14:18:57
【问题描述】：
我试图让我的分钟数和小时数动画提前一秒触发。如您所见，动画当前在秒数滚落“00”时发生，我希望动画在秒数滚落“59”时发生。
我尝试将秒数更改为更快显示一秒以纠正这种使用。
date.setSeconds(date.getSeconds + 1)
但是这个数字太疯狂了。我正在将计时器编号转换为背景位置，这可能很懒惰，但如果我能让它正常工作，这似乎是一个简单的答案。任何想法将不胜感激。工作演示可以在这里找到。 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>【问题讨论】：
-
你的工作示例有 ->
3577 (index):49 Uncaught ReferenceError: hourCOunter is not defined -
糟糕，已更正，谢谢
-
要提前一秒，您可以执行以下操作 ->
var triggerWhen = new Date(new Date().getTime() - 1000);然后您可以检查 triggerWhen 。 -
我会用那个变量替换 if 语句中的零吗？抱歉，我对此还是有点陌生。
-
我认为您可以在代码中将 ->
var date = new Date();替换为var date = new Date(new Date().getTime() - 1000);，我只做了 triggerWhen，以防您也想跟踪当前日期。但是看看你的代码，我不确定你是否需要它..
标签： javascript html css time