Question

我正在使用Raphael库在javaScript中构建一个时钟，但是当我点击我的箭头时，我似乎无法永久地改变它的时间，它将时间改变一个小时，但是后来又一秒钟将改回目前的正确时间。

     function startTime(){
     var today = new Date();
     var h = today.getHours();
     var m = today.getMinutes();
     var s = today.getSeconds();

     var ny_h = today.getHours()-5;
     var hk_h = today.getHours()+8;
     var jh_h = today.getHours()+2;

     var multiplier = 0;

     m = checkTime(m);
     s = checkTime(s);
     h = checkTime(h);

seconds.animate({transform: [ 'r',((s*6)-180),200,200]});
minute.animate({transform: [ 'r',((m*6)-180),200,200]});
hour.animate({transform: [ 'r',(((h+multiplier)*30)-180),200,200]});

change.click(function(){
    var arrow1 = paper.path(up).attr({fill:"black"});
    var arrow2 = paper.path(down).attr({fill:"black"});
    arrow1.click(function(){
        multiplier+=1;
      //var h = today.getHours()+1;
});

setTimeout(function(){startTime()},1000);

function checkTime(i) {
    if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
    return i;
}   

}

startTime(); //Function call that starts the startTime function.

我已经尝试在点击箭头时加上一小时到小时变量，但是在一秒钟后它会变回。所以我也尝试添加一个名为multiplier的变量，并在每次单击箭头时更改它，随后更改时间，但我似乎无法访问click函数中的乘数变量。我不知道为什么会这样，并且真的很感激一些帮助。谢谢。

Answer 1

问题是startTime定义时间校正变量，显示时间和计划本身在一秒钟内再次调用。

显示时间的函数showTime需要单独包含，如果startTime中定义的更正变量要保留，而不是每次调用showTime时都重新定义。

showTime内开始的超时通话看起来像setTimeout( showTime, 1000);。

或者，您可以使用setInterval( showTime, 1000);作为从startTime外部函数内启动的持续间隔计时器;

Answer 2

这个简单的例子应该得到你的陈述。请注意，乘数变量移动到函数之外，以便保留其值。 setTime（）替换为setInterval（）。现在您需要做的就是在updateClock（）函数中插入Raphaël代码。

运行代码段以查看其是否有效

var multiplier = 0;

// click handler     
function setHour(n) {
  multiplier += n;
  updateClock();
}

// update UI
function updateClock() {
  var today = new Date();
  today.setHours(today.getHours() + multiplier);
  document.getElementById('clock').innerHTML = today.toLocaleTimeString();


  // insert your Raphaël code to update the clock here


}


// initialize 
updateClock();
window.setInterval(updateClock, 1000);

.container a {
  text-decoration: none;
  display: block;
  width: 1.2em;
  background-color: black;
  color: white;
  text-align: center;
}
#clock {
  font-size: 23px;
  font-family: monospace;
}

<div class="container">
  <a href="javascript:void(0)" onclick="setHour(1)">▲</a>
  <a href="javascript:void(0)" onclick="setHour(-1)">▼</a>
  <span id="clock"></span>
</div>

Javascript时钟，改变时间

2 个答案: