[mw_shl_code=css,true] <!DOCTYPE html>
<html lang="lt">
<head>
<meta charset="UTF-8">
<title>Elektroninis laikrodis</title>
</head>
<style type="text/css">
*{paraštė: 0; paminkštinimas: 0; sąrašo stilius: nėra}
body{fono spalva: #D7154A; font-family: 'Microsoft Yahei'}
.demo{plotis: 330px; aukštis: 100px; kraštinė: 3px vientisa #fff; paraštė: 200px automatinis; linijos aukštis: 100px; text-align: centre; spalva: #fff; šrifto dydis: 50px; šrifto svoris: 600; pareigos: giminaitis; perpildymas: paslėptas; }
.size{plotis: 100px; aukštis: 100px; plūdė: kairė; }
.pointer{plotis: 10px; aukštis: 100px; plūdė: kairė; }
.bottom{plotis: 200px; aukštis: 100px; text-align: centre; paraštė: 0 automatinis; Spalva: #fff}
#next-h{padėtis: absoliutus; plotis: 100px; aukštis: 100px; kairėje: 0px; viršuje: 100px; }
#next-m{padėtis: absoliutus; plotis: 100px; aukštis: 100px; kairėje: 110px; viršuje: 100px; }
#next-s{padėtis: absoliutus; plotis: 100px; aukštis: 100px; kairėje: 220px; viršuje: 100px; }
</style>
<body>
<div class="demo">
<div id="valanda" klasė="dydis"></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 forumas</div>
</body>
<script type="text/javascript">
Gauti dabartinį laiką
var date=nauja data();
var hour=date.getHours();
var minute=date.getMinutes();
var second=date.getSeconds();
Gaukite rodomo laiko DOM
var ohour=document.getElementById("valanda");
var ominute=document.getElementById("minutė");
var osecond=document.getElementById("second");
Laiko inicijavimas
funkcija init(){
ohour.innerHTML=užpildyti(valanda);
ominute.innerHTML=užpildyti(minutė);
osecond.innerHTML=fill(antra);
}
init();
Gaukite paslėptą DOM, čia DOM turi parodyti kitą kartą
var nhour=document.getElementById("next-h");
var nminute=document.getElementById("next-m");
var nsecond=document.getElementById("next-s");
Laikmatis kontroliuoja laiko pokyčius
setInterval(function(){
if(second==60){
sekundė = 0;
Pridėkite 1 prie minučių padalinimų skaičiaus
if(minutė==60){
minutė = 0;
Valanda +1
if(valanda==24){
valanda = 0;
}
Rodoma šešėlio slėpimo laukelyje
nhour.innerHTML=užpildyti(valanda);
nvalanda++;
Iškvieskite slankiąją funkciją
move(nhour,ohour);
Dėžutę taip pat reikia nustatyti iš naujo
nhour.style.top="100px";
}
Rodoma šešėlio slėpimo laukelyje
nminute.innerHTML=užpildyti(minutė);
minutė++;
Iškvieskite slankiąją funkciją
move(nminute,ominute);
Dėžutę taip pat reikia nustatyti iš naujo
nminute.style.top="100px";
}else{
antras++;
}
nsecond.innerHTML=fill(antra);
}, 1000)
Kitą sekundę domas juda aukštyn
1 parametras: perkeltinas laukas
2 parametras: langelis, kuriame pagaliau rodomas laikas
funkcija perkelti (obj, rodyti){
var timer=setInterval(function(){
obj.style.top=getStyle(obj,"top")-1+'px';
if(getStyle(obj,"top")<=0){
clearInterval(laikmatis);
show.innerHTML=obj.innerHTML;
}
}, 1)
}
Ar pasikeitė klausymosi laikas?
var senas=0;
setInterval(function(){
if(old!=nsecond.innerHTML){
move(nsecond,osecond);
nsecond.style.top="100px";
old=nsecond.innerHTML;
}
}, 1)
Pagalbinė funkcija atributų reikšmėms gauti
funkcija getStyle(obj,stilius){
var attr=window.getComputedStyle ? window.getComputedStyle(obj,null)[stilius]:obj.currentStyle[stilius];
Nuimkite įrenginį px
attr=attr.slice(0, -2);
return parseInt(attr);
}
Jei laiko trukmė yra 1 bitas, priekyje pridedama 0
funkcija fill(str){
var s=str.toString();
if(s.length==1){
s='0'+s;
grąžinti s;
}else{
grąžinti str;
}
}
</script>
[/</html>mw_shl_code]
|
Paskelbta 2014-11-14 18:13:17
|
|
|
|
