html创建qq注册页面,用javascript制作qq注册动态页面
一.前言
我们来看如何用html写一个注册页面并使用js加载用户输入响应。先上图,没图都是耍流氓,附上本次案例链接Fdog注册案例。
1. 基础布局
首先分析布局,图中的布局分为左右两大板块,右边的板块又包括三大板块:
我们先来一个水平布局,并设置左边的宽为25%,右边的宽为75%
.fdogback {
background-color: aqua;
float: left;
width: 25%;
}
.fdogtext {
background-color: red;
float: left;
width: 75%;
}
和上面布局的css类似,切记一定要使用百分比的方式来布局。
2. 自动切换图片
现在基本布局已经搞好,我们写来自动切换左边的图片,首先得有图片,这是我准备好的四张尺寸一样的图片。
在左边的盒子,添加一个img标签,给他添加一个id。
创建一个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
当值为1000时效果入下
3. 添加内容
第一个盒子里面添加一个ul,
- 意见反馈
- 下载Fdog
- 首页
第二个盒子添加表单
欢迎注册Fdog
每一天,乐在沟通。
value=''/>
value=''/>
中国+86
中国香港特别行政区+852
中国澳门特别行政区+853
中国台湾地区+886
value=''/>
可通过该手机号找回密码
我已阅读并同意相关服务条款和隐私政策
《Fdog号码规则》
《隐私协议》
《Fdog注册使用协议》
第三个盒子添加版权信息
Copyright © 2021.花狗Fdog All rights reserved.
蒙ICP备2021000567号
最终效果,颜色是为了区分不同的盒子
4. 自动缩放,控件的显示和隐藏
细心的你可能看到了开头动态图,当页面缩放到一定程度,左侧的图片将不再显示,如何做到呢?
就是这个东西,当宽度小于1100px时,将隐藏左边的板块,图片也因此隐藏。
@media (max-width:1100px) {
.fdogback {
display: none;
}
}
如果页面一直缩小,直到手机大小呢?,我们可以使用缩放功能,将页面进行缩放。
@media (max-width:600px) {
body{
transform: scale(0.53333);
}
效果如图
5.响应用户输入操作
如何根据用户输入的内容给出响应的提示,这里也是使用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;
}
}
之前,经常逛博客,发现有人博客页面有一个动漫人物,并且视角还会跟着鼠标来动,我帮你们找到了!看图
这个是图中的那个动漫人物,还可以替换代码中的jsonPath。
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 }
});
这个是背景后面悬浮的线条。
$(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
null!==n.x&&null!==n.y&&(o=i.x-n.x,m=i.y-n.y,
l=o*o+m*m,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.οnresize=o,
window.οnmοusemοve=function(n){
n=n||window.event,y.x=n.clientX,y.y=n.clientY
},
window.οnmοuseοut=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)
});
到此这篇关于用javascript制作qq注册动态页面的文章就介绍到这了,更多相关js制作qq动态页面内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
html创建qq注册页面,用javascript制作qq注册动态页面相关推荐
- html js控制页面蒙版,javascript实现蒙版与禁止页面滚动
本文实例为大家分享了javascript实现蒙版与禁止页面滚动的具体代码,供大家参考,具体内容如下 项目需求:页面很长,要求加个蒙版,点击特定位置蒙版消失可以滑动页面,否则蒙版存在页面不可以滑动:要同 ...
- h5 php登录注册页面验证,H5制作一个注册页面的代码实例
HTML5写的注册页面,正在学习html5的朋友可以参考下 代码如下: register.html function play(){ document .getElementById("me ...
- 好友列表页面java_怎样制作QQ好友列表的界面?
我写了一个简单的,自己改改,要睡觉了. package qq; public class Friend { //昵称 private String displayName; //唯一标识 privat ...
- 手机计算机怎么改背景,qq聊天背景隔离区怎么制作?QQ隔离区背景制作教程(电脑版手机版)...
最近很火的qq隔离区聊天背景图片热烈受到小伙伴们的欢迎,不会制作此背景的只能在网上翻来覆去的寻找属于自己风格的背景,如今,小编为大家开了QQ隔离区背景制作教程,这下自己喜欢什么颜色,喜欢什么文字都可以 ...
- php 判断用户是否刷新,如何在php和ajax中创建一个注册页面,它会在不刷新页面的情况下检查某个用户名是否已经存在? - php...
我有一个register.php文件,它为我的网站创建了新用户.但是,如果某人使用已经存在的用户名,则仅当他输入整个表单并提交时才会生成错误.如何实现Ajax / Jquery以在不提交表单的情况下显 ...
- 【移动端网页布局】移动端网页布局基础概念 ⑧ ( 移动端页面布局方案 | 单独制作的移动端页面 - 主流 | 响应式页面兼容移动端 - 开发难度较大 )
文章目录 一.移动端页面布局方案 1.单独制作的移动端页面 2.响应式页面兼容移动端 一.移动端页面布局方案 移动端页面方案 : 单独制作的移动端页面 : 主流开发方案 , PC 端 与 移动端 访问 ...
- python django 动态网页_python27+django1.9创建app的视图及实现动态页面
一.简易静态视图 views文件里写: from django.http import HttpResponse def hello(request): return HttpResponse(&qu ...
- Python分布式动态页面爬虫研究
Selenium 的 Webdriver 爬取动态网页效果虽然不错,但效率方面并不如人意.最近一直研究如何提高动态页面爬虫的效率,方法无非高并发和分布式两种.过程中有很多收获,也踩了不少坑,在此一并做 ...
- 利用scrapy-splash爬取JS生成的动态页面
目前,为了加速页面的加载速度,页面的很多部分都是用JS生成的,而对于用scrapy爬虫来说就是一个很大的问题,因为scrapy没有JS engine,所以爬取的都是静态页面,对于JS生成的动态页面都无 ...
- html .html后缀的网页百度收录吗,百度收录动态页面吗
百度收录动态页面吗 内容导读:总结来说,百度会正常收录动态页面,但是如果可以,大家还是尽量把URL处理称为以html结尾的伪静态页面. 问题:百度收录动态页面吗? 问题补充:都是百度更喜欢收录静态或者 ...
最新文章
- 2021 年了,机器/深度学习还有哪些坑比较好挖?
- 香港电影黄金配角,虽其貌不扬,演技却吊打小鲜肉,你认识几个
- 编译-C++支持iOS静态库的脚本学习
- C++---肿瘤面积
- 汇编语言答案-王爽第三版
- Stream流的使用函数式接口
- 同济大学 线性代数 第六版 pdf_线性代数同济大学第六版第一章课后习题答案
- mysql 数据类型总结
- 研磨设计模式-设计模式的基础-设计模式的学习【思路】
- 数字电子技术基础(四):门电路(TTL)
- linux操作系统(云服务器中的使用)
- 考研复试数据库原理课后习题(一)——绪论
- Mac go环境搭建Idea配置环境
- 【Unity3D开发小游戏】《青蛙过河》Unity开发教程
- 遥感影像地图分类识别的研究与实现
- [附源码]计算机毕业设计JAVA停车场管理系统
- 嵌入式硬件(四)常用模拟集成电路
- 【LeetCode】第374题——猜数字大小(难度:简单)
- JetBrains 推出全新数据科学 IDE——DataSpell
- ezgo安装拼音输入法(fcitx)
热门文章
- Java笔试题黑棋围白棋_2016恒生电子笔试题_软件测试笔试题100精讲_恒生电子笔试题目(2)...
- 一个非常好用的代理服务器软件AllegroSurf
- java档案管理系统_基于JAVA的简单档案管理系统
- Redis设计与实现学习总结
- 一个十二年老程序猿的碎碎念
- 你好,Wi-Fi 6
- E-Prime 软件中常用的 inline 语句
- 高恪新路由三硬盘_新路由3 newifi D2路由器刷机breed高恪固件详细教程
- ubuntu 12.04 安装intel i5-6500 的集成网卡驱动【自身经历,验证OK】
- 使用计算机终端情况,朗威V1.0计算机终端保密检查系统