Ergebnis 1 bis 5 von 5

Thema: Weiterleitung nach if Befehl.

  1. #1
    HTML Newbie
    Registriert seit
    25.12.2016
    Beiträge
    2
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Frage Weiterleitung nach if Befehl.

    Hallo Leute,

    ich habe hier einen ganz einfachen PIN Script aus dem Netz welchen ich für eine Touchscreen-Pineingabe nutzen möchte. Nun bekomme ich es aber irgendwie nicht hin das wenn der richtige Pin "12345" eingetragen wurde, eine Weiterleitung zu "/index2.html" stattfindet. Hat jemand von euch eine Idee?

    Code:
    <!doctype html><html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>JBTAdmin Passwort</title>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    <style>
    body {
      height: 100vh;
      background: #333333;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      font-family: Open Sans;
    }
    
    
    body.wrong {
      -webkit-animation: bg-red 1s ease-in;
      animation: bg-red 1s ease-in;
    }
    
    
    body.correct {
      -webkit-animation: bg-green 1s ease-in;
      animation: bg-green 1s ease-in;
    }
    
    
    #inspiration {
      position: fixed;
      right: 1em;
      bottom: 1em;
    }
    
    
    #inspiration a {
      display: inline-block;
      float: left;
      text-decoration: none;
      font-weight: bold;
      color: white;
      -webkit-transition: all 1s ease;
      transition: all 1s ease;
    }
    
    
    #inspiration a:hover { color: #212121; }
    
    
    #inspiration p {
      margin: 0;
      padding-left: .4em;
      display: inline-block;
      float: right;
      color: rgba(255, 255, 255, 0.6);
    }
    
    
    #pin {
      background: #212121;
      width: 20em;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
      padding: 1em;
      border-radius: .3em;
      box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
      margin: auto;
      color: rgba(255, 255, 255, 0.2);
    }
    
    
    .dots {
      width: 50%;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
      justify-content: space-around;
      padding: 1em;
      padding-top: 3em;
    }
    
    
    .dot {
      position: relative;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 0.8em;
      width: 0.8em;
      height: 0.8em;
      -webkit-transform: scale3d(0.7, 0.7, 0.7);
      transform: scale3d(0.7, 0.7, 0.7);
    }
    
    
    .dot.active {
      -webkit-animation: growDot .5s ease;
      animation: growDot .5s ease;
      -webkit-animation-fill-mode: forwards;
      animation-fill-mode: forwards;
    }
    
    
    .dot.wrong {
      -webkit-animation: wrong .9s ease;
      animation: wrong .9s ease;
    }
    
    
    .dot.correct {
      -webkit-animation: correct .9s ease;
      animation: correct .9s ease;
    }
    
    
    #pin p { font-size: .8em; }
    
    
    .numbers {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
      flex-flow: row wrap;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
      justify-content: space-around;
      -webkit-align-content: flex-end;
      -ms-flex-line-pack: end;
      align-content: flex-end;
      margin: 2em 0;
    }
    
    
    .number {
      position: relative;
      width: 2.5em;
      height: 2.5em;
      margin: 0.5em;
      border-radius: 2.5em;
      border: 2px solid rgba(255, 255, 255, 0);
      text-align: center;
      line-height: 2.5em;
      font-weight: 400;
      font-size: 1.8em;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      -webkit-transition: all .5s ease;
      transition: all .5s ease;
    }
    
    
    .number:hover { color: rgba(255, 255, 255, 0.5); }
    
    
    .number:hover:before { border: 2px solid rgba(255, 255, 255, 0.5); }
    
    
    .number:before {
      content: "";
      position: absolute;
      left: -2px;
      width: 2.5em;
      height: 2.5em;
      border: 2px solid rgba(255, 255, 255, 0.1);
      border-radius: 2.5em;
      -webkit-transition: all .5s ease;
      transition: all .5s ease;
    }
    
    
    .number.grow:before {
      -webkit-animation: grow .6s ease;
      animation: grow .6s ease;
    }
     @-webkit-keyframes 
    growDot {  100% {
     background: white;
     -webkit-transform: scale3d(0.9, 0.9, 0.9);
     transform: scale3d(0.9, 0.9, 0.9);
    }
    }
     @keyframes 
    growDot {  100% {
     background: white;
     -webkit-transform: scale3d(0.9, 0.9, 0.9);
     transform: scale3d(0.9, 0.9, 0.9);
    }
    }
    @-webkit-keyframes 
    grow {  50% {
     -webkit-transform: scale3d(1.5, 1.5, 1.5);
     transform: scale3d(1.5, 1.5, 1.5);
    }
     100% {
     -webkit-transform: scale3d(1, 1, 1);
     transform: scale3d(1, 1, 1);
    }
    }
    @keyframes 
    grow {  50% {
     -webkit-transform: scale3d(1.5, 1.5, 1.5);
     transform: scale3d(1.5, 1.5, 1.5);
    }
     100% {
     -webkit-transform: scale3d(1, 1, 1);
     transform: scale3d(1, 1, 1);
    }
    }
    @-webkit-keyframes 
    wrong {  20% {
     background: crimson;
    }
     40% {
     -webkit-transform: translate(-15px, 0);
     transform: translate(-15px, 0);
    }
     60% {
     -webkit-transform: translate(10px, 0);
     transform: translate(10px, 0);
    }
     80% {
     -webkit-transform: translate(-5px, 0);
     transform: translate(-5px, 0);
    }
    }
    @keyframes 
    wrong {  20% {
     background: crimson;
    }
     40% {
     -webkit-transform: translate(-15px, 0);
     transform: translate(-15px, 0);
    }
     60% {
     -webkit-transform: translate(10px, 0);
     transform: translate(10px, 0);
    }
     80% {
     -webkit-transform: translate(-5px, 0);
     transform: translate(-5px, 0);
    }
    }
    @-webkit-keyframes 
    correct {  20% {
     background: limegreen;
    }
     40% {
     -webkit-transform: translate(0, -15px);
     transform: translate(0, -15px);
    }
     60% {
     -webkit-transform: translate(0, 10px);
     transform: translate(0, 10px);
    }
     80% {
     -webkit-transform: translate(0, -5px);
     transform: translate(0, -5px);
    }
    }
    @keyframes 
    correct {  20% {
     background: limegreen;
    }
     40% {
     -webkit-transform: translate(0, -15px);
     transform: translate(0, -15px);
    }
     60% {
     -webkit-transform: translate(0, 10px);
     transform: translate(0, 10px);
    }
     80% {
     -webkit-transform: translate(0, -5px);
     transform: translate(0, -5px);
    }
    }
    @-webkit-keyframes 
    bg-red {  50% {
     background: crimson;
    }
    }
    @keyframes 
    bg-red {  50% {
     background: crimson;
    }
    }
    @-webkit-keyframes 
    bg-green {  50% {
     background: limegreen;
    }
    }
    @keyframes 
    bg-green {  50% {
     background: limegreen;
    }
    }
    </style>
    </head>
    
    
    <body>
    
    
    <div id="pin">
      <div class="dots">
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
      </div>
      <p>Bitte Passwort eingeben</p>
      <div class="numbers">
        <div class="number">1</div>
        <div class="number">2</div>
        <div class="number">3</div>
        <div class="number">4</div>
        <div class="number">5</div>
        <div class="number">6</div>
        <div class="number">7</div>
        <div class="number">8</div>
        <div class="number">9</div>
      </div>
    </div>
    <script>(function () {
        var input = '', correct = '12345';
        var dots = document.querySelectorAll('.dot'), numbers = document.querySelectorAll('.number');
        dots = Array.prototype.slice.call(dots);
        numbers = Array.prototype.slice.call(numbers);
        numbers.forEach(function (number, index) {
            number.addEventListener('click', function () {
                number.className += ' grow';
                input += index + 1;
                dots[input.length - 1].className += ' active';
                if (input.length >= 5) {
                    if (input !== correct) {
                        dots.forEach(function (dot, index) {
                            dot.className += ' wrong';
                            });
                        
                        document.body.className += ' wrong';
                    } else {
                        dots.forEach(function (dot, index) {
                            dot.className += ' correct';
                        });
                        document.body.className += ' correct';
                    }
                    setTimeout(function () {
                        dots.forEach(function (dot, index) {
                            dot.className = 'dot';
                        });
                        input = '';
                    }, 900);
                    setTimeout(function () {
                        document.body.className = '';
                    }, 1000);
                }
                setTimeout(function () {
                    number.className = 'number';
                }, 1000);
            });
        });
    }());
    //# sourceURL=pen.js
    </script>
    
    
    </body>
    </html>
    1000 Dank, irgendwie steh ich grad wohl voll auf dem schlauch.

  2. #2
    Interessierte/r
    Registriert seit
    05.01.2016
    Beiträge
    107
    Danke
    8
    Bekam 7 mal "Danke" in 7 Postings

    Standard AW: Weiterleitung nach if Befehl.

    Moin
    setze die letzte Zeile in dein correct else

    } else {
    dots.forEach(function (dot, index) {
    dot.className += ' correct';
    window.location.assign("http://www.forum-hilfe.de/threads/58063-Weiterleitung-nach-if-Befehl");

    zwischen die Anführungszeichen kommt dann dein gewünschter Seitenpfad

    Gruß modem-kind

  3. Folgende User finden die Antwort von modem-kind gut:


  4. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    25.12.2016
    Beiträge
    2
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Weiterleitung nach if Befehl.

    Super DANKE! Ich habs mit gefühlt 10 Versionen versucht aber auf window.location.assign bin ich nicht gekommen...war auch schon spät
    Top"!

  5. #4
    Interessierte/r
    Registriert seit
    05.01.2016
    Beiträge
    107
    Danke
    8
    Bekam 7 mal "Danke" in 7 Postings

    Standard AW: Weiterleitung nach if Befehl.

    Bitte
    is ja Weihnachten

    hättest aber auch sehr leicht Googeln können
    unter:
    Weiterleitung javascript

    w3schools ist da meist sehr behilflich ( wenn auch nur in english )
    was bei Programmierung Quellcode ja egal ist...

    oki Jingel Bells

  6. #5
    Moderator Avatar von Arne Drews
    Registriert seit
    20.01.2016
    Ort
    Friedrichstadt, NF
    Beiträge
    684
    Danke
    13
    Bekam 76 mal "Danke" in 76 Postings

    Standard AW: Weiterleitung nach if Befehl.

    Auch wenn es schon gelöst ist, schiebe ich das mal in den Programmier-Bereich, da es mit HTML & CSS nichts zu tun hat.

    [MOD: verschoben von HTML & CSS]

Ähnliche Themen

  1. Weiterleitung nach Passwort Abfrage
    Von 00eraser00 im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 15
    Letzter Beitrag: 19.08.2008, 23:40
  2. weiterleitung nach auflösung
    Von im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 1
    Letzter Beitrag: 20.12.2005, 01:40
  3. weiterleitung nach login
    Von icefighter17 im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 17
    Letzter Beitrag: 29.08.2005, 11:27
  4. Befehl nach geladener Garfik ausführen?
    Von im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 07.08.2004, 15:33
  5. Automatische Weiterleitung nach t sekunden
    Von GAST1 im Forum HTML & CSS Forum
    Antworten: 12
    Letzter Beitrag: 30.04.2004, 16:55

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •