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.
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Interessierte/r
    Registriert seit
    05.01.2016
    Beiträge
    145
    Danke
    9
    Bekam 11 mal "Danke" in 11 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
    145
    Danke
    9
    Bekam 11 mal "Danke" in 11 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
    1.026
    Danke
    19
    Bekam 108 mal "Danke" in 107 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, 22:40
  2. weiterleitung nach auflösung
    Von im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 1
    Letzter Beitrag: 20.12.2005, 00:40
  3. weiterleitung nach login
    Von icefighter17 im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 17
    Letzter Beitrag: 29.08.2005, 10:27
  4. Befehl nach geladener Garfik ausführen?
    Von im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 07.08.2004, 14:33
  5. Automatische Weiterleitung nach t sekunden
    Von GAST1 im Forum HTML & CSS Forum
    Antworten: 12
    Letzter Beitrag: 30.04.2004, 15:55

Stichworte

Berechtigungen

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