You are not logged in.

  • Login

Zeit runter Zählen

  • 1
  • 2

Dragon4048

Professional

  • "Dragon4048" started this thread

Posts: 380

  • Send private message

1

Monday, May 17th 2010, 11:59am

Zeit runter Zählen

Hallo zusammen

Hab da mal ne kleine frage wie ich das hinbekommen könnte. Undzwar wenn ich hier einen auftrag anklicke steht danach eine zeit z.b 02.33.29 dort. Wenn ich die seite aktualisiere aktualisiert er auh die zeit keine frage. Wie könnt ich es aber so machen das die zeit automatisch ruer läuft? Hab da mal was versucht mit nen javascript jedoch bisher ohne erfolg :)

vince

Master

Posts: 1,105

  • Send private message

2

Monday, May 17th 2010, 1:39pm

Hi,

du kannst mit setInterval() eine Updatefunktion aufrufen die deine aktuelle Zeit jede X ms ins ms parsed welche du dann mit z.B 1000incrementierst und damit ein neues Dateobjekt erstellst und das dann einfach in das bestimmte Element ausgibst, bzw. überschreibst.

X-Eon

Intermediate

Posts: 167

  • Send private message

3

Monday, May 17th 2010, 1:43pm

Uiii ein Bonner (:

Ich würde es als Timestamp in ein HTML Element mit ID ausgeben und dann einen Javascript Timer laufen lassen, der diese Zahl nimmt und im Sekundentakt um 1 verringert/erhöht.

Gaaanz grob und ungetestet:

JavaScript Code

 
1
2
3
4
5
6
7
8
9
10
11

function countDown() {
	var time = document.getElementById('counter').innerHTML;
	time = time - 1; // oder +1
 
   // time formatieren
 
	document.getElementById('counter').innerHTML = time;
}
 
 
window.setInterval("countDown()", 1000);



Da gibts aber auch schon geile jQuery Plugins für. Falls du das Rad nicht neu erfinden möchtest.

Viele Grüße,
X-Eon



Edit: Natürlich setInterval -.-

Dragon4048

Professional

  • "Dragon4048" started this thread

Posts: 380

  • Send private message

4

Monday, May 17th 2010, 1:46pm

puh das hab ich jetzt überhaupt nicht verstanden ^^

mein versuch wars mit

JavaScript Code

 
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
27
28
29
30
31

function t(){
                v=new Date();
                var bxx=document.getElementById('bxx');
                n=new Date();
                ss=pp;
                s=ss-Math.round((n.getTime()-v.getTime())/1000.);
                m=0;h=0;
                if(s<0){
				  //ps como session :P
                  bxx.innerHTML=""
                }else{
                  if(s>59){
                    m=Math.floor(s/60);
                    s=s-m*60
                  }
                  if(m>59){
                    h=Math.floor(m/60);
                    m=m-h*60
                  }
                  if(s<10){
                    s="0"+s
                  }
                  if(m<10){
                    m="0"+m
                  }
                  bxx.innerHTML=h+":"+m+":"+s+"<br>"
                }
                pp=pp-1;
                window.setTimeout("t();",999);
 
              }



html

HTML Code

 
1
2
3
4
5
6
7
8
9

<table  class="main" width="100%" align="center">
{foreach from=$transferlist item=trans}
				 <tr bgcolor="{cycle values="#eeeeee,#dddddd"}">
				  <td width="2%"><div id="bxx">
				   {$trans.str_time}</div></td>
				  <td width="82%">{$trans.msg}</td>
				 </tr>
				 {/foreach}
                   </table>



so hatte ich es jetzt versucht aber leider geht da nix

Dragon4048

Professional

  • "Dragon4048" started this thread

Posts: 380

  • Send private message

5

Monday, May 17th 2010, 1:57pm

ja ein Bonner :)

Besten dank

hab es nun so mal versucht

HTML Code

 
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
27

{literal}<script language=JavaScript>anz={$cnt_transferlist}; countDown();</script>{/literal}
 
