Countdown Code auf Grafik

CSS, Java Script u.s.w

Moderator: HTML-Laie

Benutzeravatar
Butterblume
Held des Forums
Held des Forums
Beiträge: 7524
Registriert: Fr 3. Aug 2012, 16:33
Mein Vorname: Karin
Wohnort: Peine / Niedersachsen
Kontaktdaten:

Countdown Code auf Grafik

Beitrag von Butterblume »

Hallo ihr
ich hab mal eine Frage, und zwar suche ich einen Countdown Code (weihnachten, halloween, usw) der auf einem Bild angezeigt wird, und ich das Bild beliebig austauschen kann! Quasi so wie beim Kalender!

Ich habe jetzt nur diesen Code

<script>
var eventdate = new Date("December 25, 2019 00:00:00 GMT");
d=new Date();
count=Math.floor((eventdate.getTime()-d.getTime())/1000);
count=Math.floor(count/(60*60*24));
document.write(count);
</script>


Kann man den irgendwie abändern??

Ich hätte es gern so,dass ich den Code innerhalb eines Textes AUF dem Bild setzten kann.

Quasi wie hier: In <script>
var eventdate = new Date("December 25, 2019 00:00:00 GMT");
d=new Date();
count=Math.floor((eventdate.getTime()-d.getTime())/1000);
count=Math.floor(count/(60*60*24));
document.write(count);
</script>
</b> Tage kommt der Weihnachtsmann und bringt Geschenke mit für Groß und Klein!

Grün sind die Tage...

Verstehst ihr was ich meine? Ich kann das immer schlecht erklären, zumindest möchte ich als Hintergrund ein Bild einfügen können?!

Vielleicht hat ja jemand eine Idee?!

Hier könnt ihr gucken https://www.weihnachtszauber.karins-poserbilder.de ist direkt unter den Engeln!
Kussi... und Bild für all eure Bemühungen!

Butterblume / Karin

https://www.karins-poserbilder.de
Benutzeravatar
goefi-chiangmai
Admin
Admin
Beiträge: 6993
Registriert: Sa 31. Okt 2009, 09:36
Mein Vorname: Peter
Wohnort: Phrao-Chiang Mai
Kontaktdaten:

Re: Countdown Code auf Grafik

Beitrag von goefi-chiangmai »

Am besten machst du dir einen Div container mit dem gewünschten hintergrundsbild und posizionierst dier den cod ins bild
Gruß - DER CRAZY ASIAT - The MASTER of DESASTER
Privat Homepage: goefi-chiangmai
Mitgliederausweis: Hole Dir dein Mitgliederausweis für deine Webseite
Benutzeravatar
Butterblume
Held des Forums
Held des Forums
Beiträge: 7524
Registriert: Fr 3. Aug 2012, 16:33
Mein Vorname: Karin
Wohnort: Peine / Niedersachsen
Kontaktdaten:

Re: Countdown Code auf Grafik

Beitrag von Butterblume »

Hmh... :E besteht wohl die Möglichkeit peter, dass du mir da beihilflich sein könntest? :oops: aber ich versuchs natürlich auch gern allein und würde mich dann hier wieder melden.

Aber erst einmal vielen dank für deine schnelle hilfe!

Ich hätte da mal ne überlegung, könnte man den kalender oder die uhr nicht dementprechend ändern? War jetzt nur so ein gedanke! :oops:

Also,

1. Ich mache erst einmal eine grafik,

2. Dann erstelle ich mir diesen div container,

3. Und wie soll ich den code dann da posizionieren? :oops: :E

Ich habe noch nie solch einen code geschrieben! :oops:
Kussi... und Bild für all eure Bemühungen!

Butterblume / Karin

https://www.karins-poserbilder.de
Benutzeravatar
Butterblume
Held des Forums
Held des Forums
Beiträge: 7524
Registriert: Fr 3. Aug 2012, 16:33
Mein Vorname: Karin
Wohnort: Peine / Niedersachsen
Kontaktdaten:

Re: Countdown Code auf Grafik

Beitrag von Butterblume »

Peter,ich habe da jetzt mal was probiert, aber das wird falsch sein! Hab ja solch einen code auch noch NIE geschrieben!

In <b>
<script>
var eventdate = new Date("December 25, 2019 00:00:00 GMT");
d=new Date();
count=Math.floor((eventdate.getTime()-d.getTime())/1000);
count=Math.floor(count/(60*60*24));
document.write(count);
</script></b> Tage kommt der Weihnachtsmann und bringt Geschenke mit für Groß und Klein!
<div id="bildtrbox">
<div id="txt"></div>

<Div> habe ich jetzt, aber das wird sicher falsch sein?!

https://www.test.karins-poserbilder.de/new%201.php


Hab keine Ahnung wie das geht! :oops:

Mir fällt auch gerade ein, dass man die Zahl auch einer anderen Schrift und Farbe anpassen kann! Ich sag ja, eigentlich wie bei der Uhr und dem Kalender!
Kussi... und Bild für all eure Bemühungen!

Butterblume / Karin

https://www.karins-poserbilder.de
Benutzeravatar
goefi-chiangmai
Admin
Admin
Beiträge: 6993
Registriert: Sa 31. Okt 2009, 09:36
Mein Vorname: Peter
Wohnort: Phrao-Chiang Mai
Kontaktdaten:

Re: Countdown Code auf Grafik

Beitrag von goefi-chiangmai »

hat jetzt das mit dem anderen Thema zu tun und ist erledigt oder nicht?
Gruß - DER CRAZY ASIAT - The MASTER of DESASTER
Privat Homepage: goefi-chiangmai
Mitgliederausweis: Hole Dir dein Mitgliederausweis für deine Webseite
Benutzeravatar
Butterblume
Held des Forums
Held des Forums
Beiträge: 7524
Registriert: Fr 3. Aug 2012, 16:33
Mein Vorname: Karin
Wohnort: Peine / Niedersachsen
Kontaktdaten:

Re: Countdown Code auf Grafik

Beitrag von Butterblume »

Ne, ist noch nicht erledigt. Aber macht man.... das andere thema scheint wichtig zu sein!

Birgit will es jetzt versuchen wenn sie Zeit hat!
Kussi... und Bild für all eure Bemühungen!

Butterblume / Karin

https://www.karins-poserbilder.de
Benutzeravatar
goefi-chiangmai
Admin
Admin
Beiträge: 6993
Registriert: Sa 31. Okt 2009, 09:36
Mein Vorname: Peter
Wohnort: Phrao-Chiang Mai
Kontaktdaten:

Re: Countdown Code auf Grafik

Beitrag von goefi-chiangmai »

Ich fliege das Wochenende in die Schweiz, werde danach versuchen,
Poste bitte mal dein Countown Code (ORIGINAL) und das Bild wo Du als hintergrund willst
Gruß - DER CRAZY ASIAT - The MASTER of DESASTER
Privat Homepage: goefi-chiangmai
Mitgliederausweis: Hole Dir dein Mitgliederausweis für deine Webseite
Benutzeravatar
Butterblume
Held des Forums
Held des Forums
Beiträge: 7524
Registriert: Fr 3. Aug 2012, 16:33
Mein Vorname: Karin
Wohnort: Peine / Niedersachsen
Kontaktdaten:

Re: Countdown Code auf Grafik

Beitrag von Butterblume »

Hallo peter,
ich habe nur den schnipsel den ich im anfangspost gesetzt habe.

Die grafik kann ich dir noch machen.

Wäre schön, wenn ich die grafik danach immer mal wieder ändern könnte wenn das möglich ist?!

Aber da du ja in die schweiz fliegst, muss ich mich jetzt mit der grafik nicht so beeilen. Wie lange bleibst du da?
Kussi... und Bild für all eure Bemühungen!

Butterblume / Karin

https://www.karins-poserbilder.de
Benutzeravatar
HTML-Laie
Moderator
Moderator
Beiträge: 354
Registriert: So 19. Nov 2017, 12:42
Mein Vorname: Hape
Wohnort: Wesermarsch
Kontaktdaten:

Re: Countdown Code auf Grafik

Beitrag von HTML-Laie »

Hier mal eine Lösungsmöglichkeit:

CSS-Abschnitt für die DIV's --> hier kann man das Hintergrundbild angeben sowie für den eigentlichen Counter Schriftart, Größe und Farbe einstellen. Ebenso die Position des Textes kann geändert werden mit left und top.

Code: Alles auswählen

<style type="text/css">
<!--
.bgimg {
background-image: url('countdown219tcjdk.png');
width:675px;height:500px;
}
.counter {
font-familiy:sans;
font-size:24px;
color:white;
position: absolute;
left: 13% ;
top: 5%;
}
 =-->
</style>
Hier die beiden DIV-Container:

Code: Alles auswählen

<div class="bgimg">
<div class ="counter">
In <b>
<script>
var eventdate = new Date("December 25, 2019 00:00:00 GMT");
d=new Date();
count=Math.floor((eventdate.getTime()-d.getTime())/1000);
count=Math.floor(count/(60*60*24));
document.write(count);
</script></b> Tag(en) kommt der<br>Weihnachtsmann und <br>bringt Geschenke mit <br>für Groß und Klein!
</div>
</div>
LG Hape :)
Unmögliches wird sofort erledigt, Wunder dauern etwas länger. 95% aller Computerprobleme befinden sich zwischen Tastatur und Stuhl.
Hapes-Javascript-Demo-Page ; Hapes-Baustelle ; Hape's-Javascript-Forum ; Hapes-Fotowelt ; Boitwarder Bürgerverein
Benutzeravatar
Butterblume
Held des Forums
Held des Forums
Beiträge: 7524
Registriert: Fr 3. Aug 2012, 16:33
Mein Vorname: Karin
Wohnort: Peine / Niedersachsen
Kontaktdaten:

Re: Countdown Code auf Grafik

Beitrag von Butterblume »

Guten morgen hape,
du bist echt ne Wucht! Vielen vielen dank!

:DA :DA :DA

Ich werds nachher gleich einfügen und mich dann noch einmal hier melden! Ich freu mich so....

Es macht doch viel aus wenn jemand Ahnung davon hat! :DA schön, bist echt nen Schatz
Kussi... und Bild für all eure Bemühungen!

Butterblume / Karin

https://www.karins-poserbilder.de
Antworten

Zurück zu „Fragen zu HTML & Programmiersprachen“

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 19 Gäste