Use javascript to create dynamic QQ registration page

Use javascript to create dynamic QQ registration page

1. Introduction

Let's see how to write a registration page in HTML and use JS to load user input responses. Let me post the picture first. It would be a shame to not post the picture. Here is the link to the Fdog registration case.

insert image description here

1. Basic layout

First, let's analyze the layout. The layout in the figure is divided into two major sections, the left and right sections, and the right section includes three major sections:

insert image description here

Let's start with a horizontal layout and set the width on the left to 25% and the width on the right to 75%.

insert image description here

<div class="fdogback"></div>
<div class="fdogtext"></div>
.fdogback {
	 background-color: aqua;
	float: left;
	width: 25%;
}

.fdogtext {
	background-color: red;
	float: left;
	width: 75%;
}


insert image description here

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

Similar to the CSS layout above, remember to use percentages for layout.

2. Automatically switch pictures

Now that the basic layout is ready, let's write a program to automatically switch the picture on the left. First, we need pictures. Here are four pictures of the same size that I have prepared.
insert image description here

In the left box, add an img tag and give it an id.

<div class="fdogback">
	<img src="img/background02.png" id="backimg" style="height: 100%;" />
</div>

Create a js file and set it to change the value of src in backimg with id every 5 seconds

window.onload = init;
var n = 1; //Number of image markers var dingshi; //Timer to make the image move function init() {
	dingshi = window.setInterval("tupian()", 5000);
}
//Change the image function tupian() {
	var obj = document.getElementById("backimg");
	n++;
	if (n >= 5) {
		n = 1;
	}
	obj.src = "img/background0" + n + ".png";
}

Apply js in html

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

When the value is 1000, the effect is as follows

insert image description here

3. Add content

Add a ul inside the first box.

<div class="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;">Download Fdog</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;">Home</a></li>
    </ul>
</div>

The second box adds the form

<div class="fdogtext_2">
	<div id="mh1">
	<span style="font-size: 48px;">Welcome to register Fdog</span>
	</div>
	<div id="mh2">
	<span style="font-size: 30px;">Enjoy communication every day. </span>
	</div>
	<form action="FdogMaven" name="form" method="post">
	<div style="height: 30px; "></div>
	<input tyle="text" id="userName" name="username" placeholder="nickname" onBlur="checkUserName()" oninput="checkUserName()" 
	value='<%=request.getParameter("username")==null?"":request.getParameter("username")%>'/>
	<div id="um">
	<span class="default" id="nameErr" style="color: white;"></span>
	</div>
	<input type="password" id="userPasword" name="password" placeholder="password" onBlur="checkPassword()" oninput="checkPassword()" 
	value='<%=request.getParameter("password")==null?"":request.getParameter("password")%>'/>
	<div id="pw">
	<span class="default" id="passwordErr" style="color: white;"></span>
	</div>
	<span>
	<select name="comboxphone" id="comboxphone">
		<option>China+86</option>
		<option>Hong Kong Special Administrative Region, China +852</option>
		<option>Macao Special Administrative Region, China +853</option>
		<option>Taiwan, China +886</option>
	</select>
	<input type="text" id="userPhone" name="phone" placeholder="Phone number" onBlur="checkPhone()" oninput="checkPhone()" 
	value='<%=request.getParameter("phone")==null?"":request.getParameter("phone")%>'/>
	</span>
	<div style="height: 50px; width: 490px; margin: 0 auto; text-align: left; color: gray;">
	<span>You can retrieve your password through this phone number&nbsp;</span>
	<span class="default" id="phoneErr" style="color: white;"></span>
	</div>
	<div id="codediv" style="height: 100px; width:100%;">
	<input tyle="text" id="code" name="verificationcode" placeholder="Verification code" />
	<input type="button" id="codebutton" value="Get SMS verification code" onclick="codeclick(this)"/>
	<div style="height: 50px; width: 490px; margin: 0 auto; text-align: left; color: gray;">
	<span class="default" id="codeErr" style="color: white;"></span>
	</div>
	</div>
	<input type="submit" id="up" class="register" value="Register now" onclick="this.form.submit();"/>
	<div style="height: 30px;width: 490px; margin: 0 auto; text-align: left; color: gray;">
	<p><input type="checkbox" checked="checked" />
	I have read and agree to the relevant terms of service and privacy policy <img id="imgupdown" style="height: 16px;" src="img/up.png" onclick="lableclick()"/> 
	</p>
	</div>
	<div id="clause" style="height: 100px; width: 480px; text-align: left; margin: 0 auto; display: none;">
	<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" style="text-decoration: none; color: cornflowerblue;" >《Fdog Number Rules》</a><br>
	<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" style="text-decoration: none; color: cornflowerblue;" > Privacy Agreement</a><br>
	<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" style="text-decoration: none; color: cornflowerblue;">Fdog Registration and Use Agreement</a>
