[mw_shl_code=css,True] <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Relógio eletrônico</title>
</head>
<type de estilo="texto/css">
*{margem: 0; preenchimento (padding): 0; Estilo de lista: nenhum}
corpo{cor de fundo: #D7154A; família-fonte: 'Microsoft Yahei'}
.demo{width: 330px; altura: 100px; borda: 3px sólido #fff; Margem: 200px automático; Altura da linha: 100px; Alinhar texto: centro; Cor: #fff; Tamanho da fonte: 50px; peso de fonte: 600; posição: relativo; Transbordamento: Oculto; }
.size{width: 100px; altura: 100px; flutuar: esquerda; }
.pointer{width: 10px; altura: 100px; flutuar: esquerda; }
.bottom{width: 200px; altura: 100px; Alinhar texto: centro; margem: 0 auto; Cor: #fff}
#next-h{posição: absoluta; largura: 100px; altura: 100px; esquerda: 0px; topo: 100px; }
#next-m{posição: absoluta; largura: 100px; altura: 100px; esquerda: 110px; topo: 100px; }
#next-s{posição: absoluta; largura: 100px; altura: 100px; esquerda: 220px; topo: 100px; }
</style>
<body>
<div class="demo">
<div id="hour" class="size"></div>
<div id="next-h"></div>
<div class="pointer">:</div>
<div id="minuto" classe="tamanho"></div>
<div id="next-m"></div>
<div class="pointer">:</div>
<div id="segundo" classe="tamanho"></div>
<div id="next-s"></div>
</div>
<div class="bottom"> Fórum Wusoft</div>
</body>
<script type="text/javascript">
Obtenha a hora atual
var date=nova Data();
var hour=date.getHours();
var minute=date.getMinutes();
var second=date.getSeconds();
Obtenha o DOM do momento que está sendo exibido
var ohour=document.getElementById("hour");
var ominute=document.getElementById("minute");
var osecond=document.getElementById("second");
Inicialização em tempo
função init(){
ohour.innerHTML=fill(hour);
ominute.innerHTML=preencher(minuto);
osecond.innerHTML=preencher(segundo);
}
init();
Pegue o DOM oculto, aqui está o DOM para mostrar da próxima vez
var nhour=document.getElementById("next-h");
var nminute=document.getElementById("next-m");
var nsecond=document.getElementById("next-s");
O temporizador controla a mudança de tempo
setInterval(function(){
if(segundo==60){
segundo=0;
Adicione 1 ao número de ponteiros de minutos
se(minuto==60){
minuto=0;
Hora +1
se(hora==24){
hora=0;
}
Mostrado na caixa do esconderijo das sombras
nhour.innerHTML=fill(hour);
nhour++;
Chame a função flutuante
mover-se (nhour, ohour);
A caixa também precisa ser resetada
nhour.style.top="100px";
}
Mostrado na caixa do esconderijo das sombras
nminute.innerHTML=fill(minuto);
minute++;
Chame a função flutuante
mover-se(nminuto, ominuto);
A caixa também precisa ser resetada
nminute.style.top="100px";
}else{
segundo++;
}
nsecond.innerHTML=preencher(segundo);
}, 1000)
No segundo seguinte, o dom se move para cima
Parâmetro 1: A caixa a ser movida
Parâmetro 2: A caixa que finalmente mostra o tempo
função 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)
}
Há alguma mudança no tempo de audição?
var old=0;
setInterval(function(){
if(old!=nsecond.innerHTML){
move(nsegundo, osegundo);
nsecond.style.top="100px";
old=nsecond.innerHTML;
}
}, 1)
Função auxiliar para obter valores de atributos
function getStyle(obj,style){
var attr=window.getComputedStyle ? window.getComputedStyle(obj,null)[style]:obj.currentStyle[style];
Remova a unidade px
atração=atração(0, -2);
return parseInt(attr);
}
Se o tempo for 1 bit, 0 é adicionado à frente
função preench(str){
var s=str.toString();
if(s.length==1){
s='0'+s;
retorno s;
}else{
Retorno de força;
}
}
</script>
[/</html>mw_shl_code]
|
Publicado em 14/11/2014 18:13:17
|
|
|
|
