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

最新推荐文章于 2022-10-31 00:12:10 发布

popping_Sun

最新推荐文章于 2022-10-31 00:12:10 发布

阅读量1.2k

点赞数 1

分类专栏：新手教学文章标签： css html vue.js javascript

本文链接：https://blog.csdn.net/popping_sun/article/details/109433673

版权

新手教学专栏收录该内容

8 篇文章 1 订阅

订阅专栏

登录注册案例

又见面了！今天我们继续学习一起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>