abstrakt:<!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"> 京公網(wǎng)安備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'
}
老師 關于這段函數(shù)我有個問題 第一次點擊 第二次點擊 都可以理解 那么第三次點擊切換的時候 i=2 這個時候是不是因為i=2 >Count 了 不符合for循環(huán)條件了 所以i重新定義成0了?
Korrigierender Lehrer:查無此人Korrekturzeit:2019-03-07 14:31:13
Zusammenfassung des Lehrers:完成的不錯,就是代碼有點亂。要加緊學習了。 你的問題,我沒看明白,可以提交個工單。循環(huán)時,可以每次都輸出i和Count,看看它們的值變化,你就應該能懂了。