</div>
	</form>
</div>

The third box adds copyright information

<div class="fdogtext_3">
	Copyright © 2021.Fdog All rights reserved.
	<br class="brcopy">
	<a href="https://beian.miit.gov.cn/" rel="external nofollow" style="text-decoration: none; color: black; color: gray;">MengICP No. 2021000567</a>
</div>

The final effect, the color is to distinguish different boxes

insert image description here

4. Automatic scaling, display and hiding of controls

Careful people may have noticed the dynamic picture at the beginning. When the page is zoomed to a certain extent, the picture on the left will no longer be displayed. How to do this?

This is it. When the width is less than 1100px, the left panel will be hidden, and the picture will also be hidden.

@media (max-width:1100px) {
	.fdogback {
		display: none;
	}
}

What if the page is reduced to the size of a mobile phone? We can use the zoom function to scale the page.

@media (max-width:600px) {
body{
	transform: scale(0.53333);
}

The effect is as shown


insert image description here

5. Respond to user input

insert image description here

How to give a response prompt based on the user's input is also determined by js.

For example, our nickname response, when the mouse enters content into the input box, the checkUserName function in js is triggered.

//Verify username function checkUserName() {
	var username = document.getElementById('userName');
	var errname = document.getElementById('nameErr');
	//var pattern = /^\w{3,}$/; //Regular expression for username format: username must be at least three characters long if (username.value.length == 0) {
		errname.innerHTML = "Username cannot be empty"
		username.style.borderColor = 'red'
		errname.style.color = 'red'
		return false;
	}
	if (username.value.length <= 1) {
		errname.innerHTML = "The user name does not meet the standard, at least three digits"
		username.style.borderColor = 'red'
		errname.style.color = 'red'
		return false;
	} else {
		errname.innerHTML = "This nickname is available"
		username.style.borderColor = 'lime'
		errname.style.color = 'green'
		return true;
	}
}

Or maybe it's a countdown?

