[mw_shl_code=CSS,True] <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Reloj electrónico</title>
</head>
<style type="text/css">
*{margen: 0; relleno: 0; Estilo de lista: ninguno}
cuerpo{color de fondo: #D7154A; familia de fuentes: 'Microsoft Yahei'}
.demo{ancho: 330px; Altura: 100px; borde: 3px sólidos #fff; margen: 200px automático; Altura de línea: 100px; text-align: center; color: #fff; Tamaño de fuente: 50px; peso de fuente: 600; posición: relativa; desbordamiento: oculto; }
.size{width: 100px; Altura: 100px; flotar: izquierda; }
.pointer{ancho: 10px; Altura: 100px; flotar: izquierda; }
.bottom{ancho: 200px; Altura: 100px; text-align: center; marje: 0 auto; color: #fff}
#next-h{posición: absoluta; Ancho: 100px; Altura: 100px; izquierda: 0px; Arriba: 100px; }
#next-m{posición: absoluta; Ancho: 100px; Altura: 100px; izquierda: 110px; Arriba: 100px; }
#next-s{posición: absoluta; Ancho: 100px; Altura: 100px; izquierda: 220px; Arriba: 100px; }
</style>
<body>
<div class="demo">
<div id="hour" class="size"></div>
<div id="next-h"></div>
<div class="pointer">:</div>
<div id="minuto" clase="tamaño"></div>
<div id="next-m"></div>
<div class="pointer">:</div>
<id="segundo" clase="tamaño"></div>
<div id="next-s"></div>
</div>
<div class="bottom"> Foro de Wusoft</div>
</body>
<script type="text/javascript">
Obtén la hora actual
var fecha=nueva fecha();
var hour=fecha.getHours();
var minute=fecha.getMinutes();
var second=fecha.getSeconds();
Obtén el DOM de la hora en la que se está mostrando
var ohour=document.getElementById("hour");
var ominute=document.getElementById("minute");
var osecond=document.getElementById("second");
Inicialización en tiempo
función init(){
ohour.innerHTML=fill(hour);
ominute.innerHTML=fill(minute);
osecond.innerHTML=fill(segundo);
}
init();
Consigue el DOM oculto, aquí está el DOM para mostrarlo la próxima vez
var nhour=document.getElementById("next-h");
var nminute=document.getElementById("next-m");
var nsecond=document.getElementById("next-s");
El temporizador controla el cambio de tiempo
setInterval(function(){
if(segundo==60){
segundo=0;
Suma 1 al número de manecillas de minutos
si(minuto==60){
minuto=0;
Hora +1
si(hora==24){
hora=0;
}
Mostrado en la caja de la piel de sombra
nhour.innerHTML=fill(hour);
nhour++;
Llama a la función flotante
moverse (nhora, ohora);
La caja también necesita ser reiniciada
nhour.style.top="100px";
}
Mostrado en la caja de la piel de sombra
nminute.innerHTML=fill(minuto);
minute++;
Llama a la función flotante
moverse(nminuto, ominuto);
La caja también necesita ser reiniciada
nminute.style.top="100px";
}else{
segundo++;
}
nsecond.innerHTML=fill(second);
}, 1000)
Al segundo siguiente, el dom se mueve hacia arriba
Parámetro 1: La caja a mover
Parámetro 2: La caja que finalmente muestra la hora
función mover(obj,mostrar){
var timer=setInterval(function(){
obj.style.top=getStyle(obj,"top")-1+'px';
if(getStyle(obj,"top")<=0){
clearInterval(timer);
show.innerHTML=obj.innerHTML;
}
}, 1)
}
¿Hay algún cambio en el tiempo de escucha?
var viejo=0;
setInterval(function(){
if(old!=nsecond.innerHTML){
mover (nsegundo, osegundo);
nsecond.style.top="100px";
viejo=nsecond.innerHTML;
}
}, 1)
Función auxiliar para obtener valores de atributos
función getStyle(obj,style){
var attr=window.getComputedStyle ? window.getComputedStyle(obj,null)[style]:obj.currentStyle[style];
Quita la unidad px
atrap=atracción(0, -2);
return parseInt(attr);
}
Si la duración es 1 bit, se añade 0 delante
función fill(str){
var s=str.toString();
if(s.length==1){
s='0'+s;
return s;
}else{
devolver fuerza;
}
}
</script>
[/</html>mw_shl_code]
|
Publicado en 14/11/2014 18:13:17
|
|
|
|