<table  class="main" width="100%" align="center">
{foreach from=$transferlist item=trans}
				 <tr bgcolor="{cycle values="#eeeeee,#dddddd"}">
				  <td width="2%"><div id="counter">
				   {$trans.str_time}</div></td>
				  <td width="82%">{$trans.msg}</td>
				 </tr>
				 {/foreach}
                   </table>
 
{literal}
<script type="text/javascript">
function countDown() {
	var time = document.getElementById('counter').innerHTML;
	time = time - 1; // oder +1
 
   // time formatieren
 
	document.getElementById('counter').innerHTML = time;
}
 
 
window.setInterval("countDown()", 1000);
</script>
{/literal}



aber ihrgendwas mach ich falsch :)

Dragon4048

Professional

  • "Dragon4048" started this thread

Posts: 380

  • Send private message

6

Monday, May 17th 2010, 3:15pm

So habs nun hinbekommen das er nun runter zählt.

Wie bekomme ich nun den timespam in eine Uhrzeit formatiert?

Hier mal mein bisheriger Code

HTML Code

 
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
27
28
29

{literal}
<script type="text/javascript">
function countDown() 
{
var time = document.getElementById('counter').innerHTML;
time = time - 1; // oder +1
 
// time formatieren
 
 
document.getElementById('counter').innerHTML = time;
} 
window.setInterval("countDown()", 1000);
 
 
</script>
{/literal}
 
<script language=JavaScript>anz={$cnt_transferlist}; counter();</script>
 
<table  class="main" width="100%" align="center">
{foreach from=$transferlist item=trans}
                 <tr bgcolor="{cycle values="#eeeeee,#dddddd"}">
                 <td width="2%"><div id="counter">
                   {$trans.str_time}</div></td>
                   <td width="82%">{$trans.msg}</td>
                 </tr>
                  {/foreach}
                 </table>

Lemmi

Professional

Posts: 651

  • Send private message

7

Monday, May 17th 2010, 5:22pm

Ich möchte nur kurz anmerken, dass die Zeit nicht hundertprozentig genau runter gezählt wird. Gründe dafür sind vor allem der PC und entsprechende Prozesse, die neben dem Browser laufen könnten. Öffnet beispielsweise ein Besucher mit älterer Hardware ein Programm neben dem Browser, bleibt die Zeit gerne kurz stehen. Empfehlenswert wären, kommt es auf die Genauigkeit an, das Holen der Zeit über AJAX vom Server oder direkt vom Rechner.

Torben Brodt

Administrator

Posts: 8,454

  • Send private message

8

Monday, May 17th 2010, 6:34pm

Den Datumsstring musst du dir durch Aufruf diverser Funktionen selber konvertieren, siehe http://de.selfhtml.org/javascript/objekte/date.htm

Oder du benutzt einfach folgende Funktion - aber sie beherrscht nicht alle Platzhalter

JavaScript Code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function strftime(f, t) {
	var date = new Date(t * 1000);
	f = f.replace('%%', '%');
	f = f.replace('%Y', date.getFullYear());
	f = f.replace('%y', date.getFullYear() % 100);
	f = f.replace('%m', date.getMonth() + 1);
	f = f.replace('%d', date.getDate());
	f = f.replace('%H', date.getHours());
	f = f.replace('%i', date.getMinutes());
	f = f.replace('%s', date.getSeconds());
	return f;
};
 
// beispiel: "17.5.2010"
alert( strftime('%d.%m.%Y', 1274113924) );


Willst du die komplette Funktion mit allen Platzhaltern haben, dann brauchst du die 300 Zeilen Quelltext von hier:
http://phpjs.org/functions/date
Latest blogs Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

Dragon4048

Professional

  • "Dragon4048" started this thread

Posts: 380

  • Send private message

9

Monday, May 17th 2010, 10:26pm

besten dank schonmal :) jedoch habe ich das noch nicht verstanden um erlisch zu sein wie ich das jetzt im code implementieren müsste damit es geht.

