表單註冊下一步效果程式碼例項

admin發表於2017-04-15
原文網址 : https://www.softwhy.com/article-7257-1.html

本章節分享一段比較實用的效果。

進行表單註冊的時候，點選下一步會進入另一個介面以控制註冊流程。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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>

相關文章