Layui implementiert den Bestätigungscode der Anmeldeschnittstelle

<div Klasse="layui-form-item">
    <div Klasse="layui-col-xs6" >
      <input type="text" value="" placeholder="Bitte geben Sie den Bestätigungscode ein (Groß-/Kleinschreibung nicht beachten)" class="put-val"> 
      <Leinwand-ID="Leinwand" Breite="100" Höhe="30"></Leinwand>  
     </div>
      <div>
      <input type="button" value="Anmelden" class="layui-btn layui-btn-fluid" lay-submit lay-filter="anmelden"> 
      </div>         
</div>

var show_num=[];
  $(Funktion()
  {
   zeichnen(show_num);
   $("#canvas").on('klicken',function()
   {
  zeichnen(show_num);      
   })      
  });

Funktion zeichnen(show_num) {
            var canvas_width = $('#canvas').width();
            var canvas_height = $('#canvas').height();
            var canvas = document.getElementById("canvas"); //Holen Sie sich das Canvas-Objekt, den Akteur var context = canvas.getContext("2d"); //Holen Sie sich die Canvas-Zeichenumgebung, die Leistungsphase des Akteurs canvas.width = canvas_width;
            Leinwandhöhe = Leinwandhöhe;
            var sCode = "A, B, C, E, F, G, H, J, K, L, M, N, P, Q, R, S, T, W, X, Y, Z, 1,2,3,4,5,6,7,8,9,0";
            var aCode = sCode.split(",");
            var aLength = aCode.length; //Länge des Arrays abrufen für (var i = 0; i <= 3; i++) {
                var j = Math.floor(Math.random() * aLength); //Einen zufälligen Indexwert abrufen var deg = Math.random() * 30 * Math.PI / 180; //Einen zufälligen Radianten zwischen 0 und 30 generieren var txt = aCode[j]; //Einen zufälligen Inhalt abrufen show_num[i] = txt.toLowerCase();
                var x = 10 + i * 20; //x-Koordinate des Textes auf der Leinwandvar y = 20 + Math.random() * 8; //y-Koordinate des Textes auf der Leinwandcontext.font = "bold 23px Microsoft YaHei";

                Kontext.Übersetzen(x, y);
                Kontext.rotieren(Grad);

                Kontext.Füllstil = zufälligeFarbe();
                Kontext.Fülltext(txt, 0, 0);

                Kontext.rotieren(-Grad);
                Kontext.Übersetzen(-x, -y);
            }
            for (var i = 0; i <= 5; i++) { //Zeilen im Bestätigungscode anzeigen context.strokeStyle = randomColor();
                Kontext.beginPath();
                Kontext.VerschiebenNach(Math.random() * Leinwandbreite, Math.random() * Leinwandhöhe);
                Kontext.lineTo(Math.random() * Leinwandbreite, Math.random() * Leinwandhöhe);
                Kontext.Strich();
            }
            for (var i = 0; i <= 30; i++) { //Kleine Punkte auf dem Bestätigungscode anzeigen context.strokeStyle = randomColor();
                Kontext.beginPath();
                var x = Math.random() * Leinwandbreite;
                var y = Math.random() * Leinwandhöhe;
                Kontext.moveTo(x, y);
                Kontext.lineTo(x + 1, y + 1);
                Kontext.Strich();
            }
        }

        function randomColor() { //Einen zufälligen Farbwert abrufen var r = Math.floor(Math.random() * 256);
            var g = Math.floor(Math.random() * 256);
            var b = Math.floor(Math.random() * 256);
            gibt "rgb(" + r + "," + g + "," + b + ")" zurück;
        }

<Stil>
        .code {
            Breite: 100 %;
            Rand: 0 automatisch;
        }
        .Eingabewert {
            Breite: 63 %;
            Hintergrund: #ffffff;
            Höhe: 2,8rem;
            Polsterung: 0,2 %;
            Rahmenradius: 5px;
            Rand: keiner;
            Rand: 1px durchgezogen rgba(0,0,0,.2);
            Schriftgröße: 0,9rem;
        }
        #Leinwand {
            schweben: rechts;
            Anzeige: Inline-Block;
            Rand: 1px durchgezogen #ccc;
            Rahmenradius: 5px;
            Cursor: Zeiger;
        }
</Stil>