用javascript制作qq注册动态页面


Posted in Javascript onApril 14, 2021

一.前言

我们来看如何用html写一个注册页面并使用js加载用户输入响应。先上图,没图都是耍流氓,附上本次案例链接Fdog注册案例

用javascript制作qq注册动态页面


1. 基础布局

首先分析布局,图中的布局分为左右两大板块,右边的板块又包括三大板块:

用javascript制作qq注册动态页面

我们先来一个水平布局,并设置左边的宽为25%,右边的宽为75%

用javascript制作qq注册动态页面

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

.fdogtext {
	background-color: red;
	float: left;
	width: 75%;
}
<div class="fdogtext">
<div class="fdogtext_1"></div>
<div class="fdogtext_2"></div>
<div class="fdogtext_3"></div>
</div>

和上面布局的css类似,切记一定要使用百分比的方式来布局。


2. 自动切换图片

现在基本布局已经搞好,我们写来自动切换左边的图片,首先得有图片,这是我准备好的四张尺寸一样的图片。
用javascript制作qq注册动态页面

在左边的盒子,添加一个img标签,给他添加一个id。

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

创建一个js文件,设置每5秒改变一次id为backimg中src的值

window.onload = init;
var n = 1; //图片标记数
var dingshi; //让图片动的定时器
function init() {
	dingshi = window.setInterval("tupian()", 5000);
}
//更换图片
function tupian() {
	var obj = document.getElementById("backimg");
	n++;
	if (n >= 5) {
		n = 1;
	}
	obj.src = "img/background0" + n + ".png";
}

在html应用js

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

当值为1000时效果入下

用javascript制作qq注册动态页面


3. 添加内容

第一个盒子里面添加一个ul,

<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;">意见反馈</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</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;">首页</a></li>
    </ul>
</div>

第二个盒子添加表单

<div class="fdogtext_2">
	<div id ="mh1">
	<span style="font-size: 48px;">欢迎注册Fdog</span>
	</div>
	<div id ="mh2">
	<span style="font-size: 30px;">每一天,乐在沟通。</span>
	</div>
	<form action="FdogMaven" name="form" method="post">
	<div style="height: 30px; "></div>
	<input tyle="text" id="userName" name="username" placeholder="昵称" 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="密码" 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>中国+86</option>
		<option>中国香港特别行政区+852</option>
		<option>中国澳门特别行政区+853</option>
		<option>中国台湾地区+886</option>
	</select>
	<input type="text" id="userPhone" name="phone" placeholder="手机号" 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>可通过该手机号找回密码&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="验证码" />
	<input type="button" id="codebutton" value="获取短信验证码" 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="立即注册" onclick="this.form.submit();"/>
	<div style="height: 30px;width: 490px;  margin: 0 auto; text-align: left; color: gray;">
	<p><input type="checkbox" checked="checked" />
	我已阅读并同意相关服务条款和隐私政策 
	<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号码规则》</a><br>
	<a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" style="text-decoration: none; color: cornflowerblue;" >《隐私协议》</a><br>
	<a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  style="text-decoration: none; color: cornflowerblue;">《Fdog注册使用协议》</a>
</div>
	</form>
</div>

第三个盒子添加版权信息

<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;">蒙ICP备2021000567号</a>
</div>

最终效果,颜色是为了区分不同的盒子

用javascript制作qq注册动态页面

4. 自动缩放,控件的显示和隐藏

细心的你可能看到了开头动态图,当页面缩放到一定程度,左侧的图片将不再显示,如何做到呢?

就是这个东西,当宽度小于1100px时,将隐藏左边的板块,图片也因此隐藏。

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

如果页面一直缩小,直到手机大小呢?,我们可以使用缩放功能,将页面进行缩放。

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

效果如图


用javascript制作qq注册动态页面

5.响应用户输入操作

用javascript制作qq注册动态页面

如何根据用户输入的内容给出响应的提示,这里也是使用js进行判断的。

例如我们的昵称响应,当鼠标向输入框输入内容时,触发js中的checkUserName函数。

//验证用户名   
function checkUserName() {
	var username = document.getElementById('userName');
	var errname = document.getElementById('nameErr');
	//var pattern = /^\w{3,}$/; //用户名格式正则表达式:用户名要至少三位 
	if (username.value.length == 0) {
		errname.innerHTML = "用户名不能为空"
		username.style.borderColor = 'red'
		errname.style.color = 'red'
		return false;
	}
	if (username.value.length <= 1) {
		errname.innerHTML = "用户名不合规范,至少三位"
		username.style.borderColor = 'red'
		errname.style.color = 'red'
		return false;
	} else {
		errname.innerHTML = "该昵称可用"
		username.style.borderColor = 'lime'
		errname.style.color = 'green'
		return true;
	}
}

又或者是倒计时

//验证发送短信验证码
var clock = '';
var nums = 60;
var btn;
function codeclick(thisBtn) {
	var codeErr = document.getElementById('codeErr');
	codeErr.innerHTML = "短信已发送,请注意查收";
	codeErr.style.color = 'green'
	var name = checkUserName();
	var password = checkPassword();
	var phone = checkPhone();
	if (name && password && phone) {
		btn.disabled = true; //按钮不可点击
		btn.value = nums+'秒后可重新获取';
		clock = setInterval(doLoop,1000); //一秒执行一次
	}
}
function doLoop()
{
	nums--;
	if(nums>0){
		btn.value = nums+'秒后可重新获取';
	}else{
		clearInterval(clock);//清除js定时器
		btn.disabled = false;
		btn.value = '获取短信验证码';
		nums =10;
	}
}

