Verwenden Sie Javascript, um eine dynamische QQ-Registrierungsseite zu erstellen

<div Klasse="fdogback"></div>
<div Klasse="fdogtext"></div>

.fdogback {
	 Hintergrundfarbe: Aqua;
	schweben: links;
	Breite: 25 %;
}

.fdogtext {
	Hintergrundfarbe: rot;
	schweben: links;
	Breite: 75 %;
} 

<div Klasse="fdogtext">
<div Klasse="fdogtext_1"></div>
<div Klasse="fdogtext_2"></div>
<div Klasse="fdogtext_3"></div>
</div>

<div Klasse="fdogback">
	<img src="img/background02.png" id="backimg" style="Höhe: 100%;" />
</div>

Fenster.onload = init;
var n = 1; //Anzahl der Bildmarkierungen var dingshi; //Timer zum Verschieben des Bildes function init() {
	dingshi = window.setInterval("tupian()", 5000);
}
//Ändere die Bildfunktion tupian() {
	var obj = document.getElementById("backimg");
	n++;
	wenn (n >= 5) {
		n = 1;
	}
	obj.src = "img/background0" + n + ".png";
}

<script src="js/backv.js"></script>

<div Klasse="fdogtext_1">
	<ul-ID = "mul">
		<li style="float: right; list-style: none; margin-right: 30px;"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" style="text-decoration: none; color: gray;">Feedback</a></li>
		<li style="float: right; list-style: none; margin-right: 30px;"><a href="http://127.0.0.1:8848/newfdog/download.html" rel="external nofollow" style="text-decoration: none; color: gray;">Fdog herunterladen</a></li>
		<li style="float: right; list-style: none; margin-right: 30px;"><a href="http://127.0.0.1:8848/newfdog/index.html" rel="external nofollow" style="text-decoration: none; color: gray;">Startseite</a></li>
    </ul>
</div>

<div Klasse="fdogtext_2">
	<div id="mh1">
	<span style="font-size: 48px;">Willkommen bei der Registrierung von Fdog</span>
	</div>
	<div id="mh2">
	<span style="font-size: 30px;">Genießen Sie die Kommunikation jeden Tag. </span>
	</div>
	<form action="FdogMaven" name="form" method="post">
	<div Stil="Höhe: 30px; "></div>
	<input tyle="text" id="Benutzername" name="Benutzername" Platzhalter="Spitzname" onBlur="checkUserName()" oninput="checkUserName()" 
	Wert='<%=request.getParameter("Benutzername")==null?"":request.getParameter("Benutzername")%>'/>
	<div id="um">
	<span class="default" id="nameErr" style="color: white;"></span>
	</div>
	<input type="Passwort" id="userPassword" name="Passwort" placeholder="Passwort" onBlur="checkPassword()" oninput="checkPassword()" 
	Wert='<%=request.getParameter("Passwort")==null?"":request.getParameter("Passwort")%>'/>
	<div id="pw">
	<span class="default" id="passwordErr" style="color: white;"></span>
	</div>
	<span>
	<Name auswählen="comboxphone" ID="comboxphone">
		<option>China+86</option>
		<option>Sonderverwaltungszone Hongkong, China +852</option>
		<option>Sonderverwaltungszone Macau, China +853</option>
		<option>Taiwan, China +886</option>
	</Auswählen>
	<input type="text" id="userPhone" name="phone" placeholder="Telefonnummer" onBlur="checkPhone()" oninput="checkPhone()" 
	Wert='<%=request.getParameter("phone")==null?"":request.getParameter("phone")%>'/>
	</span>
	<div style="Höhe: 50px; Breite: 490px; Rand: 0 auto; Textausrichtung: links; Farbe: grau;">
	<span>Sie können Ihr Passwort über diese Telefonnummer abrufen&nbsp;</span>
	<span class="default" id="phoneErr" style="color: white;"></span>
	</div>
	<div id="codiertdiv" style="Höhe: 100px; Breite: 100%;">
	<input tyle="text" id="code" name="verificationcode" placeholder="Verifizierungscode" />
	<input type="button" id="codebutton" value="SMS-Bestätigungscode abrufen" onclick="codeclick(this)"/>
	<div style="Höhe: 50px; Breite: 490px; Rand: 0 auto; Textausrichtung: links; Farbe: grau;">
	<span class="default" id="codeErr" style="color: white;"></span>
	</div>
	</div>
	<input type="submit" id="up" class="register" value="Jetzt registrieren" onclick="this.form.submit();"/>
	<div style="Höhe: 30px;Breite: 490px; Rand: 0 auto; Textausrichtung: links; Farbe: grau;">
	<p><input type="checkbox" aktiviert="aktiviert" />
	Ich habe die entsprechenden Servicebedingungen und Datenschutzrichtlinien gelesen und stimme ihnen zu <img id="imgupdown" style="height: 16px;" src="img/up.png" onclick="lableclick()"/> 
	</p>
	</div>
	<div id="clause" style="Höhe: 100px; Breite: 480px; Textausrichtung: links; Rand: 0 auto; Anzeige: keine;">
	<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" style="text-decoration: none; color: cornflowerblue;" >《Fdog-Nummernregeln》</a><br>
	<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" style="text-decoration: none; color: cornflowerblue;" > Datenschutzvereinbarung</a><br>
	<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" style="text-decoration: none; color: cornflowerblue;">Fdog-Registrierungs- und Nutzungsvereinbarung</a>