X-Eon

Intermediate

Posts: 167

  • Send private message

10

Tuesday, May 18th 2010, 8:27am

Die Funktion von d0nut mit in deinen Javascript-Tag kopieren und dann da wo "//time formatieren" steht folgendes einfügen:

JavaScript Code

 
1

time = strftime('%d.%m.%Y  %H:%i:%s', time);

Dragon4048

Professional

  • "Dragon4048" started this thread

Posts: 380

  • Send private message

11

Wednesday, June 23rd 2010, 2:43pm

Quoted from "X-Eon"

Die Funktion von d0nut mit in deinen Javascript-Tag kopieren und dann da wo "//time formatieren" steht folgendes einfügen:

JavaScript Code

 
1

time = strftime('%d.%m.%Y  %H:%i:%s', time);




Leider klappt das noch nicht so ganz.... er formatiert zwar aber gibt kurz die zeit aus und danach steht dort NaN.NaN.NaN

Hier mal der code

HTML Code

 
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

<table  class="main" width="100%" align="center">
{foreach from=$transferlist item=trans}
 
{literal}
<script type="text/javascript">
function strftime(f, t) {
	var date = new Date(t * 1000);
	f = f.replace('%%', '%');
	f = f.replace('%Y', date.getFullYear());
	f = f.replace('%y', date.getFullYear() % 100);
	f = f.replace('%m', date.getMonth() + 1);
	f = f.replace('%d', date.getDate());
	f = f.replace('%H', date.getHours());
	f = f.replace('%i', date.getMinutes());
	f = f.replace('%s', date.getSeconds());
	return f;
};
function countDown() 
{
var time = document.getElementById('counter').innerHTML;
time = time - 1; // oder +1
 
// time formatieren
time = strftime('%H:%i:%s', time);
 
document.getElementById('counter').innerHTML = time;
} 
window.setInterval("countDown()", 1000);
 
 
</script>
 
{/literal}
 
 
 
<script language=JavaScript>anz={$cnt_transferlist}; counter();</script>
 
 
 
                 <tr bgcolor="{cycle values="#eeeeee,#dddddd"}">
                 <td width="2%"><div id="counter">
                   {$trans.str_time}</div></td>
                   <td width="82%">{$trans.msg}</td>
                 </tr>
                  {/foreach}
                 </table>


lg
Dragon

Torben Brodt

Administrator

Posts: 8,454

  • Send private message

12

Wednesday, June 23rd 2010, 5:37pm

Kannst du auch mit der aktuellen Uhrzeit arbeiten?
Dann ist es viel einfacher:

JavaScript Code

 
1
2
3

function countDown() {
  document.getElementById('counter').innerHTML = strftime('%H:%i:%s', parseInt((new Date()).getTime() / 1000));
}


Ansonsten solltest du noch ein verstecktes Eingabefeld einführen indem du den Unix Timestamp speicherst.
Zu deinen Additionen müsstest du dann noch parseInt benutzen.

Ich denke den Rest bekommst du alleine hin :)
Latest blogs Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

Dragon4048

Professional

  • "Dragon4048" started this thread

Posts: 380

  • Send private message

13

Thursday, June 24th 2010, 9:42am

ja so klappt es nur leider zählt er nun hoch und nicht runter :) Und wenn ich 3 Einträge habe lässt er beim ersten die zeit laufen und bei den anderen 2 schreibt er nur nenn time stamp. Wie kann ich das lösen das er bei allen die zeit laufen lässt

lg
Dragon

This post has been edited 2 times, last edit by "Dragon4048" (Jun 24th 2010, 9:56am)

Dragon4048

Professional

  • "Dragon4048" started this thread

Posts: 380

  • Send private message

14

Thursday, June 24th 2010, 12:10pm

So läuft es nun jedoch nur der erste.... wenn man mehre einträge hat zählt er immer nur eins runter und bei den anderen passiert nix

hier mal der code


