JavaScript zur Implementierung der Login-Schiebereglerüberprüfung

<div Klasse="Anmelden-Auswahl">
    <div v-show="errselectFlag" id="err-select"></div>
        <p id="title-p">Den Schieberegler gedrückt halten und zum Bestätigen ziehen</p>
        <div id="links-auswählen"></div>
        <div id="Rechtsauswahl">
        <i id="icon-dui" class="iconfont icon-right"></i>
    </div>
</div>

// Slider-Validierung var oRight = document.getElementById("right-select");
var bg = document.getElementById("Linksauswahl");
var Titel = document.getElementById("Titel-p");
var i = document.getElementById("icon-dui");
    oRechts.beimMausdrücken = Funktion (e) {
      var downX = e.clientX; //Der Abstand der X-Achse vom Fenster nach dem Drücken der Taste // Mausbewegungsereignis oRight.onmousemove = function (e) {
        wenn (e.clientX != 240) {
          oRechts.stil.links = 0 + "px";
          bg.style.left = 0 + "px";
        }
        var moveX = e.clientX - downX; //Der Abstand von der x-Achse des Fensters beim Gleiten //Nur ziehen, wenn der Wert größer als 0 ist, sonst erfolgt ein umgekehrtes Ziehen, wenn (moveX > 0) {
          oRight.style.left = moveX + "px"; //Der Abstand zwischen dem Schieberegler und der linken Seite bg.style.width = moveX + "px"; //Die Breite des Hintergrunds ist der Abstand zwischen dem Schieberegler und der linken Seite if (moveX >= 280 - oRight.offsetWidth) {
            i.className = "Iconfont-Symbol-xingzhuang";
            i.Stil.Farbe = "rgb(86, 192, 15)";
            title.innerText = "Überprüfung bestanden";
            Titel.Stil.Farbe = "#fff";
            oRechts.onmousemove = null;
            oRechts.beimMausdrücken = null;
          }
        }
      };
    };

*{Rand: 0;Polsterung: 0;Boxgröße: Rahmenbox;}
    .login-auswählen {
      Breite: 280px;
      Höhe: 40px;
      Rand: automatisch;
      Rand oben: 20px;
      Rand links: 15px;
      Rand rechts: 15px;
      Textausrichtung: zentriert;
      Zeilenhöhe: 40px;
      Hintergrund: rgba(134, 134, 131, 0,6);
      Anzeige: Flex;
      Position: relativ;
      #Fehler-Auswahl {
        Breite: 138px;
        Höhe: 38px;
        Position: absolut;
        rechts: -152px;
        oben: 0;
        Farbe: #fff;
        Schriftgröße: 12px;
        Rahmenradius: 5px;
        Zeilenhöhe: 38px;
        Textausrichtung: zentriert;
        Hintergrund: rgb(177, 71, 71);
      }
      #Titel-p {
        Textausrichtung: zentriert;
        Zeilenhöhe: 40px;
        Breite: 100 %;
        Höhe: 100%;
        Schriftgröße: 14px;
        Position: absolut;
      }
      #links-Auswahl {
        Breite: 0;
        Höhe: 100%;
        transformieren: übersetzen (0,3 s);
        Hintergrund: rgb(86, 192, 15);
      }
      #Rechtsauswahl {
        Breite: 40px;
        Höhe: 40px;
        Hintergrund: #fff;
        Farbe: #aaaa;
        Textausrichtung: zentriert;
        Zeilenhöhe: 40px;
        Rand: 1px durchgezogen #ccc;
        Position: absolut;
        Cursor: bewegen;
      }
    }