Beiträge von Stef

Stef

Hey,

du kannst dies doch auch local auf Xampp machen. Da funktioniert die Function file_get_contents schon.

Aber am besten ist es wenn du den Inhaber des Forums mal fragst. Villt. kann er dir helfen.

Stef

Hey,

Schau mal hier: http://css3.bradshawenterprises.com/cfimg/

basti1012 : Background-Images kann man nicht animieren. Sie haben diese Eigenschaft nicht. Darum wird egal was du an deinen transitions änderst nichts funktionieren.

Stef

Danke für die Info. Dann habe ich es soweit gut verstanden. Mein erstes kleine Javascript Game

Eine Frage habe ich noch zu folgenden Funktionen:

JavaScript

function start(){

                startGame(10);
                
                clicks = 0;
                
                document.getElementById("score").innerHTML = 0;
                document.getElementById("endscore").innerHTML = 0;
            }

            function add(){

                clicks++;
                document.getElementById("score").innerHTML =  clicks;
                        

                var kreis = document.getElementById('spielkreis');
                var x = Math.floor(Math.random() * 300);
                var y = Math.floor(Math.random() * 300);

                kreis.style.top = x + "px";
                kreis.style.left = y + "px";
            }

Alles anzeigen

Da habe ich die variable clicks global erstellt, weil ich nicht wusste, bzw. weiß wie ich es ohne globale variable machen soll. Hast du denn Ratschläge bzw. ein Beispiel wo du es zeigen kannst. Ich habe sehr lange nachgedacht wie man das mit normalen Variablen erstellt aber ich kam nie darauf. Wäre dir sehr dankbar.

Stef

Sempervivum : benutzt man nicht auf dem Element classList.add('klassennamen') ?

Stef

Beispiel wie du an die IP-Adresse des Besuchers kommst:

Es gibt die Superglobale Variable $_SERVER. Diese beinhaltet diese Informationen. Dazu brauchen wir den Array-Key REMOTE_ADDR.

Code

$ip_adress = $_SERVER['REMOTE_ADDR'];
echo "Deine IP-Adresse lautet: " . $ip_adress;

Beispielseite: http://stef97.bplaced.net/ip.php

Stef

Hey,

meiner Meinung nach fängst du an der falschen Stelle an. Lerne erstmal die Grundlagen und dann die Fortgeschrittenen Themen. Die Grundlagen wie Datentypen, Kontrollstrukturen, ... kennst du ja schon aus Javascript. Das heißt dies kannst du eigentlich überspringen. Hilfreicher Link dafür ist der php-kurs von Herrn Pratzner. Link: https://www.php-kurs.com/ .

Für diese Interaktionen brauchst du aufjedenfall eine PHP-Datei. In dieser kannst du auch eine Speicherfunction miteinbauen. Wenn du mit file_put_contents die Werte in eine txt-datei speicherst, dann überprüft php automatisch ob diese txt-datei vorhanden ist. Wenn nicht wird diese erstellt. Mit file_get_contents bekommst du dann den ganzen Inhalt der Txt-File.

Ja klar. Ist eben ne neue Programmiersprache.

Stef

Hey,

damit du PHP zum laufen bekommst, musst du die Dateiendung, wie bereits ronsenbonsen gesagt hat, zu .php umändern, damit der Server weiß, dass das eine PHP-Datei ist und wie er die zu behandeln hat. Auf dem Server wird PHP ausgeführt und die Ausagbe vom PHP-Script wird dann als HTML ausgegeben.

Wenn du dein PHP-Script auslagerst kannst du diese mit der Einbindfunktionen von PHP einfügen. Siehe include, include_once, require, require_once. Link zum Handbuch.

Desweiteren würde ich dieses Script aufgrund bedenklicher Sicherheitslücken nicht verwende .

Was ist denn dein Ziel? Magst du die IP-Adresse des Besuchers? Siehe http://php.net/manual/de/reserved.variables.server.php

Gruß,

Stef

Stef

Beim nochmaligen durchgehen des Codes ist mir dies ebenso aufgefallen. Die funktion startGame wird bei 10 Sekunden, 10 mal gestartet, habe ich den anschein. Und dann gibt es ja die function add() auch 10 mal und somit wird anstatt + 1 immer + 10 genommen.

Aber nun wo die function add() außerhalb der startGame Function ist, gibt es diese Funktion nur 1 mal. Und der Eventlistener wird nur 1 mal intialisiert. Meiner Meinung nach.

Stimmt das so?

Stef

Hey,

ich denke aus dem Grund, weil man die Funktion in der einen anderen Funktion deklariert/erstellt hat.

Ich habe nun die add function aus der startGame Function herausgenommen, denn die Function wird ja eh beim Click aufgerufen. Und nun funktioniert alles wie gewollt.

