|
|
Julkaistu 14.11.2014 18.13.17
|
|
|
|
[mw_shl_code=css,totta] <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Elektroninen kello</title>
</head>
<style type="text/css">
*{marginaali: 0; pehmustet: 0; listatyyli: ei mitään}
body{taustaväri: #D7154A; font-family: 'Microsoft Yahei'}
.demo{leveys: 330px; korkeus: 100px; reunus: 3px kiinteä #fff; marginaali: 200px automaatti; linjakorkeus: 100 px; tekstin kohdistus: keskelle; Väri: #fff; fonttikoko: 50px; fonttipaino: 600; Asema: suhteellinen; ylivuoto: piilotettu; }
.size{leveys: 100px; korkeus: 100px; float: vasen; }
.pointer{width: 10px; korkeus: 100px; float: vasen; }
.bottom{leveys: 200px; korkeus: 100px; tekstin kohdistus: keskelle; marginaali: 0 automaattista; Väri: #fff}
#next-h{asema: absoluuttinen; leveys: 100px; korkeus: 100px; vasen: 0px; Yläosa: 100px; }
#next-m{asema: absoluuttinen; leveys: 100px; korkeus: 100px; vasen: 110px; Yläosa: 100px; }
#next-s{asema: absoluuttinen; leveys: 100px; korkeus: 100px; vasen: 220px; Yläosa: 100px; }
</style>
<body>
<div class="demo">
<div id="tunti" luokka="koko"></div>
<div id="next-h"></div>
<div class="osoitin">:</div>
<div id="minute" class="size"></div>
<div id="next-m"></div>
<div class="osoitin">:</div>
<div id="second" class="size"></div>
<div id="next-s"></div>
</div>
<div class="bottom"> Wusoft Forum</div>
</body>
<script type="text/javascript">
Hanki nykyinen aika
var date=uusi Date();
var hour=date.getHours();
var minute=date.getMinutes();
var second=date.getSeconds();
Saat DOM-kuvan ajasta, joka näytetään
var ohour=document.getElementById("tunti");
var ominute=document.getElementById("minuutti");
var osecond=document.getElementById("second");
Ajan alustus
funktio init(){
ohour.innerHTML=fill(tunti);
ominute.innerHTML=fill(minuutti);
osecond.innerHTML=fill(second);
}
init();
Hanki piilotettu DOM, tässä DOM näyttää seuraavalla kerralla
var nhour=document.getElementById("next-h");
var nminute=document.getElementById("next-m");
var nsecond=document.getElementById("next-s");
Ajastin ohjaa ajan muutosta
setInterval(function(){
if(second==60){
sekunti=0;
Lisää 1 minuuttiviisarien määrään
if(minute==60){
minuutti=0;
Tunti +1
if(hour==24){
tunti=0;
}
Näkyy varjopiilon laatikossa
nhour.innerHTML=fill(tuntia);
nhour++;
Kutsutaan kelluvaa funktiota
move(nhour, ohour);
Laatikko täytyy myös nollata
nhour.style.top="100px";
}
Näkyy varjopiilon laatikossa
nminute.innerHTML=fill(minuutti);
minuutti++;
Kutsutaan kelluvaa funktiota
liiku (nminuutti, ominuutti);
Laatikko täytyy myös nollata
nminute.style.top="100px";
}else{
toinen++;
}
nsecond.innerHTML=fill(second);
}, 1000)
Seuraavassa hetkessä dom liikkuu ylöspäin
Parametri 1: Siirrettävä laatikko
Parametri 2: Laatikko, joka lopulta näyttää ajan
funktio move(obj,show){
var timer=setInterval(function(){
obj.style.top=getStyle(obj,"top")-1+'px';
if(getStyle(obj,"top")<=0){
clearInterval (ajastin);
show.innerHTML=obj.innerHTML;
}
}, 1)
}
Onko kuunteluaika muuttunut?
var old=0;
setInterval(function(){
if(old!=nsecond.innerHTML){
move(nsecond, osecond);
nsecond.style.top="100px";
old=nsecond.innerHTML;
}
}, 1)
Apufunktio attribuuttiarvojen saamiseksi
function getStyle(obj,style){
var attr=window.getComputedStyle ? window.getComputedStyle(obj,null)[style]:obj.currentStyle[style];
Poista yksikkö px
attr=attr.slice(0, -2);
return parseInt(attr);
}
Jos ajan pituus on 1 bitti, eteen lisätään 0
funktio fill(str){
var s=str.toString();
if(s.length==1){
s='0'+s;
palautus s;
}else{
paluuvoima;
}
}
</script>
[/</html>mw_shl_code]
|
Edellinen:CSS3:n tekeminen Sharingan (animaatio)Seuraava:Matrix: Matriisivallankumous
|