之前,经常逛博客,发现有人博客页面有一个动漫人物,并且视角还会跟着鼠标来动,我帮你们找到了!看图

用javascript制作qq注册动态页面

这个是图中的那个动漫人物,还可以替换代码中的jsonPath。

<script>
	L2Dwidget.init({ 
		"model": { "jsonPath":"https://unpkg.com/live2d-widget-model-shizuku@1.0.5/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>

这个是背景后面悬浮的线条。

<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*=i.x>a||i.x<0?-1:1,i.ya*=i.y>c||i.y<0?-1:1,r.fillRect(i.x-.5,i.y-.5,1,1),e=x+1;e<u.length;e++)n=u[e],
					   null!==n.x&&null!==n.y&&(o=i.x-n.x,m=i.y-n.y,
					   l=o*o+m*m,l<n.max&&(n===y&&l>=n.max/2&&(i.x-=.03*o,i.y-=.03*m),
						t=(n.max-l)/n.max,r.beginPath(),r.lineWidth=t/2,r.strokeStyle="rgba("+d.c+","+(t+.2)+")",r.moveTo(i.x,i.y),r.lineTo(n.x,n.y),r.stroke()))
				  }),
				  x(i)
		    }
		  var a,c,u,m=document.createElement("canvas"),d=t(),l="c_n"+d.l,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:"+d.o,e("body")[0].appendChild(m),o(),window.onresize=o,
		    window.onmousemove=function(n){
		      n=n||window.event,y.x=n.clientX,y.y=n.clientY
		    },
		    window.onmouseout=function(){
		      y.x=null,y.y=null
		    };
			  for(var s=[],f=0;d.n>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>

到此这篇关于用javascript制作qq注册动态页面的文章就介绍到这了,更多相关js制作qq动态页面内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
AJAX使用了UpdatePanel后无法使用alert弹出脚本
Apr 02 Javascript
监控 url fragment变化的js代码
Apr 19 Javascript
js获取电脑分辨率的思路及操作
Nov 22 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
Aug 07 Javascript
学习javascript面向对象 理解javascript对象
Jan 04 Javascript
jQuery Easyui快速入门教程
Aug 21 Javascript
layui问题之模拟select点击事件的实例讲解
Aug 15 Javascript
详解微信小程序input标签正则初体验
Aug 18 Javascript
vue-router 手势滑动触发返回功能
Sep 30 Javascript
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
vue打包npm run build时候界面报错的解决
Aug 13 Javascript
输入框跟随文字内容适配宽实现示例
Aug 14 Javascript
利用javaScript处理常用事件详解
Apr 14 #Javascript
带你彻底理解JavaScript中的原型对象
Apr 14 #Javascript
游戏开发中如何使用CocosCreator进行音效处理
详解CocosCreator项目结构机制
如何使用CocosCreator对象池
Apr 14 #Javascript
CocosCreator如何实现划过的位置显示纹理
JS监听Esc 键触发事键
Apr 14 #Javascript
You might like
php学习之流程控制实现代码
2011/06/09 PHP
php设置允许大文件上传示例代码
2014/03/10 PHP
PHP常用正则表达式集锦
2014/08/17 PHP
PHP比你想象的好得多
2014/11/27 PHP
Thinkphp框架 表单自动验证登录注册 ajax自动验证登录注册
2016/12/27 PHP
php通过header发送自定义数据方法
2018/01/18 PHP
laravel 之 Eloquent 模型修改器和序列化示例
2019/10/17 PHP
JQuery UI皮肤定制
2009/07/27 Javascript
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
2010/08/05 Javascript
自己动手开发jQuery插件教程
2011/08/25 Javascript
面向对象的Javascript之三(封装和信息隐藏)
2012/01/27 Javascript
Bootstrap每天必学之缩略图与警示窗
2015/11/29 Javascript
jQuery UI仿淘宝搜索下拉列表功能
2017/01/10 Javascript
jsonp跨域及实现百度首页联想功能的方法
2018/08/30 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
2019/09/05 Javascript
ES6 async、await的基本使用方法示例
2020/06/06 Javascript
[00:35]TI7不朽珍藏III——寒冰飞龙不朽展示
2017/07/15 DOTA
Python、PyCharm安装及使用方法(Mac版)详解
2017/04/28 Python
Django框架实现逆向解析url的方法
2018/07/04 Python
Python Pandas批量读取csv文件到dataframe的方法
2018/10/08 Python
浅谈python中拼接路径os.path.join斜杠的问题
2018/10/23 Python
Django项目之Elasticsearch搜索引擎的实例
2019/08/21 Python
django的autoreload机制实现
2020/06/03 Python
通过cmd进入python的步骤
2020/06/16 Python
路易威登和香奈儿手袋:LuxeDH
2017/01/12 全球购物
StubHub中国:购买和出售全球活动门票
2020/01/01 全球购物
应聘美工求职信
2013/11/07 职场文书
档案检查欢迎词
2014/01/13 职场文书
中秋节超市促销方案
2014/01/30 职场文书
邓小平理论心得体会
2014/09/09 职场文书
说好普通话圆梦你我他演讲稿
2014/09/21 职场文书
2014年评职称工作总结
2014/11/20 职场文书
团组织推优材料
2014/12/29 职场文书
汇报材料怎么写
2014/12/30 职场文书
上课迟到检讨书范文
2015/05/06 职场文书
SpringBoot2零基础到精通之数据库专项精讲
2022/03/22 Java/Android