|
|
Veröffentlicht am 14.11.2014 18:13:17
|
|
|
|
[mw_shl_code=css, wahr] <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Elektronische Uhr</title>
</head>
<style type="text/css">
*{Margin: 0; Polsterung: 0; Liste-Stil: Keine}
body{background-color: #D7154A; Schriftfamilie: 'Microsoft Yahei'}
.demo{width: 330px; Größe: 100px; Rand: 3 px solide #fff; Marge: 200 px Auto; Zeilenhöhe: 100px; Textausrichtung: Mitte; Farbe: #fff; Schriftgröße: 50px; Schriftstärke: 600; Position: Verwandt; Überlauf: verborgen; }
.size{width: 100px; Größe: 100px; float: links; }
.pointer{width: 10px; Größe: 100px; float: links; }
.bottom{width: 200px; Größe: 100px; Textausrichtung: Mitte; Marge: 0 Auto; Farbe: #fff}
#next-h{position: absolute; Breite: 100 px; Größe: 100px; links: 0px; Oben: 100 Pixel; }
#next-m{Position: absolut; Breite: 100 px; Größe: 100px; links: 110px; Oben: 100 Pixel; }
#next-s{position: absolut; Breite: 100 px; Größe: 100px; links: 220px; Oben: 100 Pixel; }
</style>
<body>
<div class="demo">
<div id="hour" class="size"></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="Zweite" Klasse="Größe"></div>
<div id="next-s"></div>
</div>
<div class="bottom"> Wusoft Forum</div>
</body>
<script type="text/javascript">
Erhalten Sie die aktuelle Zeit
var date=neues Date();
var hour=date.getHours();
var minute=date.getMinutes();
var second=date.getSeconds();
Erhalten Sie die Datumsdauer der angezeigten Zeit
var ohour=document.getElementById("hour");
var ominute=document.getElementById("minute");
var osecond=document.getElementById("second");
Zeitinitialisierung
Funktion init(){
ohour.innerHTML=fill(hour);
ominute.innerHTML=fill(minute);
osecond.innerHTML=fill(second);
}
init();
Hol dir den versteckten DOM, hier ist der DOM zum nächsten Mal zum Zeigen
var nhour=document.getElementById("next-h");
var nminute=document.getElementById("next-m");
var nsecond=document.getElementById("next-s");
Der Timer steuert die Zeitänderung
setInterval(function(){
if(second==60){
second=0;
Addiere 1 zur Anzahl der Minutenzeiger
if(minute==60){
Minute=0;
Stunde +1
if(hour==24){
Stunde = 0;
}
Gezeigt in der Kiste des Schattenverstecks
nhour.innerHTML=fill(hour);
nhour++;
Nennen Sie die Gleitfunktion
move(nhour,ohour);
Die Box muss außerdem zurückgesetzt werden
nhour.style.top="100px";
}
Gezeigt in der Kiste des Schattenverstecks
nminute.innerHTML=fill(minute);
Minute++;
Nennen Sie die Gleitfunktion
move(nminute, ominute);
Die Box muss außerdem zurückgesetzt werden
nminute.style.top="100px";
}else{
zweit++;
}
nsecond.innerHTML=fill(second);
}, 1000)
Im nächsten Moment bewegt sich der Dom nach oben
Parameter 1: Die zu verschiebende Box
Parameter 2: Das Feld, das schließlich die Zeit anzeigt
Funktion 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)
}
Gibt es eine Änderung der Hörzeit?
var old=0;
setInterval(function(){
if(old!=nsecond.innerHTML){
Move(nsecond,osecond);
nsecond.style.top="100px";
old=nsecond.innerHTML;
}
}, 1)
Hilfsfunktion zur Gewinnung von Attributwerten
function getStyle(obj,style){
var attr=window.getComputedStyle ? window.getComputedStyle(obj,null)[style]:obj.currentStyle[style];
Entferne die Einheits-PX
attr=attr.slice(0, -2);
return parseInt(attr);
}
Wenn die Zeit 1 Bit beträgt, wird 0 vorne hinzugefügt
Funktion fill(STR){
var s=str.toString();
if(s.length==1){
s='0'+s;
Return S;
}else{
Return STR;
}
}
</script>
[/</html>mw_shl_code]
|
Vorhergehend:CSS3 stellt Sharingan her (Animation)Nächster:Die Matrix: Die Matrix-Revolution
|
