[mw_shl_code=css,true] <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Elektronikus óra</title>
</head>
<style type="text/css">
*{margin: 0; párnázás: 0; listastílus: nincs}
body{background-color: #D7154A; betűcsalád: 'Microsoft Yahei'}
.demo{width: 330px; magasság: 100px; keret: 3px szilárd #fff; A margó: 200px automata; vonalmagasság: 100px; szöveg-igazítás: középpont; szín: #fff; betűméret: 50px; betűtömeg: 600; pozíció: relatív állapot; túlcsordulás: rejtve; }
.size{width: 100px; magasság: 100px; lebegő: balra; }
.pointer{width: 10px; magasság: 100px; lebegő: balra; }
.bottom{width: 200px; magasság: 100px; szöveg-igazítás: középpont; A marzs: 0 automata; szín: #fff}
#next-h{pozíció: abszolút; szélesség: 100px; magasság: 100px; bal: 0px; Csúcs: 100px; }
#next-m{pozíció: abszolút; szélesség: 100px; magasság: 100px; bal: 110px; Csúcs: 100px; }
#next-s{pozíció: abszolút; szélesség: 100px; magasság: 100px; balra: 220px; Csúcs: 100px; }
</style>
<body>
<div class="demo">
<div id="hour" class="size"></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="second" class="size"></div>
<div id="next-s"></div>
</div>
<div class="bottom"> Wusoft Forum</div>
</body>
<script type="text/javascript">
Szerezd meg az aktuális időt
var date=új Date();
var hour=date.getHours();
var minute=date.getMinutes();
var second=date.getSeconds();
Szerezd meg az adott időpont DOM-ját, amit megjelenítünk
var ohour=document.getElementById("hour");
var ominute=document.getElementById("perc");
var osecond=document.getElementById("second");
Időincializáció
function init(){
ohour.innerHTML=fill(óra);
ominute.innerHTML=fill(perc);
osecond.innerHTML=fill(second);
}
init();
Szerezd meg a rejtett DOM-ot, itt van, hogy legközelebb megmutassa a DOM-t
var nhour=document.getElementById("next-h");
var nminute=document.getElementById("next-m");
var nsecond=document.getElementById("next-s");
Az időzítő szabályozza az idő változását
setInterval(function(){
if(second==60){
second=0;
Hozzáadjuk az 1-et a percmutatók számához
if(minute==60){
perc=0;
Óra +1
if(hour==24){
óra=0;
}
A árnyékrejtekhely dobozában látható
nhour.innerHTML=fill(óra);
nhour++;
Hívjuk a lebegő függvényt
move(nóra, óra);
A dobozt is vissza kell állítani
nhour.style.top="100px";
}
A árnyékrejtekhely dobozában látható
nminute.innerHTML=fill(perc);
perc++;
Hívjuk a lebegő függvényt
mozog (nperc, operc);
A dobozt is vissza kell állítani
nminute.style.top="100px";
}else{
második++;
}
nsecond.innerHTML=fill(second);
}, 1000)
A következő pillanatban a dom felfelé mozdul
1. paraméter: A mozgatandó doboz
2. paraméter: Az a doboz, amely végül az időt mutatja
function move(obj,show){
var timer=setInterval(function(){
obj.style.top=getStyle(obj,"top")-1+'px';
if(getStyle(obj,"top")<=0){
clearInterval(időzítő);
show.innerHTML=obj.innerHTML;
}
}, 1)
}
Változott a hallgatási idő?
var old=0;
setInterval(function(){
if(old!=nsecond.innerHTML){
mozog (nsecond, osecond);
nsecond.style.top="100px";
old=nsecond.innerHTML;
}
}, 1)
Segédfüggvény az attribútumértékek megszerzéséhez
function getStyle(obj,style){
var attr=window.getComputedStyle ? window.getComputedStyle(obj,null)[style]:obj.currentStyle[style];
Távolítsd el az egység px-t
attr=attr.slice(0, -2);
return parseInt(attr);
}
Ha az idő hossza 1 bit, akkor 0 kerül előre
function fill(str){
var s=str.toString();
if(s.length==1){
s='0'+s;
visszajelzés s;
}else{
vissza STR;
}
}
</script>
[/</html>mw_shl_code]
|
Közzétéve 2014. 11. 14. 18:13:17
|
|
|
|
