[mw_shl_code=css,true] <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Elektronska ura</title>
</head>
<style type="text/css">
*{rob: 0; oblazinje: 0; Slog seznama: nobenih}
telo{barva ozadja: #D7154A; družina pisav: 'Microsoft Yahei'}
.demo{širina: 330px; višina: 100px; Rob: 3px trdna #fff; Rezerva: 200px auto; Višina vrstice: 100px; poravnava besedila: sredina; barva: #fff; velikost pisave: 50px; debelina pisave: 600; položaj: relativni; Prelivanje: skrito; }
.size{širina: 100px; višina: 100px; plavajoč: levo; }
.pointer{širina: 10px; višina: 100px; plavajoč: levo; }
.bottom{širina: 200px; višina: 100px; poravnava besedila: sredina; razlika: 0 avtomatskih udarcev; barva: #fff}
#next-h{pozicija: absolutna; širina: 100px; višina: 100px; levo: 0px; zgoraj: 100px; }
#next-m{pozicija: absolutna; širina: 100px; višina: 100px; levo: 110px; zgoraj: 100px; }
#next-s{položaj: absoluten; širina: 100px; višina: 100px; levo: 220px; zgoraj: 100px; }
</style>
<body>
<div class="demo">
<div id="ura" razred="velikost"></div>
<div id="next-h"></div>
<div class="kazalec">:</div>
<div id="minute" class="size"></div>
<div id="next-m"></div>
<div class="kazalec">:</div>
<div id="drugi" razred="velikost"></div>
<div id="next-s"></div>
</div>
<div class="bottom"> Forum Wusoft</div>
</body>
<tip skripte="text/javascript">
Pridobite trenutni čas
var date=new date();
var hour=date.getHours();
var minute=date.getMinutes();
var second=date.getSeconds();
Pridobite DOM časa, ki je prikazan
var ohour=document.getElementById("ura");
var ominute=document.getElementById("minute");
var osecond=document.getElementById("second");
Inicializacija časa
function init(){
ohour.innerHTML=fill(hour);
ominute.innerHTML=fill(minute);
osecond.innerHTML=fill(second);
}
init();
Pridobi skriti DOM, tukaj je DOM, da ga pokažeš naslednjič
var nhour=document.getElementById("next-h");
var nminute=document.getElementById("next-m");
var nsecond=document.getElementById("next-s");
Časovnik nadzoruje spremembo časa
setInterval(function(){
if(second==60){
drugi=0;
Dodaj 1 k številu minutnih iger
if(minute==60){
minuta=0;
Ura +1
if(ura==24){
ura=0;
}
Prikazano v škatli senčnega skrivališča
nhour.innerHTML=fill(hour);
nhour++;
Pokličimo plavajočo funkcijo
premik (nura, ura);
Tudi škatlo je treba ponastaviti
nhour.style.top="100px";
}
Prikazano v škatli senčnega skrivališča
nminute.innerHTML=fill(minute);
minuta++;
Pokličimo plavajočo funkcijo
move(nminute, ominute);
Tudi škatlo je treba ponastaviti
nminute.style.top="100px";
}else{
drugi++;
}
nsecond.innerHTML=fill(second);
}, 1000)
V naslednjem trenutku se dom premakne navzgor
Parameter 1: Škatla, ki jo je treba premakniti
Parameter 2: Okvir, ki končno pokaže čas
funkcija 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)
}
Ali se čas poslušanja spremeni?
var old=0;
setInterval(function(){
if(old!=nsecond.innerHTML){
move(nsekunda,osekunda);
nsecond.style.top="100px";
old=nsecond.innerHTML;
}
}, 1)
Pomožna funkcija za pridobitev vrednosti atributov
function getStyle(obj,style){
var attr=window.getComputedStyle ? window.getComputedStyle(obj,null)[style]:obj.currentStyle[style];
Odstrani enoto px
attr=attr.slice(0, -2);
return parseInt(attr);
}
Če je dolžina časa 1 bit, se pred to doda 0
funkcija fill(str){
var s=str.toString();
if(s.length==1){
s='0'+s;
vračilo s;
}else{
vrni moč;
}
}
</script>
[/</html>mw_shl_code]
|
Objavljeno na 14. 11. 2014 18:13:17
|
|
|
|
