表单注册下一步效果代码实例

快乐打工仔 分类:实例代码

本章节分享一段比较实用的效果。

进行表单注册的时候,点击下一步会进入另一个界面以控制注册流程。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
* {
margin:0px;
padding:0px;
}
body {
font-size: 12px;
}
th {
font-weight: bold;
}
ul, li {
margin: 0;
padding: 0;
}
span {
display: inline-block;
}
.fl {
float: left;
margin: 10px;
}
ul {
list-style: none;
}
.main {
width: 100%;
height: 1000px;
background: #ccc;
margin: 0 auto;
padding-top: 10px;
}
.content {
width: 400px;
height: 200px;
border: 1px solid #bbb;
margin: 20px auto;
background: -webkit-linear-gradient(top,#eee,#fff); /*线性渐变*/
box-shadow: 2px 2px 4px #bbb; /*阴影效果*/
}
.let {
width: 400px;
height: 200px;
}
.main .content .let ul li {
width: 380px;
}
.second, .there {
animation: pt 3s;
}
.iptext {
width: 100px;
height: 24px;
line-height: 24px;
border: 1px solid #bbb;
border-radius: 4px;
}
.ipemail {
width: 140px;
height: 24px;
line-height: 24px;
border: 1px solid #bbb;
border-radius: 4px;
}
.next {
width: 80px;
height: 26px;
line-height: 26px;
border: 1px solid #aaa;
background: #3cf;
border-radius: 4px;
text-align: center;
cursor: pointer;
}
.next:hover {
background: #0cc;
color: #fff;
}
.tips {
color: #b91c00;
line-height: 26px;
height: 26px;
word-wrap: break-word;
}
.tips2 {
color: #b91c00;
animation: ddr 5s;
animation-fill-mode: forwards;
width: 120px;
height: 26px;
line-height: 26px;
}
.close {
width: 60px;
height: 24px;
line-height: 26px;
border: 1px solid #666;
background: #3cf;
border-radius: 6px;
text-align: center;
cursor: pointer;
}
@keyframes pt {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes pt {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes ddr {
from {
border-bottom: 1px solid #cf0;
}
to {
border-bottom: 1px solid #999;
}
}
@-webkit-keyframes ddr {
from {
border-bottom: 1px solid #cf0;
}
to {
border-bottom: 1px solid #999;
}
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
function shows(){
$(".first").hide();
$(".second").show();
}
function showt(){
$(".there").show();
$(".second").hide();
var username=$("#username").val();
var email=$("#email").val();
$("#susername").append(username);
$("#semail").append(email);
}
function closeme(){
$(".content").hide()
}
</script>
</head>
<body>
<div class="main">
<div class="content">
<div class="first let">
<ul>
<li class="fl msx">请输入您的用户名:<input type="text" class="iptext" id="username"></li>
<li class="fl msx"><span class="tips">用户名必须在4-16位之间,不能含有特殊字符,而且注册成功后不能修改</span></li>
<li class="fl msx"><span class="next" onclick="shows()">下一步</span></li>
</ul>
</div>
<div class="second let" style="display:none;">
<ul>
<li class="fl msx">请输入您关联的电子邮箱:<input type="text" class="ipemail" id="email"></li>
<li class="fl msx"><span class="tips">电子邮箱可以用做找回密码</span></li>
<li class="fl msx"><span class="next" onclick="showt()">下一步</span></li>
</ul>
</div>
<div class="there let" style="display:none;">
<ul>
<li class="fl msx">您的 用户名 是:<span id="susername" class="tips2"></span></li>
<li class="fl msx">您的电邮邮箱是:<span id="semail" class="tips2"></span></li>
<li class="fl msx">恭喜您注册成功,我们的网站尽力给您提供满意的服务!</li>
<li class="fl msx"><span class="close" onclick="closeme()">关闭</span></li>
</ul>
</div>
</div>
</div>
</body>
</html>

表单注册下一步效果代码实例,这样的场景在实际项目中还是用的比较多的,关于表单注册下一步效果代码实例就介绍到这了。

表单注册下一步效果代码实例属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容