HTML Code

 
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

<table  class="main" width="100%" align="center">
{foreach from=$transferlist item=trans}
 <tr bgcolor="{cycle values="#eeeeee,#dddddd"}">
                 <td width="2%"><div id="bx">{$trans.str_time_f}</div>
				 {literal}
		<script type="text/javascript">
		v=new Date();
		var bx=document.getElementById('bx');
 
		function t()
		{
		  n=new Date();
		  s={/literal}{$trans.str_time}{literal}-Math.round((n.getTime()-v.getTime())/1000.);
		  m=0;
		  h=0;
		  if(s<0)
		  {
		    bx.innerHTML=""
		  }
		  else
		  {
		    if(s>59)
		    {
		      m=Math.floor(s/60);
		      s=s-m*60;
		    }
		    if(m>59)
		    {
		      h=Math.floor(m/60);
		      m=m-h*60;
		    }
		    if(s<10)
		    {
		      s="0"+s
		    }
		    if(m<10)
		    {
		      m="0"+m
		    }
		    bx.innerHTML=h+":"+m+":"+s+"";
		  }
		  window.setTimeout("t();",999)
		 }
		 window.onload=t;
		</script>
		{/literal}
				 </td>
                   <td width="82%">{$trans.msg}</td>
                 </tr>
                  {/foreach}
                 </table>

Torben Brodt

Administrator

Posts: 8,454

  • Send private message

15

Thursday, June 24th 2010, 5:38pm

na die haben ja auch alle die selbe ID! Das geht natürlich nicht.
var bx=document.getElementById('bx');

und packe die Funktionsdefinition bitte raus aus der Schleife - am besten in eine eigene Datei.
Lg
Latest blogs Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

Dragon4048

Professional

  • "Dragon4048" started this thread

Posts: 380

  • Send private message

16

Thursday, June 24th 2010, 9:42pm

ok das klingt natürlich logisch :)

nHab das dann mal mit den id's gemacht aber leider geht es da auch nicht so wie es soll ^^

die erste zeitzählt runter aber die 2 dann nicht mehr. Im Quellcode zeigt er aber auch die richtigen id's an


bin echt sprachlos

Hier nochmal den code


HTML Code

 
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

<table  class="main" width="100%" align="center">
{foreach from=$transferlist item=trans}
 <tr bgcolor="{cycle values="#eeeeee,#dddddd"}">
                 <td width="2%"><div id="{$trans.id}">{$trans.str_time_f}</div>
				 {literal}
		<script type="text/javascript">
		v=new Date();
		var bx=document.getElementById({/literal}{$trans.id}{literal});
 
		function t()
		{
		  n=new Date();
		  s={/literal}{$trans.str_time}{literal}-Math.round((n.getTime()-v.getTime())/1000.);
		  m=0;
		  h=0;
		  if(s<0)
		  {
		    bx.innerHTML=""
		  }
		  else
		  {
		    if(s>59)
		    {
		      m=Math.floor(s/60);
		      s=s-m*60;
		    }
		    if(m>59)
		    {
		      h=Math.floor(m/60);
		      m=m-h*60;
		    }
		    if(s<10)
		    {
		      s="0"+s
		    }
		    if(m<10)
		    {
		      m="0"+m
		    }
		    bx.innerHTML=h+":"+m+":"+s+"";
		  }
		  window.setTimeout("t();",999)
		 }
		 window.onload=t;
		</script>
		{/literal}
				 </td>
                   <td width="82%">{$trans.msg}</td>
                 </tr>
                  {/foreach}
                 </table>



und hier mal der Quellcode des browsers

HTML Code

 
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98

