[mw_shl_code=css,vero] <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Orologio elettronico</title>
</head>
<style type="testo/css">
*{margine: 0; ribottitura: 0; stile-lista: nessuno}
corpo{colore di sfondo: #D7154A; font-family: 'Microsoft Yahei'}
.demo{larghezza: 330px; altezza: 100px; bordo: 3px solido #fff; Margine: 200px automatico; altezza linea: 100px; test-align: centro; colore: #fff; dimensione font: 50px; peso del carattere: 600; posizione: relativa; Sovraplesso: nascosto; }
.dimensione{larghezza: 100px; altezza: 100px; galleggiante: sinistra; }
.pointer{larghezza: 10px; altezza: 100px; galleggiante: sinistra; }
.bottom{larghezza: 200px; altezza: 100px; test-align: centro; margine: 0 auto; colore: #fff}
#next-h{posizione: assoluta; larghezza: 100px; altezza: 100px; sinistra: 0px; Top: 100px; }
#next-m{posizione: assoluta; larghezza: 100px; altezza: 100px; sinistra: 110px; Top: 100px; }
#next-s{posizione: assoluta; larghezza: 100px; altezza: 100px; sinistra: 220px; Top: 100px; }
</style>
<body>
<div class="demo">
<div id="ora" classe="dimensione"></div>
<div id="next-h"></div>
<div class="pointer">:</div>
<div id="minuto" classe="dimensione"></div>
<div id="next-m"></div>
<div class="pointer">:</div>
<div id="secondo" class="dimensione"></div>
<div id="next-s"></div>
</div>
<div class="bottom"> Forum Wusoft</div>
</body>
<script type="testo/javascript">
Ottieni l'ora attuale
var date=nuova Data();
var hour=date.getHours();
var minute=date.getMinutes();
var second=date.getSeconds();
Ottieni il DOM del momento visualizzato
var ohour=document.getElementById("hour");
var ominute=document.getElementById("minute");
var osecond=document.getElementById("second");
Inizializzazione temporale
funzione init(){
ohour.innerHTML=fill(ora);
ominute.innerHTML=fill(minuto);
osecond.innerHTML=fill(second);
}
init();
Prendi il DOM nascosto, qui il DOM è da mostrare la prossima volta
var nhour=document.getElementById("next-h");
var nminute=document.getElementById("next-m");
var nsecond=document.getElementById("next-s");
Il timer controlla il cambiamento temporale
setInterval(function(){
se(second==60){
secondo=0;
Aggiungi 1 al numero di lancette dei minuti
se(minuto==60){
minuto=0;
Ora +1
se(ora==24){
ora=0;
}
Mostrato nella scatola della pelle d'ombra
nhour.innerHTML=fill(ora);
nhour++;
Chiama la funzione fluttuante
muoviti (nora, ora);
La scatola deve anche essere resettata
nhour.style.top="100px";
}
Mostrato nella scatola della pelle d'ombra
nminute.innerHTML=fill(minuto);
minute++;
Chiama la funzione fluttuante
muoviti (nminuto, minuto);
La scatola deve anche essere resettata
nminute.style.top="100px";
}else{
secondo++;
}
nsecond.innerHTML=fill(second);
}, 1000)
Il secondo successivo il dom si muove verso l'alto
Parametro 1: La scatola da spostare
Parametro 2: La casella che finalmente mostra l'ora
funzione 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)
}
C'è un cambiamento nel tempo di ascolto?
var old=0;
setInterval(function(){
if(old!=nsecond.innerHTML){
muoviti (nsecondo, osecondo);
nsecond.style.top="100px";
vecchio=nsecond.innerHTML;
}
}, 1)
Funzione ausiliaria per ottenere valori di attributo
funzione getStyle(obj,style){
var attr=window.getComputedStyle ? window.getComputedStyle(obj,null)[style]:obj.currentStyle[style];
Rimuovi l'unità px
attr=attr.slice(0, -2);
return parseInt(attr);
}
Se la durata è 1 bit, si aggiunge 0 davanti
funzione fill(str){
var s=str.toString();
se(s.length==1){
s='0'+s;
ritorno s;
}else{
ritorna forza;
}
}
</script>
[/</html>mw_shl_code]
|
Pubblicato su 14/11/2014 18:13:17
|
|
|
|