Sempervivum : Villt weist du warum?

Stef

Wenn du die Beschreibung des Errors liest dann weißt du es.

Lass mal nach dem hinzufügen des <!DOCTYPE html> den Validator nochmal durchlaufen.

Stef

Lese dir mal die Meldungen durch.

Anscheinend hast du <!DOCTYPE html> vergessen. Aber dies ist sehr wichtig, damit der Browser weiß, dass es sich um eine HTML-Seite handelt.

Und im <html>-tag habe ich noch nie classes oder ids benutzt. Hat eigentlich keinen Sinn. Höchstens beim Body.

Stef

Hey,

ja ich hatte gestern nicht so viel Zeit um den ganzen Beitrag durchzulesen.

Bei mir funktioniert es jetzt auch.

Eines verstehe ich nicht. Nämlich die Berechnung der Scores. Denn manchmal bekomme ich nach dem 1sten klick schon ein Score von 21 und manchmal auch nur 3 oder 1. Warum ist das denn so?

Meine Version des Spieles:

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Spiel</title>

    <style>
        #spielbereich{
            display: none;
        }

        #spielkreis{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: red;
            border: 1px solid black;
            position: absolute;
            top: 300px;
            left: 350px;
            transition: all 1s ease-in;
        }

        #spielkreis:hover{
            cursor: pointer;
        }
    </style>

    <script>
        window.onload = function(){
            
            var spielEnde = document.getElementById("spielende");
            spielEnde.style.display = "none";

            

            var startButton = document.getElementById("startGame");
            startButton.addEventListener("click", start);

            function start(){
                alert("Spiel beginnt!");
                startGame(10);

                clicks = 0;

                document.getElementById("score").innerHTML = 0;
                document.getElementById("endscore").innerHTML = 0;
            }

            function startGame(seconds){



                var spielbereich = document.getElementById("spielbereich");
                var startButton = document.getElementById("startGame");
                var spielEnde = document.getElementById("spielende");
                var circle = document.getElementById('spielkreis');
                var time = seconds;

                if(time > 0){

                    startButton.style.display = "none";
                    spielEnde.style.display = "none";
                    spielbereich.style.display = "block";

                    circle.addEventListener("click", add);

                    
                    function add(){
                        clicks += 1;
                        document.getElementById("score").innerHTML =  clicks;
                        

                        var kreis = document.getElementById('spielkreis');
                        var x = Math.floor(Math.random() * 300);
                        var y = Math.floor(Math.random() * 300);

                        kreis.style.top = x + "px";
                        kreis.style.left = y + "px";
                    }

                    time = seconds -= 1;
                    document.getElementById("time").innerHTML = time;

                    var countdown = setTimeout(
                                        function(){
                                            startGame(seconds)
                                        }
                                        ,1000
                                    );
                } else{

                    startButton.style.display = "block";
                    spielEnde.style.display = "block";
                    spielbereich.style.display = "none";

                    document.getElementById("endscore").innerHTML = clicks;

                    clearTimeout(countdown);
                }    
    
            }                    
        }
    </script>
</head>
<body>    
        <button id="startGame">Game starten</button>
        <section id="spielbereich">

            <div id="spielkreis"></div>
            <div id="spielinfos">
                <p>Time: <span id="time"></span></p>
                <p>Score: <span id="score"></span></p>
            </div>
        </section>
        <section id="spielende">
            <p>Ihre Punktzahl: <span id="endscore"></span></p>
        </section>
    
</body>
</html>

Alles anzeigen

Stef

Hey,

ich habe mal versucht das Spiel zu programmieren.

Jedoch scheitere ich an einer Sache. Nämlich wie ich die Sekunde bekomme.

Ich habe mir das Spiel so gedacht:

Ein Kreis zum klicken. Bei jedem klick wird die value erhöht. Für das Klicken hat der User 10 Sekunden Zeit. Nach den 10 Sekunden darf er nicht mer klicken und es wird angezeigt wie hoch der Score war und ob er nochmal spielen will oder nicht.

Die Zeit lasse ich über einen Interval als p-tag mit value ausgeben. Nun versuche ich an die value der p-tage zu kommen um zu überprüfen ob die Zeit schon abgelaufen ist oder nicht. Aber daran haperts irgendwie.

Hat denn jemand Ideen? Vorschläge? Würde mich aufjedenfall freuen.

