Stronę tą wyświetlono już: 4705 razy
Prosty skrypt wyświetlający bieżącą godzinę za pomocą zegara elektronicznego, który (przyznaję się bez bicia) narysowałem w Inkscap-ie.
Działanie skryptu sprowadza się do odpowiedniego ustawienia właściwości elementów SVG o określonym przypisanym mu identyfikatorze. Zastosowanie grafiki wektorowej do wyświetlania zegara ma tę, że można go skalować do woli bez straty jakości jak ma to miejsce w przypadku.
Kod skryptu:
settings = Array(
Array(1,1,1,0,1,1,1), // 0
Array(0,0,1,0,0,1,0), // 1
Array(1,0,1,1,0,0,1), // 2
Array(1,0,1,1,0,1,1), // 3
Array(0,1,1,1,0,1,0), // 4
Array(1,1,0,1,0,1,1), // 5
Array(1,1,0,1,1,1,1), // 6
Array(1,0,1,0,0,1,0), // 7
Array(1,1,1,1,1,1,1), // 8
Array(1,1,1,1,0,1,1) // 9
);
function setNumber(number, id){
number = number % 10;
var nId;
for(i = 0; i < settings[number].length; i++){
nId = id + (i + 1);
if(settings[number][i] == 1){
$("#" + nId).css("fill", "#ff0000");
}else{
$("#" + nId).css("fill", "#660000");
}
}
}
function setTimer(){
var d = new Date();
setNumber(d.getSeconds() % 10, "sec_1_");
setNumber(parseInt(d.getSeconds() / 10), "sec_2_");
setNumber(d.getMinutes() % 10, "min_1_");
setNumber(parseInt(d.getMinutes() / 10), "min_2_");
setNumber(d.getHours() % 10, "hours_1_");
setNumber(parseInt(d.getHours() / 10), "hours_2_");
}
window.onload = function(){
setTimer();
setInterval(setTimer, 1000);
}