Top-Themen

Aktuelle Themen (A bis Z)

Administrator.de FeedbackApache ServerAppleAssemblerAudioAusbildungAuslandBackupBasicBatch & ShellBenchmarksBibliotheken & ToolkitsBlogsCloud-DiensteClusterCMSCPU, RAM, MainboardsCSSC und C++DatenbankenDatenschutzDebianDigitiales FernsehenDNSDrucker und ScannerDSL, VDSLE-BooksE-BusinessE-MailEntwicklungErkennung und -AbwehrExchange ServerFestplatten, SSD, RaidFirewallFlatratesGoogle AndroidGrafikGrafikkarten & MonitoreGroupwareHardwareHosting & HousingHTMLHumor (lol)Hyper-VIconsIDE & EditorenInformationsdiensteInstallationInstant MessagingInternetInternet DomäneniOSISDN & AnaloganschlüsseiTunesJavaJavaScriptKiXtartKVMLAN, WAN, WirelessLinuxLinux DesktopLinux NetzwerkLinux ToolsLinux UserverwaltungLizenzierungMac OS XMicrosoftMicrosoft OfficeMikroTik RouterOSMonitoringMultimediaMultimedia & ZubehörNetzwerkeNetzwerkgrundlagenNetzwerkmanagementNetzwerkprotokolleNotebook & ZubehörNovell NetwareOff TopicOpenOffice, LibreOfficeOutlook & MailPapierkorbPascal und DelphiPeripheriegerätePerlPHPPythonRechtliche FragenRedHat, CentOS, FedoraRouter & RoutingSambaSAN, NAS, DASSchriftartenSchulung & TrainingSEOServerServer-HardwareSicherheitSicherheits-ToolsSicherheitsgrundlagenSolarisSonstige SystemeSoziale NetzwerkeSpeicherkartenStudentenjobs & PraktikumSuche ProjektpartnerSuseSwitche und HubsTipps & TricksTK-Netze & GeräteUbuntuUMTS, EDGE & GPRSUtilitiesVB for ApplicationsVerschlüsselung & ZertifikateVideo & StreamingViren und TrojanerVirtualisierungVisual StudioVmwareVoice over IPWebbrowserWebentwicklungWeiterbildungWindows 7Windows 8Windows 10Windows InstallationWindows MobileWindows NetzwerkWindows ServerWindows SystemdateienWindows ToolsWindows UpdateWindows UserverwaltungWindows VistaWindows XPXenserverXMLZusammenarbeit

Frage Entwicklung HTML

Datum und Uhrzeit als Vollbildanzeige

Mitglied: Fighter-01

Fighter-01 (Level 1) - Jetzt verbinden

31.01.2014 um 09:07 Uhr, 2662 Aufrufe, 7 Kommentare, 1 Danke

Hallo an die Experten.

Ich versuche eine Webseite zu erstellen, auf der das Datum und die Uhrzeit in Vollbild dargestellt werden soll.
Die Seite soll voll skalierbar sein, da als Anzeigegeräte alles zwischen 7 und 24 Zoll möglich ist.

Ich habe auch schon einen passenden Quellcode gefunden, doch leider funktioniert dieser nicht richtig und gibt mir nur einen schwarzen Hintergrund aus.

Vielleicht kann jemand auf die schnelle den Fehler finden. Die Anzeige "eindeutschen" bekomme ich wahrscheinlich alleine hin.

Der Code stammt von der Seite: http://qassoom.me/techie/2012/12/09/raspberry-pi-digital-clock/

