TIPS
by
NETtMAN

Widget - Countdown - Tage - Zaehler

Am
Ist die `Venus` in . . . der Nähe der Erde und daher sehr deutlich zu sehen.
Bis dahin sind
es nur noch
 

Das versprochene Widget ist da !

Damit kann man den Lesern eine kleine extra Freude bereiten. Nachdem Sie Euren Eintrag ( wenn Ihr etwas eintragen wollt, muss nicht ) gesehen haben, wächst sicher die Neugier wegen der Worte : ,"Ein anderes Datum...", auch Mal einen Eintrag zu wagen. Kostet ja nichts. Und - irgendein herbeigesehntes Datum hat doch bestimmt jeder.

Das berechnen der TAGE BIS geschieht durch ein Javascript. Alle Teile des Scriptes, HTML´s und Style dürfen gern verändert und angepasst werden. Wie man sieht, ist auch kein LINK zu diesem Blog angelegt. Aber wäre natürlich nett, wenn Ihr das freiwillig hinzufügt.

Der Beispiel - Eintrag kann natürlich angepasst werden im HTML - CODE weiter unten. Falls kein Eintrag gewünscht ist, einfach irgendein abgelaufenes Datum einsetzen. Dadurch wird das Widget automatisch den nächsten " Sylvester " anzeigen. Und wenn der abgelaufen ist, wird automatisch " Sylvester " im kommendem Jahr angezeigt. Mit dieser Methode ist auch gesichert, das das Widget in jedem Fall korrekt weiterläuft, falls Euer Ereignis vorüber ist, Ihr aber keine Aktualisierung am Blog vorgenommen habt. Dann springt es automatisch um auf den nächsten " Sylvester ".

So kommen wir denn also zur Sache. Der " Count - Down - Melder " besteht aus den 3 Einheiten : STYLE, HTML, SCRIPT. Diese Teile können grad so wie sie hier auch dargestellt werden, in einem Stück, in einem freien Bereich eines Blog´s oder einer Webseite eingefügt werden !

Schauen wir uns erst noch Mal ein weiteres Beispiel an. Hier wurde ein abgelaufenes Datum gesetzt. D. h. : es wird immer die Anzahl Tage bis zum nächsten Sylvester an zeigen. Morgen also : Tage - 1. Zusätzlich ist da noch ein bisschen mehr Leben drin. Manchmal braucht man schon noch einen extra TEASER. In anderen Fällen, kann ein Layout auch zuviel Bewegung haben, dann ist ersterer Countdown natürlich angesagter. Und darunter dann der HTML-CODE.

Am
Ist die `Venus` in . . . der Nähe der Erde und daher sehr deutlich zu sehen.
Bis dahin sind
es nur noch
           

<style>
.widget { height: 160px; width: 147px; position: relative; font-family: verdana; font-size: 12px; line-height: 24px; text-align: justify; background-color: gold; color: orange; border-radius: 12px; overflow: hidden; }
.dat { padding-left: 5%; width: 80px; background: transparent; color: orange; Border: 0; }
.zeile { width: 90%; padding-left: 5%; overflow: hidden; white-space: nowrap; }
.zeile:hover { overfow: visible; white-space: pre-wrap; }
.info:before { content: "Ein anderes Datum..."; width: 90%; display: inline-block; background-color: gold; border-radius: 12px; padding-left: 5%; }
.info:hover:before { content: "Ein anderes Datum können Sie hier oben einsetzen. Wie viele Tage es bis dahin wohl noch dauert ?"; display: inline-block; position: absolute; top: 0px; height: 300px; }
#ereignis { color: yellow; }
#ergebnis { color: yellow; }
</style>

<div class="widget">
<span class="dat">Am</span>
<input class="dat" id="datum" contenteditable onchange='datpruef(this.value);return false;' onclick='this.value=" "' value="26.3.2017" />
<div class="zeile" id="ereignis" contenteditable onclick='this.innerHTML=" "; '>Ist die `Venus` in . . . der Nähe der Erde und daher sehr deutlich zu sehen.</div>
<div class="zeile">Bis dahin sind</div>
<div class="zeile">es nur noch</div>
<span class="dat" id="ergebnis">   </span>
<div class="info"> </div>
</div><br>

<script type='text/javascript'>
function parseDate( input ) {
var parts=input.split( '.' ) ; parts[0]=parseInt( parts[0] ) ; parts[1]=parseInt( parts[1] ) ; parts[2]=parseInt( parts[2] ) ; return new Date( parts[2], parts[1]-1, parts[0] ) ;
}
function datpruef(wert) {
var parts=wert.split( '.' ) ; parts[0]=parseInt( parts[0] ) ; parts[1]=parseInt( parts[1] ) ; parts[2]=parseInt( parts[2] ) ; var minus='unter 0 Tage !' ;
if ( parts[0] > '' ) {if ( parts[0] < 32 ) {}else{document.getElementById('datum').value='' ; return false; }}else{return false; }
if ( parts[1] > '' ) {if ( parts[1] < 13 ) {}else{document.getElementById('datum').value='' ; return false; }}else{return false; }
if ( parts[2] > '' ) {if ( parts[2] < new Date().getFullYear()) {document.getElementById('ergebnis').innerHTML=minus; return false; }}
else{parts[2]=new Date().getFullYear() ; }
if ( parts[2] == new Date().getFullYear() ) { if ( parts[1] > new Date().getMonth() ) { if ( ( parts[1]-1 ) == new Date().getMonth() ) { if ( parts[0] > new Date().getDate() ) {}else{ if ( parts[0] == new Date().getDate() ) { document.getElementById('ergebnis').innerHTML='NULL !!!' ; return false; }else{ document.getElementById('ergebnis').innerHTML=minus; return false; }}}}else{document.getElementById('ergebnis').innerHTML=minus; return false; }}
var rest=parseInt( ( new Date( parts[2], parts[1]-1, parts[0] ).getTime()-new Date().getTime() ) / 86400000 ) ;
if ( rest == 0 ) { rest='wenige Stunden !' ; }else{ rest=rest+1 + ' Tage !' ; }
document.getElementById('ergebnis').innerHTML=rest;
return false;
}
if ( new Date( parseDate(document.getElementById('datum').value) ) < new Date() ) { document.getElementById('datum').value='31.12.' ; document.getElementById('ereignis').innerHTML='Ist Sylvester' ; }
datpruef( document.getElementById('datum' ).value ) ;
</script>

28.6.16 20:39
 


bisher 0 Kommentar(e)     TrackBack-URL

Name:
Email:
Website:
E-Mail bei weiteren Kommentaren
Informationen speichern (Cookie)



 Smileys einfügen
Myblog.de website reputation  Seitenreport - Die SEO und Website Analyse  Quality monitored by qualidator.com   Daisypath Friendship tickers OpenOffice

 responsive menu
 rauf
  runter