Mein Code:

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Spiel</title>

    <style>
        #spielbereich{
            display: none;
        }

        #spielkreis{
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background-color: red;
            border: 1px solid black;
        }

        #spielkreis:hover{
            cursor: pointer;
        }
    </style>

    <script>
        window.onload = function(){
            // Timer
            function timer(seconds){
                var time = seconds;
                
                setInterval(
                    function(){
                        if(time > 0){
                            time = seconds -= 1;
                            var ausgabe = "<p id='time' value='" + time + "'>Time: " + time + "</p>";
                            document.getElementById("time").innerHTML = ausgabe;
                        }    
                    }, 
                    1000
                );
                                            
            }

            var clicks = 0;
            function add(){
                    clicks += 1;
                    document.getElementById("score").innerHTML =  clicks;
            }


            var startButton = document.getElementById("startGame");
            startButton.addEventListener("click", startGame);

            
            function startGame(){
                var spielbereich = document.getElementById("spielbereich");
                var startButton = document.getElementById("startGame");

                startButton.style.display = "none";
                spielbereich.style.display = "block";
                
                timer(10);
                
                var circle = document.getElementById('spielkreis');
                circle.addEventListener("click", add);// Clicks zählen
                    
        
                document.getElementById("time").innerHTML =  "<p id='time' value='10'>Time: 10</p>";
                
            }

            
            
                    
        }
    </script>
</head>
<body>    
        <button id="startGame">Game starten</button>
        <section id="spielbereich">

            <div id="spielkreis"></div>

            <section id="spielinfos">
                <div id="time">
                    
                </div>
                <p>Score: <span id="score"></span></p>
            </section>
        </section>
        
    
</body>
</html>

Alles anzeigen

Stef

Stef

Kein Problem. Bei Fragen kannst du einfach fragen. Versuchen unser bestes zu helfen

Mit der Tabelle würde es beim Befüllen Schwierigkeiten geben. Darum habe ich mal eine flexiblere Lösung erstellt wo alles auch passt.

Stef

Hey,

ach ja. Ist mir garnicht aufgefallen.

Vielen Dank für die Hilfe

Stef

Hier ist der HTML-Teil. Aber daran kann es nicht liegen. Sonst würde auch das w3c-beispiel nicht funktionieren.

HTML

<body>
    <header>
        <h1>Accordion</h1>
    </header>
    <main>
        <section>
            <button class="accordion">Accordion 1</button>
            <article class="panel">
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
            </article>

            <button class="accordion">Accordion 2</button>
            <article class="panel">
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
            </article>

            <button class="accordion">Accordion 3</button>
            <article class="panel">
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
            </article>
        </section>
    </main>
</body>

Alles anzeigen

Stef

Hey,

mein Beispiel gibt das selbe wie Bastis Beispiel aus. Desweiteren habe ich etwas rumgetestet.

Wie hast du es eigentlich mit der Befüllung der Tabelle gedacht?

Hier ist eine andere Variante ohne Tabelle (auch schon responsive):

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Table</title>
    <style>

        *{
            margin: 0;
            padding: 0;
        }

        #render{
            display: flex;
            flex-direction: row;

        }

        #projektinfo{
            width: 5%;
            background-color: red;
            padding-bottom: 7em;        
        }

        #projektinfo div{
            margin-top: 3em; 
        }

        #projektinfo div p{
            transform: rotate(90deg);
            font-size: 2em;
            font-weight: bold;
        }

        #projektdaten{
            width: 95%;
            background-color: yellow;
        }

        #projektdaten article{
            padding: 1em;
        }

        #projektdaten article p.ueberschrift{
            text-decoration: underline;
            font-weight: bold;
        }

        @media only screen and (max-width: 700px){

           #projektinfo{
                width: 10%;
           }

            #projektdaten{
                width: 90%;
            }

        }
    </style>
</head>
<body>
    <main>
        <div id="render">
           <section id="projektinfo">
                <div>
                    <p>Projektinformationen</p>
                </div>
            </section>
            <section id="projektdaten">
               <article>
                   <p class="ueberschrift">Wie viele Teile</p>
                   <p>Teile: 5</p>
               </article>
               <article>
                   <p class="ueberschrift">Anliefermenge</p>
                   <p>Menge: 100</p>
               </article>
               <article>
                   <p class="ueberschrift">Einmalig / Wiederkehrend</p>
                   <p>einmalig</p>
               </article>
               <article>
                   <p class="ueberschrift">Zielpreis</p>
                   <p>500€</p>
               </article>
               <article>
                   <p class="ueberschrift">Zeitrahmen</p>
                   <p>bis zum 10.01.2018</p>
               </article>
               <article>
                   <p class="ueberschrift">Entwicklungsumfang</p>
                   <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur </p>
               </article>
               <article>
                   <p class="ueberschrift">Aufgabe</p>
                   <p>Programmierung eines Adminbereiches mit dem Framework Laravel</p>
               </article>
           </section> 
        </div>
    </main>
</body>
</html>

Alles anzeigen

Stef

Hey,

