Countdown über ein Bild legen in der Simple Text Box möglich ?

  • Seite 1 von 2
06.12.2017 21:25
avatar  TWD
#1 Countdown über ein Bild legen in der Simple Text Box möglich ?
TW
TWD
Mitglied

Hallo Liebe Leute

Ich habe nach langer Zeit mal wieder eine Frage Sorry,

Ich würde gerne auf der Portal Seite in einer SimpleText Box ein Bild einfügen ,das klappt ja auch Größe kann ich ja bestimmen,
jetzt möchte ich aber genau in der Mitte des Bildes einen Countdown laufen lassen.


z.b
Oben Text ( Release)
Und dann eine Uhr die Runter läuft Tage,Stunden,Sekunden

Ist das Überhaupt möglich ?

Hoffe ich habe die Frage Verständlich gestellt.

Grüße


 Antworten

 Beitrag melden
06.12.2017 22:28
avatar  ( gelöscht )
#2 RE: Countdown über ein Bild legen in der Simple Text Box möglich ?
Gast
( gelöscht )

ich würde hier eher andersherum vorgehen. Sprich, einen Counter in eine div packen und ein Bild als Hintergrund dazufügen.

Hier mal ein Beispiel:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
<div id="demo" style="width: 400px; padding: 100px; text-align: center; font-size: 28px; font-weight: bold; color: yellow; background: url(https://files.homepagemodules.de/b624252/a_359_616b1158.jpg); background-size: 100% 100%;"></div>
 
<script>
// Set the date we're counting down to
var countDownDate = new Date("De 24, 2017 15:37:25").getTime();
 
// Update the count down every 1 second
var x = setInterval(function() {
 
// Get todays date and time
var now = new Date().getTime();
 
// Find the distance between now an the count down date
var distance = countDownDate - now;
 
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
 
// Display the result in the element with id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
}, 1000);
</script>
 



MfG


 Antworten

 Beitrag melden
06.12.2017 22:32
avatar  TWD
#3 RE: Countdown über ein Bild legen in der Simple Text Box möglich ?
TW
TWD
Mitglied

Oh Danke das ist ja Super nett von dir werde es sofort mal Testen Klasse


 Antworten

 Beitrag melden
06.12.2017 22:40
avatar  TWD
#4 RE: Countdown über ein Bild legen in der Simple Text Box möglich ?
TW
TWD
Mitglied

Habs eben sofort getest. Klasse Top

Hab aber noch Fragen nicht böse sein, ich bin Anfänger

1.) Wie bekomme ich das in Center weil jetzt wird das Left in der Simple Text Box angezeigt.
2.) Wo muss ich mein Bild eingeben also gegen dein Beispiel Bild Tauschen?
3.) Wie kann ich die Schriftfarbe der Uhrzeit ändern?

Liebe Grüße


 Antworten

 Beitrag melden
06.12.2017 22:46
avatar  ( gelöscht )
#5 RE: Countdown über ein Bild legen in der Simple Text Box möglich ?
Gast
( gelöscht )

...in der 1. Zeile steht color: yellow; Dort für yellow einen anderen Farbcode eintragen.
... dahinter steht background: url(...... ) , dort zwischen den Klammern eigene Bildadresse eintragen
... in die Mitte müsstest du es eigentlich bekommen, wenn du alles , was in der ersten Zeile steht, zwischen <center> ... </center> setzt


 Antworten

 Beitrag melden
07.12.2017 13:46
avatar  ( gelöscht )
#6 RE: Countdown über ein Bild legen in der Simple Text Box möglich ?
Gast
( gelöscht )

@TWD

...es wäre vielleicht auch mal spannend zu sehen, in welcher Weise Du den Vorschlag umsetzen konntest ?

Vielleicht ein Screenshot oder einen Link zur Portalseite ?

MfG


 Antworten

 Beitrag melden
07.12.2017 18:10
avatar  TWD
#7 RE: Countdown über ein Bild legen in der Simple Text Box möglich ?
TW
TWD
Mitglied

Hallo ja ich bin gerade dran bin Anfänger da dauert das etwas Länger hoffe ich bekomme das hin, klar poste ich dann ein Bild.


 Antworten

 Beitrag melden