<head>
<style>
<!–
.styling{
background-color:black;
color:white;
font: bold 50px Lucida Console;
padding: 3px;
}
–>
</style>
</head>
<body bgcolor = black>
<table width=100% height=100%>
<tr>
<td style=”text-align: center; vertical-align: middle;”>
<span id=”digitalclock”></span>
<script>
LCD Clock script- by javascriptkit.com
Visit JavaScript Kit (http://javascriptkit.com) for script
Credit must stay intact for use
var alternate=0
var standardbrowser=!document.all&&!document.getElementById
if (standardbrowser)
document.write(‘<form name=”tick”><input type=”text” name=”tock” size=”11″></form>’)
function show(){
if (!standardbrowser)
var clockobj=document.getElementById? document.getElementById(“digitalclock”) : document.all.digitalclock
var Digital=new Date()
var date=Digital.getDate()
var year=Digital.getFullYear()
var monthn = new Array(12)
monthn[0]=”JAN”;
monthn[1]=”FEB”;
monthn[2]=”MAR”;
monthn[3]=”APR”;
monthn[4]=”MAY”;
monthn[5]=”JUN”;
monthn[6]=”JUL”;
monthn[7]=”AUG”;
monthn[8]=”SEP”;
monthn[9]=”OCT”;
monthn[10]=”NOV”;
monthn[11]=”DEC”;
var month=monthn[Digital.getMonth()]
var weekday=new Array(7);
weekday[0]=”SUN”;
weekday[1]=”MON”;
weekday[2]=”TUE”;
weekday[3]=”WED”;
weekday[4]=”THU”;
weekday[5]=”FRI”;
weekday[6]=”SAT”;
var day=weekday[Digital.getDay()]
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var seconds=Digital.getSeconds()
var dn=”AM”
if (hours==12) dn=”PM”
if (hours>12){
dn=”PM”
hours=hours-12
}
if (hours==0) hours=12
if (hours.toString().length==1)
//hours=”0″+hours
if (minutes<=9)
minutes=”0″+minutes
if (seconds<=9)
seconds=”0″+seconds
if (standardbrowser){
if (alternate==0)
document.tick.tock.value=hours+” : “+minutes+” “+dn
else
document.tick.tock.value=hours+” “+minutes+” “+dn
}
else{
if (alternate==0)
clockobj.innerHTML=”<b style=’font-size:120′>” + day + “</b> ” +”<b style=’font-size:50′>” + month + “</b>” + ” <b style=’font-size:120px’>” + date + “</b>” + “&emsp;” + “<b style=’font-size:60px’>” + year +”</b> <br>”
+”<b style=’font-size:300px’>”+hours+”</b>”+” <sup style=’font-size:40px’>”+dn+”</sup> <b style=’font-size:200px’>”+minutes+”</b><sup> : </sup>”+”<b style=’font-size:125px’>” + seconds+”</b>”
else
clockobj.innerHTML=”<b style=’font-size:120′>” + day + “</b> ” + “<b style=’font-size:50′>” + month + “</b>” + ” <b style=’font-size:120px’>” + date + “</b>” + “&emsp;” + “<b style=’font-size:60px’>” + year +”</b> <br>”
+”<b style=’font-size:300px’>”+hours+”</b>”+” <sup style=’font-size:40px’>”+dn+”</sup> <b style=’font-size:200px’>”+minutes+”</b><sup> : </sup>”+”<b style=’font-size:125px’>” + seconds+”</b>”
}
alternate=(alternate==0)? 1 : 0
setTimeout(“show()”,1000)
}
window.onload=show
</script>
</td>
</tr>
</table>
</body>
</html>

soll am Ende so aussehen (nur eben in deutsch und 24 h): 20d1e9a9d04bc2a8b7312fbe79e61762 - Klicke auf das Bild, um es zu vergrößern
Mitglied: wiesi200
31.01.2014 um 11:08 Uhr
Hallo,

kann's sein das du einfach Javascript deaktiviert hast?
Bitte warten ..
Mitglied: colinardo
31.01.2014, aktualisiert 02.02.2014
Hallo Fighter01,
der Code oben ist und voller Fehler, vor allem wenn man von der verlinkten Seite Copy & Paste betreibt.
Probiers mal hiermit:
01.
<!DOCTYPE html> 
02.
<html> 
03.
  <head> 
04.
    <title>Clock</title> 
05.
    <script type="text/javascript"> 
06.
      var clockDiv; 
07.
      function init(){ 
08.
        clockDiv = document.getElementById('clock'); 
09.
        displayTime(); 
10.
        setInterval(displayTime, 1000); 
11.
12.
      function displayTime() { 
13.
        var currentTime = new Date(); 
14.
        var hours = currentTime.getHours(); 
15.
        var minutes = currentTime.getMinutes(); 
16.
        var seconds = currentTime.getSeconds(); 
17.
        var wd = currentTime.getDay(); 
18.
        var day = currentTime.getDate(); 
19.
        var month = currentTime.getMonth() + 1; 
20.
        var year = currentTime.getFullYear(); 
21.
        var weekdays = new Array("So","Mo","Di","Mi","Do","Fr","Sa"); 
22.
        day = (day < 10) ? "0" + day : day; 
23.
        month = (month < 10) ? "0" + month : month; 
24.
        hours = (hours < 10) ? "0" + hours : hours ; 
25.
        minutes = (minutes < 10) ? "0" + minutes : minutes; 
26.
        seconds = (seconds < 10) ? "0" + seconds : seconds; 
27.
        clockDiv.innerHTML = '<span id="date">' + weekdays[wd] + " " + day + "." + month + "." + year + "</span><br>" + hours + ":" + minutes + ":" + seconds; 
28.
29.
    </script> 
30.
    <style type="text/css"> 
31.
      body { background-color: #000; } 
32.
      #clock { 
33.
        font-family: Verdana, Geneva, sans-serif; 
34.
        width: 100%; 
35.
        color: white; 
36.
        font-size: 15vw; 
37.
        text-align: center; 
38.
        top: 15%; 
39.
        position:absolute; 
40.
41.
      #container { 
42.
        width: 100%; 
43.
        height: 100%; 
44.
45.
      #date {font-size: 5vw;} 
46.
    </style> 
47.
  </head> 
48.
  <body onLoad="init()"> 
49.
    <div id="container"> 
50.
      <div id="clock"></div> 
51.
    </div> 
52.
  </body> 
53.
</html>
Grüße Uwe
Bitte warten ..
Mitglied: Fighter-01
03.02.2014 um 13:32 Uhr
Hallo Uwe,

vielen dank für die schnelle Antwort und die erzeugte Seite.
Auf meinem Windows-Rechner sieht diese auch super aus, wenn ich sie jedoch auf den Raspberry übertrage und unter Midori starte, sieht sie jedoch so aus:

643277b528f6d4840ff42b4d2207b508 - Klicke auf das Bild, um es zu vergrößern

Java ist installiert und gestartet.
Die Darstellung ist auf Vollbild eingestellt.

Gibt es dafür eine Lösung?

Grüße Fighter-01
Bitte warten ..
Mitglied: colinardo
03.02.2014, aktualisiert um 14:00 Uhr
dann unterstützt der Browser noch nicht die neuen Einheiten wie "vw" für View-Width
dann musst du halt mit Prozentwerten in den CSS-Styles für die font-size arbeiten, oder mit CSS Media-Querys. Mache dir noch ein Beispiel dazu ..
Bitte warten ..
Mitglied: colinardo
03.02.2014, aktualisiert um 14:18 Uhr
probier es mal mit dieser Variante mit CSS Media Querys, der Midori müsste das eigentlich kennen:
01.
<!DOCTYPE html> 
02.
<html> 
03.
  <head> 
04.
    <title>Clock</title> 
05.
    <script type="text/javascript"> 
06.
      var clockDiv; 
07.
      var dateDiv; 
08.
      function init(){ 
09.
        clockDiv = document.getElementById('clock'); 
10.
        dateDiv = document.getElementById('datum'); 
11.
        displayTime(); 
12.
        setInterval(displayTime, 1000); 
13.
14.
      function displayTime() { 
15.
        var currentTime = new Date(); 
16.
        var hours = currentTime.getHours(); 
17.
        var minutes = currentTime.getMinutes(); 
18.
        var seconds = currentTime.getSeconds(); 
19.
        var wd = currentTime.getDay(); 
20.
        var day = currentTime.getDate(); 
21.
        var month = currentTime.getMonth() + 1; 
22.
        var year = currentTime.getFullYear(); 
23.
        var weekdays = new Array("So","Mo","Di","Mi","Do","Fr","Sa"); 
24.
        day = (day < 10) ? "0" + day : day; 
25.
        month = (month < 10) ? "0" + month : month; 
26.
        hours = (hours < 10) ? "0" + hours : hours ; 
27.
        minutes = (minutes < 10) ? "0" + minutes : minutes; 
28.
        seconds = (seconds < 10) ? "0" + seconds : seconds; 
29.
        dateDiv.innerHTML  = weekdays[wd] + " " + day + "." + month + "." + year; 
30.
        clockDiv.innerHTML = hours + ":" + minutes + ":" + seconds; 
31.
32.
    </script> 
33.
    <style type="text/css"> 
34.
      body { background-color: #000; } 
35.
      #clock, #datum { 
36.
        font-family: Verdana, Geneva, sans-serif; 
37.
        width: 100%; 
38.
        color: white; 
39.
        font-size: 200%; 
40.
        text-align: center; 
41.
42.
      #container { 
43.
        width: 100%; 
44.
        height: 100%; 
45.
46.
      #subcontainer { 
47.
        text-align: center; 
48.
        margin-top:30%; 
49.
50.
    @media screen and (min-width: 320px) { 
51.
      #clock { font-size: 400%; } 
52.
      #datum { font-size: 200%;} 
53.
54.
 
55.
    @media screen and (min-width: 640px) { 
56.
      #clock { font-size: 600%; } 
57.
      #datum { font-size: 300%;} 
58.
59.
 
60.
    @media (min-width: 1024px) { 
61.
      #clock { font-size: 1000%;} 
62.
      #datum { font-size: 500%;} 
63.
64.
    </style> 
65.
  </head> 
66.
  <body onLoad="init()"> 
67.
    <div id="container"> 
68.
      <div id="subcontainer"> 
69.
        <div id="datum"></div> 
70.
        <div id="clock"></div> 
71.
      </div> 
72.
    </div> 
73.
  </body> 
74.
</html>
Bitte warten ..
Mitglied: Fighter-01
03.02.2014 um 14:14 Uhr
Ok, die Änderung auf Prozent bei front-size bei #clock wird für beide Darstellungsteile übernommen, jetzt ist die Uhrzeit immer kleiner als das Datum.
Die Eingaben unter #date werden ignoriert.

Mfg
Bitte warten ..
Mitglied: Fighter-01
03.02.2014 um 14:21 Uhr
War gerade noch am Ändern der original Lösung.

Das neue Script funktioniert erst einmal auf dem Midori Browser.
Ich werde mal die verschiedenen Monitore testen und dann ein Statement abgeben.

Vielen Dank für die Hilfe bisher, funktioniert super hier.

Fighter-01
Bitte warten ..
Ähnliche Inhalte
Batch & Shell
In Html-Datei per Batchdatei das Datum und die Uhrzeit eintragen
gelöst Frage von HakiegoldBatch & Shell2 Kommentare

Ich habe ein kleines Problem. Ich importiere aus dem Internet per Batch alle 2 Minuten eine html-Datei mit Kursdaten. ...

Batch & Shell
Windows 10 Batch für Datum und Uhrzeit setzen
gelöst Frage von zeroblue2005Batch & Shell18 Kommentare

Hallo Zusammen, habe hier ein Laptop von Medion,, wo die Bios fest verlötet ist. Fragt mich bitte nicht was ...

Microsoft Office
Excelfunktion Automatisches Eintragen von Datum und Uhrzeit bei ausgefüllter Zelle
gelöst Frage von ScrisesMicrosoft Office3 Kommentare

Hallo Excel-Götter, ich kämpfe gerade mit folgendem Problem. Ich habe eine Software, welche mir Messwerte in eine Excel-Liste überträgt. ...

Switche und Hubs
HP Switch behält Datum und Uhrzeit nicht nach Reboot
gelöst Frage von TiTuxSwitche und Hubs7 Kommentare

Hallo, ich habe einen HP ProCurve 2530 Switch. Ich habe lokal die Uhrzeit und das Datum eingestellt. Anschließend wurde ...

Neue Wissensbeiträge
Linux

Meltdown und Spectre: Linux Update

Information von Frank vor 14 StundenLinux

Meltdown (Variante 3 des Prozessorfehlers) Der Kernel 4.14.13 mit den Page-Table-Isolation-Code (PTI) ist nun für Fedora freigegeben worden. Er ...

Tipps & Tricks

Solutio Charly Updater Fehlermeldung: Das Abgleichen der Dateien in -Pfad- mit dem Datenobject ist fehlgeschlagen

Tipp von StefanKittel vor 1 TagTipps & Tricks

Hallo, hier einmal als Tipp für alle unter Euch die mit der Zahnarztabrechnungssoftware Charly von Solutio zu tun haben. ...

Sicherheit

Meltdown und Spectre: Wir brauchen eine "Abwrackprämie", die die CPU-Hersteller bezahlen

Information von Frank vor 1 TagSicherheit12 Kommentare

Zum aktuellen Thema Meltdown und Spectre: Ich wünsche mir von den CPU-Herstellern wie Intel, AMD oder ARM eine Art ...

Sicherheit

Meltdown und Spectre: Realitätscheck

Information von Frank vor 1 TagSicherheit9 Kommentare

Die unangenehme Realität Der Prozessorfehler mit seinen Varianten Meltdown und Spectre ist seit Juni 2017 bekannt. Trotzdem sind immer ...

Heiß diskutierte Inhalte
Sicherheit
Meltdown und Spectre: Die machen uns alle was vor
Information von FrankSicherheit25 Kommentare

Aktuell sieht es in den Medien so aus, als hätten die Hersteller wie Intel, Microsoft und Co den aktuellen ...

Netzwerke
Packet loss bei "InternetLeitungsvollauslastung"
gelöst Frage von Freak-On-SiliconNetzwerke17 Kommentare

Servus; Ja der Titel klingt komisch, is aber so. Wenn die Internetleitung voll ausgelastet ist, hab ich extreme packet ...

Ubuntu
Ubuntu - Starter für nicht vertrauenswürdige Anwendungen
Frage von adm2015Ubuntu17 Kommentare

Hallo zusammen, Ich verwende derzeit die Ubuntu Versionen 17.10 bzw. im Test 18.04. Ich habe mehrere .desktop Dateien in ...

Windows 10
Automatische daten kopieren, USB zu USB unter Win10 im Hintergrund
Frage von DerEisigeWindows 1016 Kommentare

Hallo Leute, ich bin auf der Suche nach einem Skript, dass von einem USB Stick automatisch nach dem einstecken ...