用javascript制作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-600"; }

在html应用js

当值为1000时效果入下

在这里插入图片描述

3. 添加内容

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

   意见反馈
下载Fdog
首页

第二个盒子添加表单

   欢迎注册Fdog
 每一天，乐在沟通。
 
 
 
  可通过该手机号找回密码 
  
  我已阅读并同意相关服务条款和隐私政策 
 《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; } }

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

在这里插入图片描述