[mw_shl_code=css,true] <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Elektrooniline kell</title>
</head>
<style type="text/css">
*{marginaal: 0; pehmendus: 0; nimekirjastiil: puudub}
body{taustavärv: #D7154A; font-perekond: 'Microsoft Yahei'}
.demo{width: 330px; kõrgus: 100px; ääris: 3px tahke #fff; Marginaal: 200px automaat; liini kõrgus: 100px; tekstijoondamine: keskmine; värv: #fff; fondi suurus: 50px; fontikaal: 600; positsioon: suhteline; ülevoola: peidetud; }
.size{width: 100px; kõrgus: 100px; float: vasak; }
.pointer{width: 10px; kõrgus: 100px; float: vasak; }
.bottom{width: 200px; kõrgus: 100px; tekstijoondamine: keskmine; Marginaal: 0 automaatne; Värv: #fff}
#next-h{positsioon: absoluutne; laius: 100px; kõrgus: 100px; vasak: 0px; ülemine: 100px; }
#next-m{positsioon: absoluutne; laius: 100px; kõrgus: 100px; vasakul: 110px; ülemine: 100px; }
#next-s{positsioon: absoluutne; laius: 100px; kõrgus: 100px; vasakul: 220px; ülemine: 100px; }
</style>
<body>
<div class="demo">
<div id="tund" klass="suurus"></div>
<div id="next-h"></div>
<div class="pointer">:</div>
<div id="minute" klass="suurus"></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 foorum</div>
</body>
<script type="text/javascript">
Võta praegune aeg
var date=uus Date();
var hour=date.getHours();
var minute=date.getMinutes();
var second=date.getSeconds();
Hangi aja DOM, mida kuvatakse
var ohour=document.getElementById("tund");
var ominute=document.getElementById("minute");
var osecond=document.getElementById("second");
Ajaline initsialiseerimine
funktsioon init(){
ohour.innerHTML=fill(tund);
ominute.innerHTML=fill(minut);
osecond.innerHTML=fill(second);
}
init();
Hangi peidetud DOM, siin on DOM, et järgmisel korral näidata
var nhour=document.getElementById("next-h");
var nminute=document.getElementById("next-m");
var nsecond=document.getElementById("next-s");
Taimer kontrollib aja muutust
setInterval(function(){
if(second==60){
second=0;
Lisa minutiosutite arvule 1
if(minute==60){
minute=0;
Tund +1
if(tund==24){
tund=0;
}
Näidatud varjupeidukastis
nhour.innerHTML=fill(tund);
nhour++;
Kutsu ujuv funktsioon
move(nhour, ohour);
Kast tuleb samuti lähtestada
nhour.style.top="100px";
}
Näidatud varjupeidukastis
nminute.innerHTML=fill(minut);
minute++;
Kutsu ujuv funktsioon
move(nminute,ominute);
Kast tuleb samuti lähtestada
nminute.style.top="100px";
}else{
teine++;
}
nsecond.innerHTML=fill(second);
}, 1000)
Järgmisel hetkel liigub dom ülespoole
Parameeter 1: Eemaldatav kast
Parameeter 2: kast, mis lõpuks näitab aega
funktsioon move(obj,show){
var timer=setInterval(function(){
obj.style.top=getStyle(obj,"top")-1+'px';
if(getStyle(obj,"top")<=0){
clearInterval (taimer);
show.innerHTML=obj.innerHTML;
}
}, 1)
}
Kas kuulamisaeg on muutunud?
var old=0;
setInterval(function(){
if(old!=nsecond.innerHTML){
move(nsecond, osecond);
nsecond.style.top="100px";
old=nsecond.innerHTML;
}
}, 1)
Abifunktsioon atribuudi väärtuste saamiseks
function getStyle(obj,style){
var attr=window.getComputedStyle ? window.getComputedStyle(obj,null)[style]:obj.currentStyle[style];
Eemalda seadme px
attr=attr.slice(0, -2);
return parseInt(attr);
}
Kui aja pikkus on 1 bitt, lisatakse ette 0
funktsioon fill(str){
var s=str.toString();
if(s.length==1){
s='0'+s;
tagasipöördumine s;
}else{
tagasijõu;
}
}
</script>
[/</html>mw_shl_code]
|
Postitatud 14.11.2014 18:13:17
|
|
|
|
