Javascript clock, изменяя время

Question

Я строю часы в javaScript, используя библиотеку Raphael, но я не могу заставить его постоянно менять часы, когда я нажимаю на стрелки, меняет время на один час, но затем через секунду он вернется к правильному времени, в котором он сейчас находится.

 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. 

Я попытался плюс один час на переменную часа при нажатии стрелки, но после второй. Поэтому я также попытался добавить переменную, называемую множителем, и изменить ее каждый раз, когда я нажимаю стрелку, а затем меняю время, но я не могу получить доступ к переменной множителя внутри моей функции щелчка. Я не знаю, почему это так и будет очень полезно. Благодарю.

Answer 1

Проблема заключается в том, что startTime определяет переменные с коррекцией по времени, отображает время и расписания, которые нужно вызывать снова через секунду.

Функция, чтобы показать время, showTime должен быть включен отдельно, если корректирующие переменные, определенные в startTime, должны быть сохранены без пересматриваются каждый раз showTime называется.

Запуск таймаута, начатый в пределах showTime, тогда будет выглядеть как setTimeout(showTime, 1000);.

В качестве альтернативы вы можете использовать setInterval(showTime, 1000); в качестве текущего интервала таймера, запускаемого из внешней функции startTime;

Answer 2

Этот простой пример должен получить ваше заявление. Обратите внимание, что переменная множителя перемещается за пределы функции, чтобы сохранить ее значение. SetTime() был заменен на setInterval(). Теперь все, что вам нужно сделать, это вставить ваш код Raphaël в функцию updateClock().

Выполнить фрагмент кода, чтобы увидеть его работу

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>