ich habe mir nun mal die Aufgabe gesetzt mit Javascript ein Accordion zu programmieren.
Ich lerne dies von der w3c-Seite. Nun habe ich es so erstellt wie ich es gelernt habe aber es funktioniert nicht. Das Accordion öffnet und schließt sich nicht.

Ich habe beide Codes mal verglichen aber sehe da keinen Fehler.

Mein Script (funktioniert nicht):

JavaScript

window.onload = function(){

            var accordions = document.getElementsByClassName("accordion");
            var a;

            for(a = 0; a < accordions.length; a++){

                accordions[a].addEventListener("click", function(){

                        this.classList.toogle("showPanel");

                        var panel = this.nextElementSibling;
                        alert(panel);
                        if(panel.style.display === "block"){
                            panel.style.display = "none";
                        } else{
                            panel.style.display = "block";
                        }

                });
            }
        }

Alles anzeigen

w3c-script (funktioniert)

JavaScript

window.onload = function(){

            var acc = document.getElementsByClassName("accordion");
                var i;

                for (i = 0; i < acc.length; i++) {
                    acc[i].addEventListener("click", function() {
                        
                        this.classList.toggle("showPanel");

                        
                        var panel = this.nextElementSibling;
                        if (panel.style.display === "block") {
                            panel.style.display = "none";
                        } else {
                            panel.style.display = "block";
                        }
                    });
            } 
        }

Alles anzeigen

Hoffe ihr erkennt den Fehler.

Stef

Stef

Hey,

du meinst wohl den Abstand zwischen Projektinformationen und den weiteren Tabellenrows?

Das liegt daran, dass es valign in CSS3 nicht gibt.

Das Zauberwort ist vertical-align.

So sollte es klappen:

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Table</title>
    <style>
        table{
            margin-top: 2em;
        }
        td#produktinfo{
            transform:rotate(270deg);
            font-size: 1.5em;
            vertical-align: bottom;
            text-align: center;
        }
    </style>
</head>
<body>
    <main>
        <table>
            <tbody>
                <tr>
                    <td rowspan="8" id="produktinfo">Projektinformationen</td>
                </tr>
                <tr>
                    <td>Wie viele Teile</td>
                </tr>
                <tr>
                    <td>Anliefermenge</td>
                </tr>
                <tr>
                    <td>Einmalig / Wiederkehrend</td>
                </tr>
                <tr>
                    <td>Zielpreis</td>
                </tr>
                <tr>
                    <td>Zeitrahmen</td>
                </tr>
                <tr>
                    <td>Entwicklungsumfang</td>
                </tr>
                <tr>
                    <td>Aufgabe</td>
                </tr>
            </tbody>
        </table>
    </main>
</body>
</html>

Alles anzeigen

Stef

Beispiel:

PHP

if(!isset($error)){

            try{

                $selectSql = "SELECT createdAt FROM beitraege WHERE userId = :id ORDER BY id DESC";
                $data = $dbConnection->prepare($selectSql);
                $data->execute(
                        array(
                            ":id" => $_SESSION["userId"]
                        )
                );

                $fetchData = $data->fetch();

                

                $time = new DateTime("now");
                $created = new DateTime($fetchData["createdAt"]);


                $differenz = $time->diff($created);

                $minute = $differenz->format("%i");
             

                if($minute < 3){
                    $error = "<p>Sie haben bereits einen Beitrag in den letzen 3 Minuten gepostet. Sie dürfen nur 1nen Beitrag innerhalb 3 Minuten posten.</p>";
                } else{
                    $sql1 = "INSERT INTO beitraege(userId, name, beitrag) VALUES (:userId ,:name, :beitrag)";
                    $stmt1 = $dbConnection->prepare($sql1);
                    $result1 = $stmt1->execute(
                            array(
                                ":userId" => $_SESSION["userId"],
                                ":name" => $name,
                                ":beitrag" => $beitrag
                            )
                    );
                }



                


            }catch(EXCEPTION $e){
                echo "<p>Es ist ein Fehler mit der Datenbank aufgetreten.</p> <p>Fehlermeldung:" . $e->getMessage() . "</p>";
                exit();
            }
            
        }

Alles anzeigen

Beiträge von Stef

phpfür anfänger

Portfolio Vorschaubild Wordpress

Jitter Click Game programmieren

JSON array aus HTML in JS array.

phpfür anfänger

phpfür anfänger

phpfür anfänger

Jitter Click Game programmieren

Jitter Click Game programmieren

Erste homepage in bau css probloeme [ verschoben]

Erste homepage in bau css probloeme [ verschoben]

Jitter Click Game programmieren

Jitter Click Game programmieren

Tabellenformatierungsproblem

Accordion in JS umsetzen

Accordion in JS umsetzen

Tabellenformatierungsproblem

Accordion in JS umsetzen

Tabellenformatierungsproblem

Kommentarspam (mit Minutensperre) vermeiden