</div>
	</form>
</div>

<div Klasse="fdogtext_3">
	Copyright © 2021.Fdog. Alle Rechte vorbehalten.
	<br Klasse="brkopie">
	<a href="https://beian.miit.gov.cn/" rel="external nofollow" style="text-decoration: none; color: black; color: gray;">MengICP-Nr. 2021000567</a>
</div>

@media (maximale Breite: 1100 Pixel) {
	.fdogback {
		Anzeige: keine;
	}
}

@media (maximale Breite: 600px) {
Körper{
	transformieren: Skalierung (0,53333);
}

//Benutzernamen überprüfen Funktion checkUserName() {
	var Benutzername = document.getElementById('Benutzername');
	var errname = document.getElementById('nameErr');
	//var pattern = /^\w{3,}$/; //Regulärer Ausdruck für das Benutzernamenformat: Der Benutzername muss mindestens drei Zeichen lang sein, wenn (Benutzername.Wert.Länge == 0) {
		errname.innerHTML = "Benutzername darf nicht leer sein"
		Benutzername.Stil.Rahmenfarbe = "rot"
		errname.style.color = "rot"
		gibt false zurück;
	}
	if (Benutzername.Wert.Länge <= 1) {
		errname.innerHTML = "Der Benutzername entspricht nicht dem Standard, mindestens dreistellig"
		Benutzername.Stil.Rahmenfarbe = "rot"
		errname.style.color = "rot"
		gibt false zurück;
	} anders {
		errname.innerHTML = "Dieser Spitzname ist verfügbar"
		Benutzername.Stil.Rahmenfarbe = "limettengrün"
		errname.style.color = "grün"
		gibt true zurück;
	}
}

