[mw_shl_code=css,true] <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Zegar elektroniczny</title>
</head>
<style type="text/css">
*{margin: 0; wypełnienie: 0; Styl listy: brak}
ciało{kolor tła: #D7154A; Rodzina czcionek: 'Microsoft Yahei'}
.demo{szerokość: 330px; wysokość: 100px; Ramka: 3px solid #fff; margines: 200px auto; Wysokość linii: 100px; wyrównanie tekstu: środek; kolor: #fff; rozmiar czcionki: 50px; grubość czcionki: 600; pozycja: względna; przelew: ukryty; }
.size{width: 100px; wysokość: 100px; float: lewo; }
.pointer{szerokość: 10px; wysokość: 100px; float: lewo; }
.bottom{szerokość: 200px; wysokość: 100px; wyrównanie tekstu: środek; margines: 0 auto; Kolor: #fff}
#next-h{pozycja: absolutna; szerokość: 100px; wysokość: 100px; po lewej: 0px; góra: 100px; }
#next-m{pozycja: absolutna; szerokość: 100px; wysokość: 100px; po lewej: 110px; góra: 100px; }
#next-s{pozycja: absolutna; szerokość: 100px; wysokość: 100px; lewo: 220px; góra: 100px; }
</style>
<body>
<Div class="demo">
<div id="godzina" klasa = "rozmiar"></div>
<div id="next-h"></div>
<div class="wskaźnik">:</div>
<div id="minuta" klasa="rozmiar"></div>
<div id="next-m"></div>
<div class="wskaźnik">:</div>
<div id="druga" klasa="rozmiar"></div>
<div id="next-s"></div>
</div>
<div class="bottom"> Forum Wusoft</div>
</body>
<typ skryptu="tekst/javascript">
Sprawdź aktualną godzinę
var date=new Date();
var hour=date.getHours();
var minute=date.getMinutes();
var second=date.getSeconds();
Zdobądź DOM w czasie, który jest wyświetlany
var ohour=document.getElementById("godzina");
var ominute=document.getElementById("minute");
var osecond=document.getElementById("second");
Inicjalizacja czasowa
funkcja init(){
ohour.innerHTML=fill(hour);
ominute.innerHTML=fill(minute);
osecond.innerHTML=fill(second);
}
init();
Zdobądź ukryty DOM, tutaj jest DOM, który pokaże następnym razem
var nhour=document.getElementById("next-h");
var nminute=document.getElementById("next-m");
var nsecond=document.getElementById("next-s");
Timer kontroluje zmianę czasu
setInterval(function(){
if(second==60){
drugi=0;
Dodaj 1 do liczby minutowych rozdań
if(minute==60){
minuta=0;
Godzina +1
if(godzina==24){
godzina=0;
}
Pokazane w pudełku z cieniową kryjówką
nhour.innerHTML=fill(hour);
nhour++;
Nazywamy funkcją zmienną
ruch (ngodzina, godzina);
Pudełko też wymaga resetu
nhour.style.top="100px";
}
Pokazane w pudełku z cieniową kryjówką
nminute.innerHTML=fill(minute);
minuta++;
Nazywamy funkcją zmienną
move(nminute, ominute);
Pudełko też wymaga resetu
nminute.style.top="100px";
}else{
drugi++;
}
nsecond.innerHTML=fill(second);
}, 1000)
W następnej sekundzie dom przesuwa się w górę
Parametr 1: Pole do przesunięcia
Parametr 2: Ramka, która ostatecznie pokazuje czas
funkcja move(obj,show){
var timer=setInterval(function(){
obj.style.top=getStyle(obj,"top")-1+'px';
if(getStyle(obj,"top")<=0){
clearInterval(timer);
show.innerHTML=obj.innerHTML;
}
}, 1)
}
Czy zmienia się czas słuchania?
var old=0;
setInterval(function(){
if(old!=nsecond.innerHTML){
ruch(nsekunda,osekunda);
nsecond.style.top="100px";
old=nsecond.innerHTML;
}
}, 1)
Funkcja pomocnicza do uzyskania wartości atrybutów
function getStyle(obj,style){
var attr=window.getComputedStyle ? window.getComputedStyle(obj,null)[style]:obj.currentStyle[style];
Usuń jednostkę px
attr=attr.slice(0, -2);
return parseInt(attr);
}
Jeśli czas trwania wynosi 1 bit, do przodu dodaje się 0
funkcja wypełnienia(str){
var s=str.toString();
if(s.length==1){
s='0'+s;
zwrot s;
}else{
zwrot siły;
}
}
</script>
[/</html>mw_shl_code]
|
Opublikowano 14.11.2014 18:13:17
|
|
|
|