<table  class="main" width="100%" align="center">
 <tr bgcolor="#eeeeee">
                 <td width="2%"><div id="4121">02:09:43</div>
 
 
		<script type="text/javascript">
		v=new Date();
		var bx=document.getElementById(4121);
 
		function t()
		{
		  n=new Date();
		  s=7783-Math.round((n.getTime()-v.getTime())/1000.);
		  m=0;
		  h=0;
		  if(s<0)
		  {
		    bx.innerHTML=""
		  }
		  else
		  {
		    if(s>59)
		    {
		      m=Math.floor(s/60);
		      s=s-m*60;
		    }
		    if(m>59)
		    {
		      h=Math.floor(m/60);
		      m=m-h*60;
		    }
		    if(s<10)
		    {
		      s="0"+s
		    }
		    if(m<10)
		    {
		      m="0"+m
		    }
		    bx.innerHTML=h+":"+m+":"+s+"";
		  }
		  window.setTimeout("t();",999)
		 }
		 window.onload=t;
		</script>
 
				 </td>
                   <td width="82%"><font color='#00FF00'>Ihre Flotte wird bei 6:1:10 spionieren</font></td>
                 </tr>
                   <tr bgcolor="#dddddd">
                 <td width="2%"><div id="4120">02:07:28</div>
 
		<script type="text/javascript">
		v=new Date();
		var bx=document.getElementById(4120);
 
		function t()
		{
		  n=new Date();
		  s=7648-Math.round((n.getTime()-v.getTime())/1000.);
		  m=0;
		  h=0;
		  if(s<0)
		  {
		    bx.innerHTML=""
		  }
		  else
		  {
		    if(s>59)
		    {
		      m=Math.floor(s/60);
		      s=s-m*60;
		    }
		    if(m>59)
		    {
		      h=Math.floor(m/60);
		      m=m-h*60;
		    }
		    if(s<10)
		    {
		      s="0"+s
		    }
		    if(m<10)
		    {
		      m="0"+m
		    }
		    bx.innerHTML=h+":"+m+":"+s+"";
		  }
		  window.setTimeout("t();",999)
		 }
		 window.onload=t;
		</script>
 
 
				 </td>
                   <td width="82%"><font color='#00FF00'>Ihre Flotte wird bei 6:1:10 spionieren</font></td>
                 </tr>
                                   </table>



Vileicht siehst du den fehler.... ich bin scheinbar zu blöd dazu :P

lg
Dragon

Torben Brodt

Administrator

Posts: 8,454

  • Send private message

17

Friday, June 25th 2010, 11:09am

Warum der Code nicht funktioniert:
* ids dürfen nicht numerisch sein, schreib stattdessen irgendwas davor, z.B. ein x
* settimer ruft immer die funkton t auf, die du immer wieder mit anderem Inhalt überschreibst
* alles muss eindeutig sein, also eine eindeutige ID, einen eindeutigen Funktionsnamen und einen einmaligen window.onload event.
* die funktion t() nutzt globale Variablen - bei mehrmaligem Aufruf, kann sich das in die Query kommen
* Warum hat deine Sekunde nur 999 Millisekunden?

Wenn ich morgen ein bisschen Zeit habe, versuch ich mal mein "Glück" ;)
So lange, nehm dir meine Ratschläge zu Herzen und machs nochmal neu.
Ich würde dir empfehlen eine Liste zu führen mit allen Elementen die aktualisiert werden sollen.
Dann brauch es nur einen einzigen Timer geben, der alle Elemente runterzählt.
Gute Codebasis dazu ist das hier: Mehrere DIV Container mit AJAX aktualisieren
Du musst nur den AJAX Part entfernen.
Latest blogs Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

Dragon4048

Professional

  • "Dragon4048" started this thread

Posts: 380

  • Send private message

18

Friday, June 25th 2010, 12:19pm

ich kapier das einfach nicht. Ihrgendwie ist das echt müll.... selbst wenn ich ein bx vorschreibe zählt er dennoch immer nur den lezten runter aber alle anderen nicht. bin mit meinem latein am ende erlisch gesagt.

Tigerente

Intermediate

Posts: 54

  • Send private message

20

Saturday, June 26th 2010, 8:41am

@d0nut nice nice :D
  • 1
  • 2

Similar threads

Tagging

Social bookmarks