Tipps und Tricks » kleine webmaster FAQ

ID #1817

Digitaluhr: verschieben von Hintergrundbildern mittels JavaScript (demo)

Hallo,

hat man viele Bilder zum Beispiel für diese Uhr, müssen die einzeln vorgeladen werden, was leider nicht immer funktioniert. Daher bietet es sich an, nur ein Hintergrundbild zu gestalten und es entsprechend zu verschieben.

In JavaScript verschiebt man die Position eines Hintergrundbildes mit style.backgroundPosition:

document.getElementById("target").style.backgroundPosition="10px 50px";

 

Für die Digitaluhr wurde nur ein Hintergrundbild verwendet:

ziffern

 

der komplette Code:

<html>
<head>
<title>Demo Uhr</title>

<style type="text/css">
#uhr{width:120px;height:28px;background-color:#000;border:3px inset #000;}
#uhr div{height:23px;}
.ziffer{margin-top:3px;width:16px;background-image:url("./ziffern0-9.png");background-repeat:no-repeat;float:left;}
.trenner{margin-top:1px;padding-left:2px;width:8px;font-size:20px;font-family:monospace;float:left;background-color:#000;color:#fff;}
#oben{margin-top:1px;border-top:1px solid #333;}
</style>
<script type="text/javascript">//<!--
var sprung=26;  //Abstand der Ziffern zueinander
function uhr(){
var datum=new Date();
var stunden =datum.getHours();
var minuten=datum.getMinutes();
var sekunden=datum.getSeconds();

setZiffer(sekunden,"s");
setZiffer(minuten,"m");
setZiffer(stunden,"h");


}

function setZiffer(zeit,ziel){
if(zeit<10){document.getElementById(ziel+"0").style.backgroundPosition="0 -"+(zeit*sprung)+"px";
document.getElementById(ziel+"1").style.backgroundPosition="0 0"; }
else{document.getElementById(ziel+"1").style.backgroundPosition="0 -"+((Math.floor(zeit/10))*sprung)+"px";
var sekf=zeit/10;var seki=Math.floor(zeit/10); zeit=(sekf-seki)*10;
document.getElementById(ziel+"0").style.backgroundPosition="0 -"+(zeit*sprung)+"px";}



}
window.onload=setInterval("uhr()",1000);
//-->
</script>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000" >
<div id="uhr">
<div id="oben">
<div id="h1" class="ziffer" style="background-position:0 28px;"></div>
<div id="h0" class="ziffer" style="background-position:0 28px;"></div><div id="t1" class="trenner">&middot;<br></div>
<div id="m1" class="ziffer" style="background-position:0 28px;"></div>
<div id="m0" class="ziffer" style="background-position:0 28px;"></div><div id="t2" class="trenner">&middot;<br></div>
<div id="s1" class="ziffer" style="background-position:0 28px;"></div>
<div id="s0" class="ziffer" style="background-position:0 28px;"></div>
</div>

</div><br />
<a href="https://webmaster.testberichte.minipipes.de">Demo von minipipes.de</a>
</body>
</html>
.
.
 

Tags: demo, Digital, JavaScript, Spiel, Uhr, webmaster

Verwandte Artikel:

Letzte Änderung des Tests: 2015-06-15 16:27
Autor: pipe

Leser: 3528 (2.45 pro Tag )


Revision: 1.0

Artikel bewerten

bisher bewertet
3.47 (36 ×)

1 2 3 4 5

Kommentar schreiben


Spam Schutz

..