[mw_shl_code=css, sant] <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Elektronisk klokke</title>
</head>
<style type="text/css">
*{margin: 0; polstring: 0; liste-stil: ingen}
kropp{bakgrunnsfarge: #D7154A; font-familie: 'Microsoft Yahei'}
.demo{bredde: 330px; høyde: 100px; Kant: 3px solid #fff; margin: 200 px auto; linjehøyde: 100px; tekst-justering: midt; farge: #fff; skriftstørrelse: 50px; skrifttypevekt: 600; Posisjon: Slektning; Overflow: skjult; }
.size{width: 100px; høyde: 100px; flyte: venstre; }
.pointer{width: 10px; høyde: 100px; flyte: venstre; }
.bottom{width: 200px; høyde: 100px; tekst-justering: midt; margin: 0 auto; farge: #fff}
#next-h{posisjon: absolutt; bredde: 100px; høyde: 100px; venstre: 0 px; Topp: 100 px; }
#next-m{posisjon: absolutt; bredde: 100px; høyde: 100px; venstre: 110px; Topp: 100 px; }
#next-s{posisjon: absolutt; bredde: 100px; høyde: 100px; venstre: 220px; Topp: 100 px; }
</style>
<body>
<div class="demo">
<div id="time" klasse="størrelse"></div>
<div id="next-h"></div>
<div class="pointer">:</div>
<div id="minutt" klasse="størrelse"></div>
<div id="next-m"></div>
<div class="pointer">:</div>
<div id="andre" klasse="størrelse"></div>
<div id="next-s"></div>
</div>
<div class="bottom"> Wusoft Forum</div>
</body>
<script type="text/javascript">
Få tak i nåværende tid
var date=ny dato();
var hour=date.getHours();
var minute=date.getMinutes();
var second=date.getSeconds();
Få DOM for tidspunktet som vises
var ohour=document.getElementById("hour");
var ominute=document.getElementById("minute");
var osecond=document.getElementById("second");
Tidsinitialisering
funksjon init(){
ohour.innerHTML=fill(hour);
ominute.innerHTML=fill(minute);
osecond.innerHTML=fill(second);
}
init();
Få den skjulte DOM-en, her er DOM-en for å vise neste gang
var nhour=document.getElementById("next-h");
var nminute=document.getElementById("next-m");
var nsecond=document.getElementById("next-s");
Timeren styrer tidsendringen
setInterval(function(){
hvis(sekund==60){
second=0;
Legg til 1 på antall minuttvisere
hvis(minutt==60){
minutt=0;
Time +1
if(hour==24){
time=0;
}
Vist i boksen til skyggeskjulestedet
nhour.innerHTML=fill(hour);
nhour++;
Kall den flytende funksjonen
flytt (nhour, ohour);
Boksen må også tilbakestilles
nhour.style.top="100px";
}
Vist i boksen til skyggeskjulestedet
nminute.innerHTML=fill(minute);
minutt++;
Kall den flytende funksjonen
move(nminute, ominute);
Boksen må også tilbakestilles
nminute.style.top="100px";
}ellers{
andre++;
}
nsecond.innerHTML=fill(second);
}, 1000)
I neste sekund beveger dommen seg oppover
Parameter 1: Boksen som skal flyttes
Parameter 2: Boksen som endelig viser tiden
funksjon 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)
}
Er det en endring i lyttetiden?
var old=0;
setInterval(function(){
if(old!=nsecond.innerHTML){
flytt(nsekund,osekund);
nsecond.style.top="100px";
old=nsecond.innerHTML;
}
}, 1)
Hjelpefunksjon for å oppnå attributtverdier
function getStyle(obj,style){
var attr=window.getComputedStyle ? window.getComputedStyle(obj,null)[style]:obj.currentStyle[style];
Fjern enheten px
attr=attr.slice(0, -2);
return parseInt(attr);
}
Hvis tidslengden er 1 bit, legges 0 til foran
funksjon fill(STR){
var s=str.toString();
if(s.length==1){
s='0'+s;
returner S;
}ellers{
Return STR;
}
}
</script>
[/</html>mw_shl_code]
|
Publisert på 14.11.2014 18:13:17
|
|
|
|
