[mw_shl_code=css,true] <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Elektronické hodiny</title>
</head>
<style type="text/css">
*{margin: 0; vypchávka: 0; Štýl zoznamu: žiadny}
telo{pozadie-farba: #D7154A; rodina fontov: 'Microsoft Yahei'}
.demo{šírka: 330px; výška: 100px; Rám: 3px pevné #fff; Rezerva: 200px auto; Výška riadku: 100px; zarovnanie textu: stred; Farba: #fff; Veľkosť písma: 50px; hrúbka písma: 600; pozícia: relatívna; pretečenie: skryté; }
.size{width: 100px; výška: 100px; Float: vľavo; }
.pointer{šírka: 10px; výška: 100px; Float: vľavo; }
.bottom{šírka: 200px; výška: 100px; zarovnanie textu: stred; Rozdiel: 0 auto; Farba: #fff}
#next-h{pozícia: absolútna; šírka: 100px; výška: 100px; vľavo: 0px; hore: 100px; }
#next-m{pozícia: absolútna; šírka: 100px; výška: 100px; vľavo: 110 px; hore: 100px; }
#next-s{pozícia: absolútna; šírka: 100px; výška: 100px; vľavo: 220px; hore: 100px; }
</style>
<body>
<div class="demo">
<div id="hodina" trieda="veľkosť"></div>
<div id="next-h"></div>
<div class="pointer">:</div>
<div id="minute" class="size"></div>
<div id="next-m"></div>
<div class="pointer">:</div>
<div id="druhá" trieda="veľkosť"></div>
<div id="next-s"></div>
</div>
<div class="bottom"> Wusoft fórum</div>
</body>
<typ skriptu="text/javascript">
Získajte aktuálny čas
var date=new Date();
var hour=date.getHours();
var minute=date.getMinutes();
var second=date.getSeconds();
Získajte DOM času, ktorý sa zobrazuje
var ohour=document.getElementById("hour");
var ominute=document.getElementById("minute");
var osecond=document.getElementById("second");
Inicializácia času
funkcia init(){
ohour.innerHTML=fill(hour);
ominute.innerHTML=fill(minute);
osecond.innerHTML=fill(second);
}
init();
Získaj skrytý DOM, tu je DOM, ktorý sa ukáže nabudúce
var nhour=document.getElementById("next-h");
var nminute=document.getElementById("next-m");
var nsecond=document.getElementById("next-s");
Časovač riadi zmenu času
setInterval(function(){
if(second==60){
druhý=0;
Pridaj 1 k počtu minútových rúk
if(minute==60){
minúta=0;
Hodina +1
if(hour==24){
hodina=0;
}
Zobrazené v krabici tieňového úkrytu
nhour.innerHTML=fill(hour);
nhour++;
Voláme plávajúcu funkciu
pohyb (nhodina, hodina);
Krabica sa tiež musí resetovať
nhour.style.top="100px";
}
Zobrazené v krabici tieňového úkrytu
nminute.innerHTML=fill(minute);
minúta++;
Voláme plávajúcu funkciu
move(nminute,ominute);
Krabica sa tiež musí resetovať
nminute.style.top="100px";
}else{
druhý++;
}
nsecond.innerHTML=fill(second);
}, 1000)
V ďalšej sekunde sa dom posunie nahor
Parameter 1: Políčko na presunutie
Parameter 2: Políčko, ktoré nakoniec ukazuje čas
function 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)
}
Je zmena v čase počúvania?
var old=0;
setInterval(function(){
if(old!=nsecond.innerHTML){
pohyb(nsekunda, osekunda);
nsecond.style.top="100px";
old=nsecond.innerHTML;
}
}, 1)
Pomocná funkcia na získanie hodnôt atribútov
function getStyle(obj,style){
var attr=window.getComputedStyle ? window.getComputedStyle(obj,null)[style]:obj.currentStyle[style];
Odstráňte jednotkový px
attr=attr.slice(0, -2);
return parseInt(attr);
}
Ak je dĺžka času 1 bit, pridáva sa 0
funkcia fill(str){
var s=str.toString();
if(s.length==1){
s='0'+s;
return s;
}else{
vrátiť str;
}
}
</script>
[/</html>mw_shl_code]
|
Zverejnené 14. 11. 2014 18:13:17
|
|
|
|