07.12.2017 18:32 (zuletzt bearbeitet: 07.12.2017 18:33)
avatar  TWD
#8 RE: Countdown über ein Bild legen in der Simple Text Box möglich ?
TW
TWD
Mitglied

Habs jetzt Super hinbekommen echt Klasse Danke dir, die Grafik ist noch nicht Fertig das schaffe ich erst Morgen.
Ist das Möglich das ich da wo ich die Rote Linie gezogen habe einen Text Reinschreiben kann in white?






<center><div id="demo" style="width: 400px; padding: 150px; text-align: center; font-size: 28px; font-weight: bold; color: white; background: url(https://files.homepagemodules.de/b789125/a_6_872322d5.jpg); background-size: 100% 100%;"></div></center>

<script>
// Set the date we're counting down to
var countDownDate = new Date("De 31, 2017 23:59:25").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

// Get todays date and time
var now = new Date().getTime();

// Find the distance between now an the count down date
var distance = countDownDate - now;




// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);

// Display the result in the element with id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
}, 1000);
</script>


 Antworten

 Beitrag melden
07.12.2017 21:00
avatar  ( gelöscht )
#9 RE: Countdown über ein Bild legen in der Simple Text Box möglich ?
Gast
( gelöscht )

um einen Text dort rein zu schreiben, könntest Du am Ende des Scriptes folgende Zeile abändern:

1
2
 
document.getElementById("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
 




1
2
 
document.getElementById("demo").innerHTML = "mein Text<br>" + days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
 




 Antworten

 Beitrag melden
07.12.2017 22:43
avatar  TWD
#10 RE: Countdown über ein Bild legen in der Simple Text Box möglich ?
TW
TWD
Mitglied

Vielen Lieben Dank der Text klappt, Ihr seit echt Profis ich muss noch viel Lernen.


 Antworten

 Beitrag melden
15.12.2017 14:15
avatar  ( gelöscht )
#11 RE: Countdown über ein Bild legen in der Simple Text Box möglich ?
Gast
( gelöscht )

...ich hatte in diesem Thread einen Beispielcode für einen Countdown gepostet.

Dieser wird offenbar von Chrome und Safari Browsern nicht korrekt umgesetzt. Weiß jemand Abhilfe ?

Vielen Dank


 Antworten

 Beitrag melden
15.12.2017 21:32
avatar  Olaf
#12 RE: Countdown über ein Bild legen in der Simple Text Box möglich ?
Ol
Mitglied

Die Countdownzeitangabe des Monats sollte schon korrekt angegeben werden (als Zahl):

var countDownDate = new Date("12, 24, 2017 15:37:25").getTime();

Gruß
Olaf

__________________________

http://138600.homepagemodules.de/

 Antworten

 Beitrag melden
15.12.2017 21:46
avatar  ( gelöscht )
#13 RE: Countdown über ein Bild legen in der Simple Text Box möglich ?
Gast
( gelöscht )

Danke , @Olaf , mein Freund. Da war der FireFox sehr großzügig und hat es trotzdem richtig angezeigt.

Vielen Dank.


 Antworten

 Beitrag melden
15.12.2017 21:49
avatar  Olaf
#14 RE: Countdown über ein Bild legen in der Simple Text Box möglich ?
Ol
Mitglied

FF verzeiht so manchen Fehler...

Gruß
Olaf

__________________________

http://138600.homepagemodules.de/

 Antworten

 Beitrag melden
15.12.2017 21:52 (zuletzt bearbeitet: 15.12.2017 21:58)
avatar  ( gelöscht )
#15 RE: Countdown über ein Bild legen in der Simple Text Box möglich ?
Gast
( gelöscht )

@Olaf ... der FF ist auch mein Freund, er weiß halt genau , was ich meine ....

Aber mal Spaß beiseite, ich fand das Script auf einer do it yourself Seite und da waren die Monate in Buchstaben angegeben. Wahrscheinlich, um Dumpfbacken, wie mich in die Irre zu leiten....


 Antworten

 Beitrag melden
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!