Zegar Javascript, zmiana czasu - javascript, click, raphael, clock

Buduję zegar w javaScript przy użyciuRaphael, ale wydaje mi się, że nie mogę zmusić go do trwałej zmiany godzin po kliknięciu moich strzałek, zmienia czas o jedną godzinę, ale sekundę później zmieni się z powrotem na właściwy czas, który jest obecnie.

     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.

Próbowałem dodać jedną godzinę do godzinyzmienna po kliknięciu strzałki, ale po sekundzie zmienia się z powrotem. Dlatego też próbowałem dodać zmienną o nazwie mnożnik i zmieniać ją za każdym razem, gdy klikam strzałkę, zmieniając czas, ale nie mogę uzyskać dostępu do zmiennej mnożnika wewnątrz funkcji kliknięcia. Nie wiem, dlaczego tak jest naprawdę doceniam pomoc. Dzięki.

Odpowiedzi:

Problemem jest startTime definiuje zmienne korekcji czasu, wyświetla czas i sam planuje ponowne wywołanie w ciągu sekundy.

Funkcja pokazująca czas, showTime musi być uwzględniony osobno, jeśli zmienne korygujące zdefiniowane w ramach startTime, mają być zachowane bez konieczności ich ponownego definiowania za każdym razem showTime jest nazywany.

W ciągu zaczęło się wywołanie przekroczenia limitu czasu showTime wyglądałby jak setTimeout( showTime, 1000);.

Alternatywnie możesz użyć setInterval( showTime, 1000); jako bieżący licznik interwałowy uruchomiony z poziomu startTime funkcja zewnętrzna;

Ten prosty przykład powinien zostać podany.Zwróć uwagę, że zmienna mnożnika jest przenoszona poza funkcję, dzięki czemu zachowuje swoją wartość. Metoda setTime () została zastąpiona przez setInterval (). Teraz wszystko, co musisz zrobić, to wstawić swój kod Raphaël do funkcji updateClock ().

Uruchom fragment, aby zobaczyć, jak działa

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>