[Code] HTML-"zähler"

Dieses Thema im Forum "Webentwicklung" wurde erstellt von sft-FTW, 21. Mai 2010 .

Schlagworte:
Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 21. Mai 2010
    HTML-"zähler"

    bin mal wieder auf eine neue frage gestoßen in sachen html

    bald wird eine party von einer alten schule gestartet (alte lehrer, alte schüler treffen sich und so weiter) ... jetzt wollten wir ein spiel in der aula über einen beamer spielen lassen, indem sich 2 erdkundelehrer von früher in "how well do you know your yorld" duellieren sollen... am ende sollen die punkte gegenübergestellt werden...

    Die punkte werden im spiel oben rechts angezeigt..... gibt es eine möglichekeit diese punkte hinter einen namen zu setzen? quasi zu kopieren?!

    hier der code für besseres verständnis

    PHP:
    < html >
    <
    head >
    <
    title > Erdkunde - Kampf </ title >
    <
    style type = "text/css" >
    <!--
    .
    Estilo1  { font - family "Palatino Linotype" Arial "Trebuchet MS" }
    -->
    </
    style >
    <
    script src = "AC_RunActiveContent.js"  type = "text/javascript" ></ script >
    </
    head >
    <
    body >
    <
    FONT FACE = "Comic Sans MS" >
    <
    Font Size = "7" >
    <
    center > Erdkunde Kampf
    < Font Size = "5" >
    <
    P > Name1  -   0                   
    < P > Name2  -   0
    < body bgcolor = "#D5E4EE"  text = "#006699"  leftmargin = "0"  topmargin = "0"  marginwidth = "0"  marginheight = "0"  link = "#006699"  vlink = "#006699"  alink = "#006699"  oncontextmenu = "return false"  ondragstart = "return false"  onselectstart = "return false" >

    <
    table width = "100%"  border = "0"  cellspacing = "0"  cellpadding = "0"  height = "100%" >
      
        <
    td align = "center"  valign = "middle" >
          <
    table border = "4"  cellpadding = "0"  cellspacing = "0"  bordercolor = "#006699"  bgcolor = "#B5D1E1" >
            <
    tr
              <
    td align = "center" >
                <
    EMBED src = "http://www.travelpod.com/bin/flash/container.swf"  QUALITY = "high"  bgcolor = "#FFFFFF"  WIDTH = "625"  HEIGHT = "500" NAME = "TravelerIQ"  ALIGN = "middle"  TYPE = "application/x-shockwave-flash" PLUGINSPAGE = "http://www.macromedia.com/go/getflashplayer" FlashVars = "gamexml=http://www.travelpod.com/cgi-bin/witw?SessionID=00-509657166-game1&amp;gameswf=http://www.travelpod.com/bin/flash/witw-00.swf"  />

              </
    td >
            </
    tr >
          </
    table >
         
          <
    br >
      </
    tr >
    </
    table >
    </
    body >
    </
    html >
    für jede hilfe geht bw klar
     
  2. 21. Mai 2010
    AW: HTML-"zähler"

    Mit HTML kannst du nichts dynamisches machen. Ich würds mit PHP oder Javascript versuchen. Und selbst damit wird es nicht einfach, da du vermutlichen keinen Sourcecode zu der Flash Anwendung hast.
     
  3. 21. Mai 2010
    AW: HTML-"zähler"


    das ist wohl richtig , aber wie mache ich das mit php? oder java?
     
  4. 21. Mai 2010
    AW: HTML-"zähler"

    Wie genau soll das ablaufen? Ein Lehrer spielt das Game komplett, seine Punkte sollen gespeichert werden, dann spielt der andere Lehrer das ganze Spiel?

    Mit JavaScript lässt sich das imho einfach realisieren, wenn man von Hand die erreichten Punkte einträgt.

    Wenn du genaueres zum Ablauf sagst, kann ich/man dir auch einen Code geben
     
  5. 21. Mai 2010
    AW: HTML-"zähler"

    Du willst nicht wissen wie man es macht sondern einen fertigen Code, und wie ich schon sagte ist das nicht einfach. Es ist allerdings relativ einfach, wenn man die Punkte per Hand einträgt, aber auslesen ist halt schwer realisierbar. Ich kann dir das vll in ner anderen Programmiersprache realisieren, aber das wäre dann keine Webanwendung mehr, sondern eine .exe.
     
  6. 21. Mai 2010
    AW: HTML-"zähler"

    Zum Namen ändern einfach auf den Namen Klicken!

    Zum Hinzufügen von Punkten einfach auf die Punkte Klicken und den neuen Punktestand eingeben, die neuen Punkte werden automatisch mit den Aktuellen Verrechnet!

    Copyright nicht Entfernen!

    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
     <meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
    
     <meta name="language" content="Deutsch" />
     <meta name="content-language" content="de"/>
    
     <!-- Inline Stylesheet -->
     <style type="text/css">
     * { margin: 0; padding: 0; }
     html, body {
     margin: 0; padding: 0;
     background-color: #D5E4EE;
     color: #006699;
     }
     
     #wrapper {
     width: 625px;
     margin: 0 auto;
     }
     
     h1 {
     font-family: "Comic Sans MS", verdana, arial, tahoma;
     font-size: 25px;
     text-align: center;
     }
     
     #players {
     margin-top: 8px;
     text-align: center;
     clear: both;
     }
     
     .player {
     width: 310px;
     display: block;
     float: left;
     font-size: 20px;
     }
     
     .p1 { color: #f00; }
     
     .name, .points { cursor: pointer; }
     
     .points { display: block; float: left; width: 50px; }
     .name { display: block; float: left; width: 260px; }
     
     #game { position: relative; top: 8px; margin-bottom: 10px; clear: both; }
     #copyright { font-size: 10px; font-family: verdana, arial; }
     </style>
     
     <!-- Extern Javascript -->
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
     
     <!-- Inline Javascript -->
     <script type="text/javascript">
     $(function(){
     $('.name').attr('title', 'Klicken um Namen zu ändern');
     $('.points').attr('title', 'Klicken um Punkte einzutragen');
     $('.name').live('click', function(){
     var name = prompt('Bitte einen Namen Eingeben:');
     $(this).text(name);
     });
     
     $('.points').live('click', function(){
     var points = prompt('Bitte Punktzahl Eingeben! (Mit - Kann Punkte abgezogen werden!)');
     if(!points.match(/([-]{0,1}[0-9]+)/)) {
     alert('Fehler!\n\nEs sind nur Zahlen Erlaubt!');
     return;
     }
     $(this).text(parseInt($(this).text())+parseInt(points));
     });
     });
     </script>
    
     <title>Erdkunde-Kampf</title>
     </head>
    
     <body>
    
     <div id="wrapper">
     <h1>Erdkunde-Kampf</h1>
     
     <div id="players">
     <div class="player p1">
     <span class="name">Spieler 1</span>
     <span class="points">0</span>
     </div>
     <div class="player p2">
     <span class="points">0</span>
     <span class="name">Spieler 2</span>
     </div>
     </div>
     
     <div id="game">
     <EMBED src="http://www.travelpod.com/bin/flash/container.swf" QUALITY="high" bgcolor="#FFFFFF" WIDTH="625" HEIGHT="500"NAME="TravelerIQ" ALIGN="middle" TYPE="application/x-shockwave-flash"PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"FlashVars="gamexml=http://www.travelpod.com/cgi-bin/witw?SessionID=00-509657166-game1&amp;gameswf=http://www.travelpod.com/bin/flash/witw-00.swf" />
     </div>
     
     <div id="copyright">&copy; 2010 by Nanobyte-Online.de</div>
     </div>
    
     </body>
    
    </html>
     
  7. 22. Mai 2010
    AW: HTML-"zähler"

    ok also erstmal fettes danke an nanobyte... (500 renos raus)
    jetzt bleibt mir im prinzip nur noch ein problem...
    wenn ich den code von nanobyte nun nehme, und die punkte eingegeben habe , habe ich gesehen das die "try again" funktion nicht geht -.-
    means ich muss die seite refreshen, wodurch wiederum der punktestand verloren geht...

    (egal von welcher seite ich nun das spiel übernehme, es klappt bei keiner -.-)

    gibt es nun eine möglichkeit eine neue seite zu starten die für einen spieler mit den angegebenen punkten startet?
     
  8. 22. Mai 2010
    AW: HTML-"zähler"

    ja, speicher den punktestand einfach in nem cookie
     
  9. 22. Mai 2010
    AW: HTML-"zähler"

    und wie stell ich das am einfachsten an?
    also so ziemlich am schnellsten... gibts da eine tastenkombination zum beispiel damits auch direkt weiter gehen kann mein ich....
     
  10. 22. Mai 2010
    AW: HTML-"zähler"

    Du kannst einfach per Javascript ein Cookie setzen mit dem aktuellen Punktestand und liest den Cookie nach dem Seiten refresh wieder aus.

    Hier sind Beispiele wie du Cookie per Javascript setzt und wieder ausliest!
     
  11. 22. Mai 2010
    AW: HTML-"zähler"

    hm.. ok sieht relativ gut aus, wird aber zum problem weil ich mich noch nicht so auskenn in sachen java, wo müsste ich denn was einfügen in Nanobyte's code, damit es quasi nur einmal Refreshen anhält?
     
  12. 23. Mai 2010
    AW: HTML-"zähler"

    Als erstes riesen unterschied! java!=javascript.


    Zum setzen kannst du jquery benutzen, da nanobyte dir ja das Framework eingebunden und dadrauf baut. Oder doch nicht. Jquery benötigt ein extra Cookie Plugin. Machen wir es auf die normale Art. Ich würds so lösen:

    Spoiler
    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> <head> 
     <meta http-equiv="content-type" content="text/html;charset=UTF-8"/> 
     <meta name="language" content="Deutsch" /> <meta name="content-language" content="de"/> 
     <!-- Inline Stylesheet --> <style type="text/css"> 
     * { margin: 0; padding: 0; } html, body { margin: 0; padding: 0; background-color: #D5E4EE; color: #006699; } #wrapper { width: 625px; margin: 0 auto; } 
     h1 { font-family: "Comic Sans MS", verdana, arial, tahoma; font-size: 25px; text-align: center; } #players { margin-top: 8px; text-align: center; clear: both; }
     .player { width: 310px; display: block; float: left; font-size: 20px; } .p1 { color: #f00; } .name, .points { cursor: pointer; } .points { display: block; float: left; width: 50px; }
     .name { display: block; float: left; width: 260px; } #game { position: relative; top: 8px; margin-bottom: 10px; clear: both; } #copyright { font-size: 10px; font-family: verdana, arial; } </style> 
    
    
     <!-- Extern Javascript --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> 
    
     <!-- Inline Javascript --> <script type="text/javascript"> 
    
     function createCookie(Bezeichner,Wert,Dauer) {
     jetzt=new Date();
     Auszeit=new Date(jetzt.getTime()+Dauer*86400000);
     document.cookie=Bezeichner+"="+Wert+";expires="+Auszeit.toGMTString()+";";
     }
    
     function get_cookie( cookieName ) {
     strValue = false;
     if( strCookie = document.cookie ) {
     if( arrCookie = strCookie.match( new RegExp( cookieName + '=([^;]*)', 'g'))) {
     strValue=RegExp.$1;
     }
     }
     return(strValue);
     }
    
    
    function add_value(){
     get_cookie('points_p1');
     if(strValue){
     $("#p1").html(strValue);
     }
    
     get_cookie('points_p2');
     if(strValue){
     $("#p2").html(strValue);
     }
    }
    
    
    function reset(){
     createCookie('points_p1',0,10)
     createCookie('points_p2',0,10)
     
     location.reload();
    }
    
    $(document).ready(function () { add_value(); });
    
    
     $(function(){ $('.name').attr('title', 'Klicken um Namen zu ändern'); $('.points').attr('title', 'Klicken um Punkte einzutragen'); 
     $('.name').live('click', function(){ var name = prompt('Bitte einen Namen Eingeben:'); $(this).text(name); });
     
     $('.points').live('click', function(){ 
     var points = prompt('Bitte Punktzahl Eingeben! (Mit - Kann Punkte abgezogen werden!)'); 
     if(!points.match(/([-]{0,1}[0-9]+)/)) { alert('Fehler!\n\nEs sind nur Zahlen Erlaubt!'); return; }
    
     
     $(this).text(parseInt($(this).text())+parseInt(points));
    
     var pid=this.id;
     createCookie('points_'+pid,points,10)
     
    
     }); }); </script> 
     
     
     <title>Erdkunde-Kampf</title> </head>
     <body> <div id="wrapper"> <h1>Erdkunde-Kampf</h1> 
    
     <div id="players"> 
     <div class="player p1"> 
     <span class="name">Spieler 1</span> 
     <span id="p1" class="points">0</span> 
     </div>
     
     
     <div class="player p2"> 
     <span id="p2" class="points">0</span> 
     <span class="name">Spieler 2</span>
     </div> </div> <div id="game"> 
     
     
     <EMBED src="http://www.travelpod.com/bin/flash/container.swf" QUALITY="high" bgcolor="#FFFFFF" WIDTH="625" HEIGHT="500"NAME="TravelerIQ" ALIGN="middle" TYPE="application/x-shockwave-flash"PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"FlashVars="gamexml=http://www.travelpod.com/cgi-bin/witw?SessionID=00-509657166-game1&amp;gameswf=http://www.travelpod.com/bin/flash/witw-00.swf" /> </div>
     <div onclick="reset();">Punktestand Reset</div> 
     </div> </body> </html>
    
     
  13. 23. Mai 2010
    AW: HTML-"zähler"

    hm natürlich danke erstmal, nur das problem ist das wenn ich deinen code benutze funktionieren die sachen von Nanobyte irgendwie nicht mehr ..
    also dieses auf den Namen klicken und namen eingeben dingsbums....
    hoffe du weist was ich meine ... gibts da vielleicht eine lösung?
     
  14. 23. Mai 2010
    AW: HTML-"zähler"

    Hm ich hatte es doch extra getestet. Doofe Formatierung im Forum. ^^
    Fehlten zwei Semikolons die bei der Formatierung probleme gemacht haben.


    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"/> <meta name="language" content="Deutsch" /> <meta name="content-language" content="de"/> <!-- Inline Stylesheet --> <style type="text/css"> * { margin: 0; padding: 0; } html, body { margin: 0; padding: 0; background-color: #D5E4EE; color: #006699; } #wrapper { width: 625px; margin: 0 auto; } h1 { font-family: "Comic Sans MS", verdana, arial, tahoma; font-size: 25px; text-align: center; } #players { margin-top: 8px; text-align: center; clear: both; } .player { width: 310px; display: block; float: left; font-size: 20px; } .p1 { color: #f00; } .name, .points { cursor: pointer; } .points { display: block; float: left; width: 50px; } .name { display: block; float: left; width: 260px; } #game { position: relative; top: 8px; margin-bottom: 10px; clear: both; } #copyright { font-size: 10px; font-family: verdana, arial; } </style> <!-- Extern Javascript --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> <!-- Inline Javascript --> <script type="text/javascript"> function createCookie(Bezeichner,Wert,Dauer) { jetzt=new Date(); Auszeit=new Date(jetzt.getTime()+Dauer*86400000); document.cookie=Bezeichner+"="+Wert+";expires="+Auszeit.toGMTString()+";"; } function get_cookie( cookieName ) { strValue = false; if( strCookie = document.cookie ) { if( arrCookie = strCookie.match( new RegExp( cookieName + '=([^;]*)', 'g'))) { strValue=RegExp.$1; } } return(strValue); } function add_value(){ get_cookie('points_p1'); if(strValue){ $("#p1").html(strValue); } get_cookie('points_p2'); if(strValue){ $("#p2").html(strValue); } } function reset(){ createCookie('points_p1',0,10); createCookie('points_p2',0,10); location.reload(); } $(document).ready(function () { add_value(); }); $(function(){ $('.name').attr('title', 'Klicken um Namen zu ändern'); $('.points').attr('title', 'Klicken um Punkte einzutragen'); $('.name').live('click', function(){ var name = prompt('Bitte einen Namen Eingeben:'); $(this).text(name); }); $('.points').live('click', function(){ var points = prompt('Bitte Punktzahl Eingeben! (Mit - Kann Punkte abgezogen werden!)'); if(!points.match(/([-]{0,1}[0-9]+)/)) { alert('Fehler!\n\nEs sind nur Zahlen Erlaubt!'); return; } $(this).text(parseInt($(this).text())+parseInt(points)); var pid=this.id; createCookie('points_'+pid,points,10) }); }); </script> <title>Erdkunde-Kampf</title> </head> <body> <div id="wrapper"> <h1>Erdkunde-Kampf</h1> <div id="players"> <div class="player p1"> <span class="name">Spieler 1</span> <span id="p1" class="points">0</span> </div> <div class="player p2"> <span id="p2" class="points">0</span> <span class="name">Spieler 2</span> </div> </div> <div id="game"> <EMBED src="http://www.travelpod.com/bin/flash/container.swf" QUALITY="high" bgcolor="#FFFFFF" WIDTH="625" HEIGHT="500"NAME="TravelerIQ" ALIGN="middle" TYPE="application/x-shockwave-flash"PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"FlashVars="gamexml=http://www.travelpod.com/cgi-bin/witw?SessionID=00-509657166-game1&amp;gameswf=http://www.travelpod.com/bin/flash/witw-00.swf" /> </div> <div onclick="reset();">Punktestand Reset</div> </div> </body> </html>
    
     
  15. 23. Mai 2010
    AW: HTML-"zähler"

    DANKEE!
    somit hat sich das ganze dann erledigt
     
  16. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.