前端开发模仿知乎注册,登录页

前端开发看不懂文档|linux web前端开发环境|前端开发 浏览器缓存

html 代码

<!DOCTYPE html>
<head>
<metacharset=”UTF-8″>
<title>知乎 – 与世界分享你的知识、经验和见解</title>
<scripttype=”text/javascript”src=”http://libs.baidu.com/jquery/1.9.1/jquery.min.js”></script>
<style>
body {
padding:0;
margin:0;
background:#F7FAFC;
}
a {
text-decoration:none;
}
.index-box {
width:300px;
height:auto;
margin:0auto;
margin-top:40px;
}
.logo {
background:url(http://cdn.attach.w3cfuns.com/notes/pics/201606/11/143905zj6ld3zm2yryw9jf.png) no-repeat;
;
width:160px;
height:74px;
margin:0auto
}
.title {
font-size:18px;
text-align:center;
color:#707171;
font-weight:bold;
margin:30pxauto;
}
.index-body {
text-align:center;
}
.nav-sliders {
position:relative;
display:inline-block;
margin-bottom:20px;
}
.nav-sliders>a {
font-size:20px;
display:inline-block;
width:60px;
font-family:”微软雅黑”;
color:#999;
cursor:pointer;
float:left;
$width
}
.nav-sliders>a.active {
color:#0f88eb;
}
.nav-sliders>span {
position:absolute;
height:2px;
background:#0f88eb;
display:block;
left:5px;
width:50px;
bottom:-8px;
}
.login-box {
width:300px;
display:none;
}
.wrap {
border:1pxsolid#d5d5d5;
border-radius:5px;
background:#fff;
}
.wrap>div {
position:relative;
overflow:hidden;
}
.wrap>div>input {
width:95%;
border:none;
padding:17px2.5%;
border-radius:5px;
}
.wrap>div>label.error {
position:absolute;
color:#c33;
top:0;
line-height:50px;
transform:translate(25px,0);
transition:all0.5sease-out;
-webkit-transform:translate(25px,0);
-moz-transform:translate(25px,0);
opacity:0;
visibility:hidden;
cursor:text;
}
.wrap>div>label.move {
transform:translate(0,0);
transition:all0.5sease-out;
-webkit-transform:translate(0,0);
-moz-transform:translate(0,0);
opacity:1;
visibility:visible;
}
.password {
border-top:solid1px#d5d5d5;
}
.code {
right:115px;
}
.button {
height:40px;
background:#0f88eb;
text-align:center;
line-height:40px;
border-radius:5px;
margin-top:25px;
color:#fff;
font-family:”微软雅黑”;
cursor:pointer;
}
.remember {
text-align:left;
margin-top:20px;
font-family:”微软雅黑”;
color:#666666;
}
.remember>a {
float:right;
cursor:pointer;
color:#666666;
}
.other {
text-align:left;
margin-top:20px;
font-family:”微软雅黑”;
color:#666666;
overflow:hidden;
}
.other>span {
font-size:14px;
float:left;
margin-top:2px;
cursor:pointer;
}
.other>div {
float:left;
transition:all1sease-in;
-webkit-transition:all0.3sease-in;
opacity:0;
transform:translateX(-20px);
-webkit-transform:translateX(-18px);
-moz-transform:translateX(-18px);
visibility:hidden;
}
.other>div>a {
margin-left:20px;
color:#666666;
font-size:15px;
}
.other>.hidden {
transition:all1sease-in;
display:block;
-webkit-transition:all0.3sease-in;
opacity:1;
transform:translateX(0);
-webkit-transform:translateX(0);
-moz-transform:translateX(0);
visibility:visible;
}
.download {
border:solid1px#0f88eb;
height:40px;
line-height:40px;
border-radius:5px;
color:#0f88eb;
font-family:”微软雅黑”;
margin-top:50px;
cursor:pointer;
position:relative;
}
.download>.close {
display:none;
}
.download.pic {
display:none;
position:absolute;
background:#fff;
bottom:78px;
width:310px;
left:-10px;
z-index:5;
padding:40px0;
border-radius:8px;
box-shadow:008px0rgba(0,0,0,.15);
}
.registered-box {
width:300px;
}
.text {
font-size:14px;
margin-top:20px;
font-family:”微软雅黑”;
color:#666666;
}
.text>a {
color:#0f88eb;
}
.verification-code {
position:absolute;
right:22px;
top:14px;
font-family:”微软雅黑”;
font-size:18px;
cursor:pointer;
}
#register:hover {
opacity:0.7;
}
#login:hover {
opacity:0.7;
}
</style>
</head>
<body>
<divclass=”index-box”>
<divclass=”index-header”>
<h1class=”logo”></h1>
<h2class=”title”>与世界分享你的知识、经验和见解</h2>
</div>
<divclass=”index-body”>
<divclass=”nav-sliders”>
<aclass=”registered active”>注册</a>
<aclass=”login”>登录</a>
<spanclass=”on”></span>
</div>
<divclass=”change”>
<!–注册开始–>
<divclass=”registered-box”>
<divclass=”wrap”>
<divclass=”phone”>
<inputtype=”text”name=””value=””id=”name”placeholder=”姓名”>
<labelclass=”error name”>请输入姓名</label>
</div>
<divclass=”password”>
<inputtype=”text”id=”phone”value=””placeholder=”手机号”>
<labelclass=”error phone restet”>请输入手机号</label>
</div>
<divclass=”password”>
<inputtype=”password”id=”passwor”name=””maxlength=”6″value=””placeholder=”密码(不少于6位)”>
<labelclass=”error passwor”>请输入密码</label>
</div>
<divclass=”password”>
<inputtype=”text”id=”code”name=””maxlength=”6″value=””placeholder=”验证码”>
<labelclass=”error passwor code”>请输入验证码</label>
<divclass=”verification-code”id=”createCade”></div>
</div>
</div>
<divclass=”button”id=”register”>注册</div>
<divclass=”text”>点击「注册」按钮,即代表你同意
<ahref=”/terms”target=”_blank”>《知乎协议》</a>
</div>
<divclass=”download”>
<span>下载知乎app</span>
<spanclass=”close”>关闭二维码</span>
<divclass=”pic”>
<imgsrc=”http://cdn.attach.w3cfuns.com/notes/pics/201609/23/161523a3ql34ba2offllfb.png”>
</div>
</div>
</div>
<!–注册结束–>
<!–登录开始–>
<divclass=”login-box”>
<divclass=”wrap”>
<divclass=”phone”>
<inputtype=”text”name=””id=”login-phone”value=””placeholder=”手机号或邮箱”>
<labelclass=”error phone restet”>请输入手机号</label>
</div>
<divclass=”password”>
<inputtype=”password”name=””id=”login-password”placeholder=”密码”maxlength=”6″>
<labelclass=”error phone”>请输入密码</label>
</div>
</div>
<divclass=”button”id=”login”>登录</div>
<divclass=”remember”>
<label>
<inputtype=”checkbox”>记住我:</label>
<a>无法登陆?</a>
</div>
<divclass=”other”>
<span>社交账号登录</span>
<divclass=”other-login”>
<ahref=”#”>扣扣</a>
<ahref=”#”>微信</a>
<ahref=”#”>微博</a>
</div>
</div>
<divclass=”download”>
<span>下载知乎app</span>
<spanclass=”close”>关闭二维码</span>
<divclass=”pic”>
<imgsrc=”http://cdn.attach.w3cfuns.com/notes/pics/201609/23/161523a3ql34ba2offllfb.png”>
</div>
</div>
</div>
<!–登录结束–>
</div>
</div>
</div>
</div>
<script>
varcode;//定义一个全局验证码
$(function () {
jcPublic.register();
jcPublic.Tab();
jcPublic.login();
jcPublic.downLoad();
jcPublic.createCode();
jcPublic.clickCode();
$(“.wrap>div>input”).focus(function () {
$(this).css({ “outline”:”none” });
var$this=$(this);
$this.next(“label”).removeClass(“move”)//隐藏提示信息
})
$(“.other>span”).on(“click”, function () {
$(this).parent().children(“div”).toggleClass(“hidden”);
})
})
varjcPublic= {
register:function () {//注册
varcurrentThis=this//当前对象
$(“#register”).on(“click”, function () {
var$this=$(this);
varname=$(“#name”).val();//姓名
varphone=$(“#phone”).val();//电话
varpasswor=$(“#passwor”).val();
varCode=$(“#code”).val();//验证码
varp_reg=/^0{0,1}(13[0-9]|15[0-9]|153|156|18[0-9])[0-9]{8}$/;//电话验证
if (name.length==0&&phone.length==0&&passwor.length==0) {//同时为空
$this.prev(“.wrap”).find(“label”).addClass(“move”);
returnfalse;
} else if (name == “” || name == “undefined” || name == “null”) {
$this.prev(“.wrap”).find(“.name”).addClass(“move”);
returnfalse;
} else if (phone == “” || phone == “undefined” || phone == “null”) {
$this.prev(“.wrap”).find(“.phone”).addClass(“move”);
returnfalse;
} else if (passwor == “” || passwor == “undefined” || passwor == null) {
$this.prev(“.wrap”).find(“.passwor”).addClass(“move”);
returnfalse;
} else if (Code == “” || Code == “undefined” || Code == null) {
$this.prev(“.wrap”).find(“.code”).addClass(“move”);
returnfalse;
} else if (code !== Code) {
$this.prev(“.wrap”).find(“.code”).html(“验证码有误”).addClass(“move”);
returncurrentThis.createCode();//验证码输入有误就刷新验证码重新输入
} else if (!p_reg.test(phone)) {
$this.prev(“.wrap”).find(“.restet”).html(“手机号码格式不正确”).addClass(“move”);
returnfalse;
}
})
},
Tab:function () {//切换注册和登录
$(“.nav-sliders>a”).on(“click”, function () {
$(this).addClass(“active”).siblings().removeClass(“active”);
var$width=$(this).width();//当前a的宽度
var$index=$(this).index();//索引
$(“.on”).stop(true, true).animate({ “left”:$width*$index+5+”px” }, 300);
$(this).parents(“.index-body”).children(“.change”).children().eq($index).stop(true, false).show().siblings().hide();
})
},
login:function () {
$(“#login”).on(“click”, function () {
var$this=$(this);
varphone=$(“#login-phone”).val();//电话
varpasswor=$(“#login-password”).val();
varp_reg=/^0{0,1}(13[0-9]|15[0-9]|153|156|18[0-9])[0-9]{8}$/;//电话验证
if (phone.length==0&&passwor.length==0) {//同时为空
$this.prev(“.wrap”).find(“label”).addClass(“move”);
returnfalse;
} else if (phone == “” || phone == “undefined” || phone == “null”) {
$this.prev(“.wrap”).find(“.phone”).addClass(“move”);
returnfalse;
} else if (passwor == “” || passwor == “undefined” || passwor == null) {
$this.prev(“.wrap”).find(“.passwor”).addClass(“move”);
returnfalse;
} else if (!p_reg.test(phone)) {
$this.prev(“.wrap”).find(“.restet”).html(“手机号码格式不正确”).addClass(“move”);
returnfalse;
}
})
},
downLoad:function () {
$(“.download”).on(“click”, function () {
$(this).children(“.pic”).toggle(300);
})
},
createCode:function () {//验证码
varselectChar=newArray(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, ‘A’, ‘B’, ‘C’, ‘D’, ‘E’, ‘F’, ‘G’, ‘H’, ‘I’, ‘J’, ‘K’, ‘L’, ‘M’, ‘N’, ‘O’, ‘P’, ‘Q’, ‘R’, ‘S’, ‘T’, ‘U’, ‘V’, ‘W’, ‘X’, ‘Y’, ‘Z’);//所有候选组成验证码的字符,也可以用中文的
code=””;
varcodeLength=4;//验证码的长度
for (vari=0; i<codeLength; i++) {
varindex=Math.floor(Math.random() *selectChar.length)//随机数
code+=selectChar[index];
//$(“#createCade”).html(code)
}
return$(“#createCade”).html(code)
},
clickCode:function () {//切换验证码
var$this=this;
$(“#createCade”).on(“click”, function () {
return$this.createCode();
})
}
}
</script>
</body>
</html>

前端开发 流程|web前端实际开发流程|web前端开发必备浏览器

» 本文来自:前端开发者 » 《前端开发模仿知乎注册,登录页》
» 本文链接地址:https://www.rokub.com/5167.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!