//SMS-Bestätigungscode überprüfen var clock = '';
Variablennummern = 60;
var btn;
Funktion Codeklick(thisBtn) {
	var codeErr = document.getElementById('codeErr');
	codeErr.innerHTML = "Die Nachricht wurde gesendet, bitte überprüfen Sie sie";
	codeErr.style.color = "grün"
	var name = checkUserName();
	var Passwort = checkPassword();
	var Telefon = checkPhone();
	if (Name && Passwort && Telefon) {
		btn.disabled = true; //Button ist nicht anklickbar btn.value = nums+'kann nach Sekunden abgerufen werden';
		clock = setInterval(doLoop,1000); //Einmal pro Sekunde ausführen }
}
Funktion doLoop()
{
	Zahlen--;
	wenn(Zahlen>0){
		btn.value = Nums + „kann nach Sekunden abgerufen werden“;
	}anders{
		clearInterval(clock); //JS-Timer löschen btn.disabled = false;
		btn.value = 'SMS-Bestätigungscode erhalten';
		Zahlen = 10;
	}
}

<Skript>
	L2Dwidget.init({ 
		"Modell": { "jsonPath": "https://unpkg.com/[email protected]/assets/shizuku.model.json", "Skala": 1, "hHeadPos": 0,5, "vHeadPos": 0,618 },
		"Anzeige": { "Position": "rechts", "Breite": 100, "Höhe": 200, "hOffset": 420, "vOffset": 120 }, 
		"mobile": { "show": true, "scale": 0.5 },
		"Reagieren": { "DeckkraftStandard": 0,7, "DeckkraftBeimHover": 0,2 } 
	});
</Skript>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<Skript>
	$(Funktion(){
		Funktion n(n,e,t){
			return n.getAttribute(e)||t
		}
		Funktion e(n){
			Dokument zurückgeben.getElementsByTagName(n)
		}
		Funktion t(){
			var t=e("Skript"),o=t.Länge,i=t[o-1];
			return{l:o,z:n(i,"zIndex",-1),o:n(i,"Deckkraft",.8),c:n(i,"Farbe","0,0,0"),n:n(i,"Anzahl",150)}
		}
		Funktion o(){
			a=m.Breite=Fenster.Innenbreite||Dokument.Dokumentelement.Clientbreite||Dokument.Body.Clientbreite,
		    c=m.height=Fenster.innereHöhe||Dokument.Dokumentelement.Clienthöhe||Dokument.Body.Clienthöhe
		}
		Funktion i(){
			r.clearRect(0,0,a,c);
			var n, e, t, o, m, l;
			s.fürJedes(Funktion(i,x){
			für (i.x+=i.xa,i.y+=i.ya,i.xa*=ix>a||ix<0?-1:1,i.ya*=iy>c||iy<0?-1:1,r.fillRect(ix-.5,iy-.5,1,1),e=x+1;e<u.length;e++)n=u[e],
					   null!==nx&&null!==ny&&(o=ix-nx,m=iy-ny,
					   l=o*o+m*m,l<n.max&&(n===y&&l>=n.max/2&&(ix-=.03*o,iy-=.03*m),
						t=(n.max-l)/n.max,r.beginPath(),r.lineWidth=t/2,r.strokeStyle="rgba("+d.c+","+(t+.2)+")",r.moveTo(ix,iy),r.lineTo(nx,ny),r.stroke()))
				  }),
				  x(i)
		    }
		  var a, c, u, m = document.createElement("Leinwand"), d = t (), l = "c_n" + dl, r = m.getContext("2d"),
		  x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||
		 Funktion(n){
		      Fenster.setTimeout(n,1e3/45)
		    },
		    w=Math.random,y={x:null,y:null,max:2e4};m.id=l,m.style.cssText="position:fest;oben:0;links:0;z-index:"+d.z+";opacity:"+do,e("body")[0].appendChild(m),o(),window.onresize=o,
		    Fenster.onmousemove=Funktion(n){
		      n=n||Fenster.Ereignis,yx=n.ClientX,yy=n.ClientY
		    },
		    Fenster.onmouseout=Funktion(){
		      yx=null,yy=null
		    };
			 für(var s=[],f=0;dn>f;f++){
				  var h=w()*a,g=w()*c,v=2*w()-1,p=2*w()-1;s.push({x:h,y:g,xa:v,ya:p,max:6e3})
			   }
			  u=s.concat([y]),
			  setzeTimeout(Funktion(){i()},100)
			});
</Skript>