Analog JS Uhr mit Admin

mr.o · Beitrag von **mr.o** » Di 9. Nov 2004, 09:38

Ich habe eine kleine JavaScript analog Uhr mit Administration an Contenido angepast (getestet auf Version 4.4.4 und IE 5 > + NS 4 + NS 6>).
Für die Funktion muß eine "uhr.js" im Verzeichnis /js angelegt werden.

Hier die uhr.js:

Code: Alles auswählen

ns=(document.layers);
ns6=(document.getElementById&&!document.all);
ie=(document.all);
h=3;
m=4;
s=5;
civ='1 2 3 4 5 6 7 8 9 10 11 12';
civ=civ.split(' ');
n=civ.length;
ClockHeight=UhrDN/2;
ClockWidth=UhrDN/2;
f12="<font face='Arial' style='font-size:"+textSIZE+"px;' color="+civCol+">";
e=360/n;
HandHeight=ClockHeight/4;
HandWidth=ClockWidth/4;
y=0;
x=0;
if (!ns)
document.write("<div id='disp' style='position:relative;width:50px;height:20px;text-align:center'></div>");
else
document.write("<layer name=disp top=0 left=0></layer>");
for (i=0; i < n; i++){
if (!ns)
document.write('<div id="Civ'+i+'" style="position:absolute;width:15px;height:15px;text-align:center;color:#0000dd">'+f12+civ[i]+'</font></div>');
else
document.write('<layer name="Civ'+i+'" width=15 height=15><center>'+f12+civ[i]+'</font></center></layer>');
}
for (i=0; i < n; i++){
if (!ns)
document.write('<div id="D'+i+'" style="position:absolute;width:1px;height:1px;font-size:2px"></div>');
else
document.write('<layer name="D'+i+'" width=2 height=2></layer>');
}
for (i=0; i < h; i++){
if (!ns)
document.write('<div id="H'+i+'" style="position:absolute;width:2px;height:2px;font-size:2px;background:'+hCol+'"></div>');
else
document.write('<layer name="H'+i+'" bgcolor='+hCol+' width=2 height=2></layer>');
}
for (i=0; i < m; i++){
if (!ns)
document.write('<div id="M'+i+'" style="position:absolute;width:2px;height:2px;font-size:2px;background:'+mCol+'"></div>');
else
document.write('<layer name="M'+i+'" bgcolor='+mCol+' width=2 height=2></layer>');
}
for (i=0; i < s; i++){
if (!ns)
document.write('<div id="S'+i+'" style="position:absolute;width:2px;height:2px;font-size:2px;background:'+sCol+'"></div>');
else
document.write('<layer name="S'+i+'" bgcolor='+sCol+' width=2 height=2></layer>');
}
function ClockAndAssign(){
var _d=(ns||ie)?'document.':'document.getElementById("';
var _a=(ns||ns6)?'':'all.';
var _n6r=(ns6)?'")':'';
var _s=(ns)?'':'.style';
time=new Date();
secs=time.getSeconds();
sec=-1.57+Math.PI*secs/30;
mins=time.getMinutes();
min=-1.57+Math.PI*mins/30;
hr=time.getHours();
hrs=-1.575+Math.PI*hr/6+Math.PI*parseInt(time.getMinutes())/360;
ampm=(hr>11)?textPM:textAM;
y=Top+ClockHeight+(textSIZE*1);
x=Left+ClockWidth+(textSIZE*1);
var Dsp=eval(_d+_a+"disp"+_n6r+_s);Dsp.top=y-17;Dsp.left=x-24;
for (i=0; i < s; i++){var d1=eval(_d+_a+"S"+i+_n6r+_s);d1.top=y+(i*HandHeight)*Math.sin(sec);d1.left=x+(i*HandWidth)*Math.cos(sec)}
for (i=0; i < m; i++){var d2=eval(_d+_a+"M"+i+_n6r+_s);d2.top=y+(i*HandHeight)*Math.sin(min);d2.left=x+(i*HandWidth)*Math.cos(min)}
for (i=0; i < h; i++){var d3=eval(_d+_a+"H"+i+_n6r+_s);d3.top=y+(i*HandHeight)*Math.sin(hrs);d3.left=x+(i*HandWidth)*Math.cos(hrs)}
for (i=0; i < n; i++){var d4=eval(_d+_a+"D"+i+_n6r+_s);d4.top=y+ClockHeight*Math.sin(-1.0471+i*e*Math.PI/180);d4.left=x+ClockWidth*Math.cos(-1.0471+i*e*Math.PI/180)}
for (i=0; i < n; i++){var d5=eval(_d+_a+"Civ"+i+_n6r+_s);d5.top=y-6+ClockHeight*1*Math.sin(-1.0471+i*e*Math.PI/180);d5.left=x-6+ClockWidth*1*Math.cos(-1.0471+i*e*Math.PI/180)}
setTimeout('ClockAndAssign()',100);
if (ie)disp.innerHTML='<font face=Arial style="font-size:'+AmPmSIZE+'px;" color='+ampmCol+'>'+ampm+'</font>';
if (ns){
document.disp.document.open();
document.disp.document.write('<font face=Arial  style="font-size:'+textSIZE+'px;"  color='+ampmCol+'>'+ampm+'</font>');
document.disp.document.close();
}
}
function aorp(){
if (ns6)
document.getElementById("disp").innerHTML='<font face=Arial  style="font-size:'+textSIZE+'px;" color='+ampmCol+'>'+ampm+'</font>';
setTimeout('aorp()',60000);
}
ClockAndAssign();
if (ns6)aorp();

Input:

Code: Alles auswählen

/**
 * JS analog Uhr
 *
 * Original JS Script by kurt.grigg@virgin.net
 *
 * Input
 *
 * @autor Mario Gembler <mario@lg-web.de>
 * @copyright LG-WEB
 */

