|
|
Geplaatst op 14-11-2014 18:13:17
|
|
|
|
[mw_shl_code=css, waar] <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Elektronische klok</title>
</head>
<stijltype="text/css">
*{marge: 0; vulling: 0; lijststijl: geen}
body{background-color: #D7154A; lettertypefamilie: 'Microsoft Yahei'}
.demo{breedte: 330px; Hoogte: 100px; rand: 3px solide #fff; marge: 200px auto; lijnhoogte: 100px; tekst-align: center; kleur: #fff; lettergrootte: 50px; lettertypegewicht: 600; Positie: Relatief; Overflow: verborgen; }
.size{breedte: 100px; Hoogte: 100px; float: links; }
.pointer{breedte: 10px; Hoogte: 100px; float: links; }
.bottom{breedte: 200px; Hoogte: 100px; tekst-align: center; Marge: 0 auto; kleur: #fff}
#next-h{positie: absoluut; Breedte: 100px; Hoogte: 100px; links: 0px; top: 100px; }
#next-m{positie: absoluut; Breedte: 100px; Hoogte: 100px; links: 110px; top: 100px; }
#next-s{positie: absoluut; Breedte: 100px; Hoogte: 100px; links: 220px; top: 100px; }
</style>
<body>
<div class="demo">
<div id="hour" class="size"></div>
<div id="next-h"></div>
<div class="pointer">:</div>
<div id="minuut" 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 Forum</div>
</body>
<script type="text/javascript">
Haal de huidige tijd
var date=nieuwe Date();
var hour=date.getHours();
var minute=date.getMinutes();
var second=date.getSeconds();
Krijg de DOM van het tijdstip dat wordt weergegeven
var ohour=document.getElementById("hour");
var ominute=document.getElementById("minute");
var osecond=document.getElementById("second");
Tijdinitialisatie
functie init(){
ohour.innerHTML=fill(hour);
ominute.innerHTML=fill(minute);
osecond.innerHTML=fill(second);
}
init();
Haal de verborgen DOM, hier is de DOM om de volgende keer te laten zien
var nhour=document.getElementById("next-h");
var nminute=document.getElementById("next-m");
var nsecond=document.getElementById("next-s");
De timer regelt de tijdsverandering
setInterval(function(){
als(second==60){
second=0;
Tel 1 op bij het aantal minutenwijzers
als(minuut==60){
minuut=0;
Uur +1
if(uur==24){
uur=0;
}
Getoond in de doos van de schaduwschuilplaats
nhour.innerHTML=fill(hour);
nhour++;
Noem de floatingfunctie
move(nhour,ohour);
De doos moet ook worden gereset.
nhour.style.top="100px";
}
Getoond in de doos van de schaduwschuilplaats
nminute.innerHTML=vul(minuut);
minuut++;
Noem de floatingfunctie
move(nminute,ominute);
De doos moet ook worden gereset.
nminute.style.top="100px";
}anders{
second++;
}
nsecond.innerHTML=fill(second);
}, 1000)
Het volgende moment beweegt de dom omhoog
Parameter 1: De doos die verplaatst moet worden
Parameter 2: Het vakje dat eindelijk de tijd toont
functie 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)
}
Is er een verandering in de luistertijd?
var old=0;
setInterval(function(){
if(old!=nsecond.innerHTML){
move(nsecond,osecond);
nsecond.style.top="100px";
old=nsecond.innerHTML;
}
}, 1)
Hulpfunctie om attribuutwaarden te verkrijgen
function getStyle(obj,style){
var attr=window.getComputedStyle ? window.getComputedStyle(obj,null)[style]:obj.currentStyle[style];
Verwijder de unit px
attr=attr.slice(0, -2);
return parseInt(attr);
}
Als de tijdsduur 1 bit is, wordt 0 eraan toegevoegd
functie fill(str){
var s=str.toString();
als(s.length==1){
s='0'+s;
Retour S;
}anders{
Return str;
}
}
</script>
[/</html>mw_shl_code]
|
Vorig:CSS3 Sharingan maken (Animatie)Volgend:De Matrix: De Matrixrevolutie
|