//Verify the SMS verification code var clock = '';
var nums = 60;
var btn;
function codeclick(thisBtn) {
	var codeErr = document.getElementById('codeErr');
	codeErr.innerHTML = "The message has been sent, please check it";
	codeErr.style.color = 'green'
	var name = checkUserName();
	var password = checkPassword();
	var phone = checkPhone();
	if (name && password && phone) {
		btn.disabled = true; //Button is not clickable btn.value = nums+'can be retrieved after seconds';
		clock = setInterval(doLoop,1000); //Execute once a second }
}
function doLoop()
{
	nums--;
	if(nums>0){
		btn.value = nums+'can be retrieved after seconds';
	}else{
		clearInterval(clock); //Clear js timer btn.disabled = false;
		btn.value = 'Get SMS verification code';
		nums =10;
	}
}

In the past, I often browsed blogs and found that someone’s blog page had an anime character, and the perspective would follow the mouse. I found it for you! View image

insert image description here

This is the anime character in the picture. You can also replace the jsonPath in the code.

<script>
	L2Dwidget.init({ 
		"model": { "jsonPath":"https://unpkg.com/[email protected]/assets/shizuku.model.json", "scale": 1, "hHeadPos":0.5, "vHeadPos":0.618 },
		"display": { "position": "right", "width": 100, "height": 200, "hOffset": 420, "vOffset": 120 }, 
		"mobile": { "show": true, "scale": 0.5 },
		"react": { "opacityDefault": 0.7, "opacityOnHover": 0.2 } 
	});
</script>

This is the line floating behind the background.

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
	$(function(){
		function n(n,e,t){
			return n.getAttribute(e)||t
		}
		function e(n){
			return document.getElementsByTagName(n)
		}
		function t(){
			var t=e("script"),o=t.length,i=t[o-1];
			return{l:o,z:n(i,"zIndex",-1),o:n(i,"opacity",.8),c:n(i,"color","0,0,0"),n:n(i,"count",150)}
		}
		function o(){
			a=m.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,
		    c=m.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight
		}
		function i(){
			r.clearRect(0,0,a,c);
			var n,e,t,o,m,l;
			s.forEach(function(i,x){
			for(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("canvas"),d=t(),l="c_n"+dl,r=m.getContext("2d"),
		  x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||
		 function(n){
		      window.setTimeout(n,1e3/45)
		    },
		    w=Math.random,y={x:null,y:null,max:2e4};m.id=l,m.style.cssText="position:fixed;top:0;left:0;z-index:"+d.z+";opacity:"+do,e("body")[0].appendChild(m),o(),window.onresize=o,
		    window.onmousemove=function(n){
		      n=n||window.event,yx=n.clientX,yy=n.clientY
		    },
		    window.onmouseout=function(){
		      yx=null,yy=null
		    };
			 for(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]),
			  setTimeout(function(){i()},100)
			});
</script>

This is the end of this article about using javascript to create dynamic QQ registration pages. For more relevant js content about creating dynamic QQ pages, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • jsp+dao+bean+servlet (MVC mode) to implement simple user login and registration pages
  • Using JSP to implement a simple user login and registration page sample code analysis
  • JS implements the registration page with verification code countdown
  • JS A simple registration page example
  • JavaScript example of completing registration page form validation
  • Node.js implements login and registration page
  • Native js verification simple registration login page
  • js regular expression registration page form validation
  • js current page login registration box, fixed div, bottom shadow example code
  • JS current page login registration box, fixed DIV, bottom shadow example code
  • JavaScript to display and hide information such as registration page
  • PHP user registration page uses js to perform form verification specific example
  • JS, CSS and HTML to implement the registration page

<<:  Instructions for deploying projects to remote machines using the Publish Over SSH plugin in Jenkins

>>:  Linux uses binary mode to install mysql

Recommend

Introduction to Linux system swap space

Swap space is a common aspect of computing today,...

Tutorial on building svn server with docker

SVN is the abbreviation of subversion, an open so...

HTML tags list and usage instructions

List of HTML tags mark type Name or meaning effec...

Mini Program to Implement Text Circular Scrolling Animation

This article shares the specific code of the appl...

How to modify Ubuntu's source list (source list) detailed explanation

Introduction The default source of Ubuntu is not ...

The most creative 404 page design in history effectively improves website user experience

We don’t often encounter 404 pages when we browse...

A brief discussion on which fields in Mysql are suitable for indexing

Table of contents 1 The common rules for creating...

vue-table implements adding and deleting

This article example shares the specific code for...

Linux's fastest text search tool ripgrep (the best alternative to grep)

Preface Speaking of text search tools, everyone m...

Detailed explanation of the execution principle of MySQL kill command

Table of contents Kill instruction execution prin...

ERROR 1862 (HY000): Your password has expired. To log in you must change it using a .....

error message: ERROR 1862 (HY000): Your password ...

How to reasonably use the redundant fields of the database

privot is the intermediate table of many-to-many ...

VMware Workstation Pro installs Win10 pure version operating system

This article describes the steps to install the p...

Two ways to solve the problem of MySQL master-slave database not being synchronized

Table of contents Two ways to solve the problem o...

Analyze the selection problem of storing time and date types in MySQL

In general applications, we use timestamp, dateti...