abstract:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>小米商城-登录</title> <link rel="sh
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小米商城-登录</title>
<link rel="shortcut icon" type="image/x-icon" href="static/images/footlogo.png"/>
<link rel="stylesheet" type="text/css" href="static/layui/css/layui.css">
<link rel="stylesheet" type="text/css" href="static/css/login.css">
<link rel="stylesheet" type="text/css" href="static/font-awesome/css/font-awesome.min.css">
<script type="text/javascript" src="static/layui/layui.js"></script>
</head>
<body>
<div class="header">
<a href="./index.html"><img src="static/images/5.png"></a>
</div>
<div class="content">
<div class="login_content">
<div class="login_form">
<div class="login_form_main">
<p style="color:#ff6700;" id="regTabs_0" onclick="ChangeReg('0','register_',1)">账号登录</p>
<span>|</span>
<p id="regTabs_1" onclick="ChangeReg('1','register_',1)">扫码登录</p>
</div>
<div class="clear"></div>
<div class="login_form_content" id="register_0">
<form>
<input type="text" name="username" placeholder="邮箱/ 手机号码/小米ID">
<input type="text" name="password" placeholder="密码">
<button>登录</button>
</form>
<h6><a href="" style="color:#ff6700;">手机短信登录/注册</a><span><a href="">立即注册</a> | <a href="">忘记密码?</a></span></h6>
<div class="login_form_pic">
<p>其他方式登录</p>
<ul>
<li><i class="fa fa-qq"></i></li>
<li><i class="fa fa-weibo"></i></li>
<li><i class="fa fa-twitter-square"></i></li>
<li><i class="fa fa-weixin"></i></li>
</ul>
</div>
</div>
<div class="login_form_content0" id="register_1">
<img src="static/images/下载.png">
<p>使用<span style="color:#ff6700;">小米商城APP</span>扫一扫</p>
<p>小米手机可打开「设置」>「小米帐号」扫码登录</p>
</div>
</div>
</div>
</div>
<p style="margin-top: 60px;">简体<span>|</span>繁体<span>|</span>English<span>|</span> 常见问题<span>|</span> 隐私政策</p>
<p>小米公司版权所有-京ICP备10046444-<img src="static/images/ghs.png"> 京公网安备11010802020134号-京ICP证110507号</p>
<script type="text/javascript">
function ChangeReg(divId,divName,Count){
for(var i=0;i<=Count;i++){
document.getElementById(divName+i).style.display='none'
}
document.getElementById(divName+divId).style.display='block'
if(divId==0){
document.getElementById('regTabs_0').style.color='#ff6a00'
document.getElementById('regTabs_1').style.color='#757575'
}
if(divId==1){
document.getElementById('regTabs_1').style.color='#ff6a00'
document.getElementById('regTabs_0').style.color='#757575'
}
}
</script>
</body>
</html>
---------------------------------------------------------------------------------------------
*{margin:0px;padding:0px;}
li{list-style:none;}
a{text-decoration:none;color:#ccc;cursor:pointer;}
.clear{clear:both;}
.header{width:1226px;height:100px;margin:0px auto;line-height:90px;padding-left:40px;}
.content{width:100%;height:580px;background:url(../images/login.png);}
p{width:1226px;height:38px;margin:0px auto;line-height:38px;text-align:center;color:#757575;}
span{font-size:13px;margin:0px 10px;}
.login_content{width:1226px;height:520px;margin:0px auto;}
.login_form{width:410px;height:520px;float:right;background:#fff;margin:30px 50px;}
.login_form_main{width:330px;margin:25px auto;}
.login_form_main p{font-size:23px;text-align:center;float:left;color:#757575;width:150px;height:50px;line-height:50px;}
.login_form_main span{font-size:30px;float:left;height:50px;line-height:50px;color:#e0e0e0;}
.login_form_content{margin-top:25px;}
input{border:none;width:328px;height:28px;padding:11px;margin:15px auto;border:1px solid #e0e0e0;display:block;}
button{border:none;width:350px;display:block;height:50px;margin:25px auto;background:#ff6700;color:#fff;}
.login_form_content h6{font-weight:300;width:350px;margin:0px auto;height:40px;line-height:40px;}
.login_form_content span{float:right;}
.login_form_content a:hover{color:#ff6700;}
.login_form_pic{width:350px;margin:100px auto 0px;border-top:1px solid #e0e0e0;position:relative;}
.login_form_pic p{width:100px;height:30px;line-height:30px;color:#ccc;background:#fff;position:absolute;top:-15px;left:125px;}
.login_form_pic ul{width:233px;margin:20px auto 0px;}
.login_form_pic ul li{float:left;height:32px;width:32px;line-height:32px;color:#fff;text-align:center;border-radius:16px;}
.login_form_pic ul li:nth-child(1){background:#0288D1;margin-right:35px;}
.login_form_pic ul li:nth-child(2){background:#D32F2F;margin-right:35px;}
.login_form_pic ul li:nth-child(3){background:#00AAEE;margin-right:35px;}
.login_form_pic ul li:nth-child(4){background:#00D20D;}
.login_form_pic ul li i{font-size:17px;}
.login_form_content0{width:350px;margin:0px auto;text-align:center;display:none;}
.login_form_content0 img{height:190px;width:180px;margin:70px auto 15px;}
.login_form_content0 p{width:350px;margin:0px auto;line-height:20px;height:20px;}
-----------------------------------------------------------------------------------------
课程要到期了 来不及学了 就先按照视频讲的做了下 学完了来得及再修改
function ChangeReg(divId,divName,Count){
for(var i=0;i<=Count;i++){
document.getElementById(divName+i).style.display='none'
}
document.getElementById(divName+divId).style.display='block'
}
老师 关于这段函数我有个问题 第一次点击 第二次点击 都可以理解 那么第三次点击切换的时候 i=2 这个时候是不是因为i=2 >Count 了 不符合for循环条件了 所以i重新定义成0了?
Correcting teacher:查无此人Correction time:2019-03-07 14:31:13
Teacher's summary:完成的不错,就是代码有点乱。要加紧学习了。 你的问题,我没看明白,可以提交个工单。循环时,可以每次都输出i和Count,看看它们的值变化,你就应该能懂了。