fighter-01
Jan 31, 2014
view5140
view7
0
Goto Top

Datum und Uhrzeit als Vollbildanzeige

GermanQuestionHTMLDevelopment
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=”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=”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
comment-contentCommentShareShare
Share on Facebook Share on Twitter Share on Reddit Share on Linkedin

Content-Key: 228250

Url: https://administrator.de/contentid/228250

Printed on: April 16, 2024 at 19:04 o'clock

7 Comments
Latest comment
Goto Top
Member: wiesi200
wiesi200 Jan 31, 2014 at 10:08:10 (UTC)
Goto Top
Hallo,

kann's sein das du einfach Javascript deaktiviert hast?
Member: colinardo
colinardo Jan 31, 2014, updated at Feb 02, 2014 at 16:32:21 (UTC)
Goto Top
Hallo Fighter01,
der Code oben ist und voller Fehler, vor allem wenn man von der verlinkten Seite Copy & Paste betreibt.
Probiers mal hiermit:
<!DOCTYPE html>
<html>
  <head>
    <title>Clock</title>
    <script type="text/javascript">  
      var clockDiv;
      function init(){
        clockDiv = document.getElementById('clock');  
        displayTime();
        setInterval(displayTime, 1000);
      }
      function displayTime() {
        var currentTime = new Date();
        var hours = currentTime.getHours();
        var minutes = currentTime.getMinutes();
        var seconds = currentTime.getSeconds();
        var wd = currentTime.getDay();
        var day = currentTime.getDate();
        var month = currentTime.getMonth() + 1;
        var year = currentTime.getFullYear();
        var weekdays = new Array("So","Mo","Di","Mi","Do","Fr","Sa");  
        day = (day < 10) ? "0" + day : day;  
        month = (month < 10) ? "0" + month : month;  
        hours = (hours < 10) ? "0" + hours : hours ;  
        minutes = (minutes < 10) ? "0" + minutes : minutes;  
        seconds = (seconds < 10) ? "0" + seconds : seconds;  
        clockDiv.innerHTML = '<span id="date">' + weekdays[wd] + " " + day + "." + month + "." + year + "</span><br>" + hours + ":" + minutes + ":" + seconds;  
      }
    </script>
    <style type="text/css">  
      body { background-color: #000; }
      #clock {
        font-family: Verdana, Geneva, sans-serif;
        width: 100%;
        color: white;
        font-size: 15vw;
        text-align: center;
        top: 15%;
        position:absolute;
      }
      #container {
        width: 100%;
        height: 100%;
      }
      #date {font-size: 5vw;}
    </style>
  </head>
  <body onLoad="init()">  
    <div id="container">  
      <div id="clock"></div>  
    </div>
  </body>
</html>
Grüße Uwe
Member: Fighter-01
Fighter-01 Feb 03, 2014 at 12:32:55 (UTC)
Goto Top
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

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

Gibt es dafür eine Lösung?

Grüße Fighter-01
Member: colinardo
colinardo Feb 03, 2014 updated at 13:00:02 (UTC)
Goto Top
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 ..
Member: colinardo
colinardo Feb 03, 2014 updated at 13:18:23 (UTC)
Goto Top
probier es mal mit dieser Variante mit CSS Media Querys, der Midori müsste das eigentlich kennen:
<!DOCTYPE html>
<html>
  <head>
    <title>Clock</title>
    <script type="text/javascript">  
      var clockDiv;
      var dateDiv;
      function init(){
        clockDiv = document.getElementById('clock');  
        dateDiv = document.getElementById('datum');  
        displayTime();
        setInterval(displayTime, 1000);
      }
      function displayTime() {
        var currentTime = new Date();
        var hours = currentTime.getHours();
        var minutes = currentTime.getMinutes();
        var seconds = currentTime.getSeconds();
        var wd = currentTime.getDay();
        var day = currentTime.getDate();
        var month = currentTime.getMonth() + 1;
        var year = currentTime.getFullYear();
        var weekdays = new Array("So","Mo","Di","Mi","Do","Fr","Sa");  
        day = (day < 10) ? "0" + day : day;  
        month = (month < 10) ? "0" + month : month;  
        hours = (hours < 10) ? "0" + hours : hours ;  
        minutes = (minutes < 10) ? "0" + minutes : minutes;  
        seconds = (seconds < 10) ? "0" + seconds : seconds;  
        dateDiv.innerHTML  = weekdays[wd] + " " + day + "." + month + "." + year;  
        clockDiv.innerHTML = hours + ":" + minutes + ":" + seconds;  
      }
    </script>
    <style type="text/css">  
      body { background-color: #000; }
      #clock, #datum {
        font-family: Verdana, Geneva, sans-serif;
        width: 100%;
        color: white;
        font-size: 200%;
        text-align: center;
      }
      #container {
        width: 100%;
        height: 100%;
      }
      #subcontainer {
        text-align: center;
        margin-top:30%;
      }
    @media screen and (min-width: 320px) {
      #clock { font-size: 400%; }
      #datum { font-size: 200%;}
    }

    @media screen and (min-width: 640px) {
      #clock { font-size: 600%; }
      #datum { font-size: 300%;}
    }

    @media (min-width: 1024px) {
      #clock { font-size: 1000%;}
      #datum { font-size: 500%;}
    }
    </style>
  </head>
  <body onLoad="init()">  
    <div id="container">  
      <div id="subcontainer">  
        <div id="datum"></div>  
        <div id="clock"></div>  
      </div>
    </div>
  </body>
</html>
heart1
Member: Fighter-01
Fighter-01 Feb 03, 2014 at 13:14:25 (UTC)
Goto Top
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
Member: Fighter-01
Fighter-01 Feb 03, 2014 at 13:21:57 (UTC)
Goto Top
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
GermanQuestionHTMLDevelopment
Hotly discussed
DaniEnd of Support dates for Office 2016, 2019 Apps und Productivity ServersDani - 1 Comment