登录注册案例

又见面了！今天我们继续学习一起JS相关的小案例，登录注册案例。这个案例在日常生活中我们经常碰到，学完之后自己都能建一个漂亮的登录界面。首先先来看一下效果图（具体的图片和样式可以自己更改），如下：

这里我添加了背景图片，并且利用透明属性，大家可以按照自己的喜好装扮，该案例重点是验证码的发送，当我们点击时，验证码会自动填入，此时按钮会进行倒计时，并处于不可选中，点击添加会添加到下面的表格当中。
具体效果如下：

看来效果我们是不是迫不及待想要写出来属于自己风格的代码呢？下面我们就来看具体代码，跟之前一样一定要跟着自己敲一遍，这样效果才会最好。

<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>登录界面</title>
<style type="text/css">
*{
margin: 0 auto;
}
#box{width: 700px;            height: 500px;            text-align: center;            position: absolute;            left:0;            right: 0;            top: 0;            bottom: 0;            border-radius: 20px;            margin: auto auto;            background: rgba(251,215,103,0.2);        }
.pic{
width: 100%;
height: 100%;
left: 0;
top: 0;
position: absolute;
z-index: -1;
}
.input{
width: 400px;
height: 40px;
color: white;
background: rgba(226,246,253,0.3);
text-indent: 2em;
border-radius: 40px;
margin-top:30px;
outline: none;
border:0px;
}
.button{
text-align: center;
border-radius: 30px;
outline: none;
color: white;
background: rgba(226,246,253,0.3);
border: 0px;
}
#btn{
margin-right: 50px;
margin-top: 30px;
width: 150px;
height: 30px;
}
#add{
margin-left: 50px;
margin-top: 30px;
width: 150px;
height: 30px;
}
table {
width: 60%;
margin: 20px auto;
color: white;
border-collapse: collapse;
}
::-webkit-input-placeholder {color:    white;}
</style>
</head>
<body>
<img src="img/acg.gy_44.jpg" class="pic"/>
<div id="box">
<input type="text" placeholder="请输入手机号" id="phone" class="input"/><br/>
<input type="text" placeholder="请输入验证码" id="number" class="input"/><br/>
<input type="button" id="btn" class="button" value="发送验证码" onclick="count()"/>
<input type="button" id="add" class="button" value="添加"/><br/>            <table>
<thead>
<tr>
<th>序号</th>
<th>手机号码</th>
<th>验证号码</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
<script>
var phone = document.getElementById("phone");
var random = document.getElementById("number");
var content = document.getElementById("btn");
var add = document.getElementById("add");
var tbody = document.querySelector("tbody");
var arr = [];
var str = '';
var clock='';
var num =10;
//利用定时器进行倒计时
function count(){
content.disabled =true;
content.value = num+"秒重新发送验证码";
random.value = Math.floor((Math.random() * 1000000) + 1);            clock = setInterval(daoShu,1000);
//setInterval(函数名，时间)---函数名后面不能加（）
}
//计时器当中的函数
function daoShu(){
num--;
if(num>0){
content.value = num+"秒重新发送验证码";
}else{
clearInterval(clock);
content.disabled = false;
content.value = "发送验证码";
num=10;
}
}
//添加事件
add.onclick = function(){
var obj ={
id:+new Date,
phone:phone.value,
random:random.value,
}
arr.push(obj);
phone.value="";
random.value="";
showPage(arr);
}
//渲染事件
function showPage(){
var str = '';
for(var i =0;i<arr.length;i++){
str+="<tr/>"+
"<td>"+(i+1)+"</td>"+
"<td>"+arr[i].phone+"</td>"+                "<td>"+arr[i].random+"</td>"+
"<td>"+                "<button type='button' οnclick=del("+arr[i].id+") class='button'>删除</button>"                +"</td>"+"</tr>"
}
tbody.innerHTML=str;
}
//删除事件
function del(id){
for(var i = 0;i<arr.length;i++){
if(id == arr[i].id){               arr.splice(i,1);                showPage(arr);            }           }                   }            </script></html>

该案例中对于倒计时的实现时利用定时器，时该案例的核心，所以一定要掌握住setInterVal()定时器的应用。

JS新手案例---登录注册相关推荐

Js实战--02登录注册
Js实战–02登录注册文章目录 Js实战--02登录注册一.HTML布局二.样式 1.页面效果图三.Js特效效果展示网站:https://www.bilibili.com/video/BV1 ...
使用html+css+js实现的登录注册页面
使用html+css+js实现的登录注册页面这学期学了web,按照自己的想法实现下面的登录注册页面. 在注册页面里,使用js实现对邮箱格式.密码强度和密码一致性的检查. 源码放在github上,顺带 ...
头条案例登录注册功能
1.准备 #1.1 创建组件并配置路由 1.创建 src/views/login/index.vue 并写入以下内容 <template><div class="login ...
node.js+vue.js+mysql实现登录注册的功能（前后端分离）
参考教程:github源码地址 Node.js+Mysql+Vue+ElementUI 实现登录注册注销功能 1 准备 1.1 MySQL数据库参考教程:NodeJS连接MySql.易百教程.菜鸟教 ...
【HTML,CSS,JS】选项卡+登录注册界面
选项卡+登录注册界面源码 HTML CSS JavaScript 效果源码 HTML <!DOCTYPE html> <html><head><meta ...
Node.js模拟实现登录注册
一:建文件夹,搭建目录项目开始前先建好文件夹目录,如下图: 强调一点:是什么样的文件类型就放到什么类型的文件夹中,不要搞混,尤其是在项目当中要特别注意!!! 二:写静态页面 1./register注 ...
JavaWeb_12_jdbc_改造MVC案例(登录注册)
总纲: 改造数据库应用(以前是xml现在是mysql) 1.导入数据库驱动 2.为应用创建相应的库和表 3.改造dao 4.改造service 5.使用工厂模式,即使底层换了,业务层一行代码也不用改 ...
HTML+CSS+JS实现个人相册登录注册
一.任务一完成<个人相册>项目登录页面要求: 使用正则表达式验证邮箱密码长度至少为6位且为字母与数字的组合二.任务二完成<个人相册>项目注册页面要求: 使用正则表达 ...
(完)④、iOS-RAC-在实际开发的使用-以登录注册为例子
iOS RAC系列 ①.iOS-RAC的开发用法-底层分析以及总结 ②.iOS-RAC-核心类分析-RACPassthroughSubscriber订阅者-RACScheduler调度者-RACDis ...

JS新手案例---登录注册

登录注册案例

JS新手案例---登录注册相关推荐

最新文章

热门文章