echo "<table cellspacing=\"0\" cellpadding=\"10\" border=\"0\">"; 

echo "<tr><td>Uhr Durchmesser in px:</td>"; 
echo "<td><input type=\"text\" name=\"CMS_VAR[0]\" value=\"CMS_VALUE[0]\" size=\"5\" /></td></tr>"; 

echo "<tr><td>Ziffern Farbe (HEX mit #):</td>"; 
echo "<td><input type=\"text\" name=\"CMS_VAR[1]\" value=\"CMS_VALUE[1]\" size=\"5\" /></td></tr>"; 

echo "<tr><td>Zifferngröße in px:</td>"; 
echo "<td><input type=\"text\" name=\"CMS_VAR[2]\" value=\"CMS_VALUE[2]\" size=\"5\" /></td></tr>"; 

echo "<tr><td>Stundenzeiger Farbe (HEX mit #):</td>"; 
echo "<td><input type=\"text\" name=\"CMS_VAR[3]\" value=\"CMS_VALUE[3]\" size=\"5\" /></td></tr>"; 

echo "<tr><td>Minutenzeiger Farbe (HEX mit #):</td>"; 
echo "<td><input type=\"text\" name=\"CMS_VAR[4]\" value=\"CMS_VALUE[4]\" size=\"5\" /></td></tr>"; 

echo "<tr><td>Sekundenzeiger Farbe (HEX mit #):</td>"; 
echo "<td><input type=\"text\" name=\"CMS_VAR[5]\" value=\"CMS_VALUE[5]\" size=\"5\" /></td></tr>"; 

echo "<tr><td>Text AM / PM Farbe (HEX mit #):</td>"; 
echo "<td><input type=\"text\" name=\"CMS_VAR[6]\" value=\"CMS_VALUE[6]\" size=\"5\" /></td></tr>"; 

echo "<tr><td>Text AM / PM</td>"; 
echo "<td>AM: <input type=\"text\" name=\"CMS_VAR[7]\" value=\"CMS_VALUE[7]\" size=\"5\" /> PM: <input type=\"text\" name=\"CMS_VAR[8]\" value=\"CMS_VALUE[8]\" size=\"5\" /></td></tr>"; 

echo "<tr><td>Textgröße AM / PM in px:</td>"; 
echo "<td><input type=\"text\" name=\"CMS_VAR[9]\" value=\"CMS_VALUE[9]\" size=\"5\" /></td></tr>"; 

echo "<tr><td>Position links (Angabe relativ in px):</td>"; 
echo "<td><input type=\"text\" name=\"CMS_VAR[10]\" value=\"CMS_VALUE[10]\" size=\"5\" /></td></tr>"; 

echo "<tr><td>Position oben (Angabe relativ in px):</td>"; 
echo "<td><input type=\"text\" name=\"CMS_VAR[11]\" value=\"CMS_VALUE[11]\" size=\"5\" /></td></tr>"; 

echo "</table>";

Output:

Code: Alles auswählen

<?php
/**
 * JS analog Uhr
 *
 * Original JS Script by kurt.grigg@virgin.net
 *
 * Output
 *
 * @autor Mario Gembler <mario@lg-web.de>
 * @copyright LG-WEB
 */

$dimens=CMS_VALUE[0]+(CMS_VALUE[2]*2);
echo "<div style=\"position:relative; top:CMS_VALUE[11]; left:CMS_VALUE[10]; width:".$dimens."px; height:".$dimens."px; border:0px solid black\">
<script language=\"JavaScript\">
civCol='CMS_VALUE[1]';
hCol='CMS_VALUE[3]';
mCol='CMS_VALUE[4]';
sCol='CMS_VALUE[5]';
ampmCol='CMS_VALUE[6]';
textSIZE='CMS_VALUE[2]';
textAM='CMS_VALUE[7]';
textPM='CMS_VALUE[8]';
AmPmSIZE='CMS_VALUE[9]';
Left=CMS_VALUE[10];
Top=CMS_VALUE[11];
UhrDN=CMS_VALUE[0];
</script>
<script language=\"JavaScript\" src=\"js/uhr.js\">
</script>";
?>

Beitrag von **emergence** » Mi 10. Nov 2004, 13:46

kann man sich das online irgendwo ansehen ?

Karl · Beitrag von **Karl** » Mi 10. Nov 2004, 18:58

Es produziert bei mir eine weiße Seite.

Contenido 4.4.3

mr.o · Beitrag von **mr.o** » Do 11. Nov 2004, 13:11

Hier ein Link zu einer Demoseite:
Analog JS Uhr

Einstellmöglichkeiten:

Durchmesser der Uhr
Farbe und Größe der Ziffern
Farbe der Zeiger (getrennt)
Position left & top (relativ zum umgebenden Element)
Text für AM / PM angabe (in der mitte der Uhr) mit Farbe und Größe

mr.o · Beitrag von **mr.o** » Do 11. Nov 2004, 13:23

Hallo Karl,

Bitte siehe im Quellcode nach wie weit die Seite erzeugt wird.
Wenn nur ein öffnender und schließender Body Tag da ist, stimmt etwas mit den Contenido Variablen nicht.
Bitte ändere dann die Variablen im Input und Output auf andere Werte:
z.B. CMS_VAR[3000], CMS_VALUE[3000] usw.

Karl · Beitrag von **Karl** » Do 11. Nov 2004, 15:25

mr.o hat geschrieben: Wenn nur ein öffnender und schließender Body Tag da ist.

Das ist so.

Bitte ändere dann die Variablen im Input und Output auf andere Werte:
z.B. CMS_VAR[3000], CMS_VALUE[3000] usw

Das hat leider nix gebracht.