目录
一、需求思路：
1、需要有两个切换表单来帮助用户有两种登录方式：用户名+密码登录，以及手机号无密码、动态码登录
2、切换时当前表单背景色变化，且会对应一个全新的登录方式页面，
3、密码需要可做显示或隐藏
4、位置居中，需要添加背景图片
二、设计代码思路：
1、先把个表单用代码编写出来，然后顺序进行设计
2、涉及到的技术知识，稍后总结
三、代码次序：
1、打开VS进行创建文件
2、因为后面涉及到图标添加显示，如user，key，eye，所以要提前添加iconfont相关文件:在head的style后面添加如下代码：
<link rel="preload" href="//at.alicdn.com/t/font_2664780_twk9p2w4qu.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="stylesheet" href="//at.alicdn.com/t/font_2664780_twk9p2w4qu.css">
3、逻辑代码梳理
<div tab栏 总的大块级元素>
<img logo 图片插入 位置：正中间偏上>
<div class=tab_list> tab列表 表头表单
<ul> （需要清除类型样式，不要有标识是否有序无序）
<li class=current_list title1>用户名登录</i>
<li class=title2>手机号无密码登录</i>
</ul>
</div>
<div class=tab_content> tab列表内容
<div 1 class=content_list>
<input>用户名、密码
icon font 可视隐藏
链接 <a>忘记密码</a>
</div>
<div 2>
<input>手机号无密码登录、输入动态码
获取动态码
</div>
<button>登录</button>按钮
</div>
</div><script>
window.addEventListener('DOMContentLoaded',function(params){
1、//显示与隐藏 密码操作
//先找到id为eye 的元素进行赋值给eye
//给赋值的eye变量添加单击监听事件，
//window.alert('ok');此时eye监听事件是好用的
//找到id为password的元素赋值给password，并把password的类型赋值为type
//进行判断，password的类型是否为password，是，则变更属性为text，否则，则变更为password属性
//获取该元素的类样式名称列表
//循环遍历如果类型 是password且元素列表中元素是icon-eye，则把icon-eye替换成 icon-eye2，睁眼换闭眼
//如果类型 是text且元素列表中元素是icon-eye2，则把icon-eye2替换成 icon-eye，闭眼换睁眼
2、 //切换tab表单，并作判断循环切换登录样式
//外部循环添加事件监听
//内部循环调整css样式
//当前下标的表头 需要移除当前的样式，红色
//并且把对应的下标的列表内容清除样式
//当前单击选择的表头名字添加current_list样式
//当前与表头下标对应的item列表内容的样式设置为block，
//即页面只显示这一个块状元素，其他元素跟他在同一行的会*换行，
//挤到下一行那里去，
</script><body background="./css/img/beijing.jpg" style="display: block;">
<!-- tab栏 -->
<div class = "tab">
<img class = "logo" src="./css/img/logo.png" style="width: 140px; height: 50px;">`
<br>
<!-- tab列表 表头 -->
<div class="tab_list" >
<ul>
<li class="current_list title1" >用户名登录</li>
<li class="title1">手机无密码登陆</li>
</ul>
</div>
<!-- 列表内容 -->
<div class="tab_content" >
<div class="content_list" style="display: block;">
• <i class="iconfont icon-user" style="position: absolute; margin-left: 23px; font-size: 20px;"></i>
• <input class="inpupt" type="text" placeholder="用户名" autocomplete="off" style="width: 247px;padding-left: 56px;height: 25px;" >
• <br>
<i class="iconfont icon-key" style="position: absolute; margin-left: 23px; margin-top: 1px;font-size: 20px;"></i>
• <input class="inpupt" id ="password" type="password" placeholder="密码" autocomplete="off" style="width: 247px;padding-left: 56px;height: 25px;">
• <i id="eye" class="iconfont icon-eye" style="position: absolute; margin-left: -34px; margin-top: 1px;font-size: 20px;"></i>
• <br>
<div class="forgetpsw" style="position:absolute; margin-left:279px; font-size: 11px; margin-top: -18px;"> 忘记密码
• </div>
• </div>
• <br>
<div class="content_list" style="display:none" >
• <input class="inpupt" type="text" placeholder="手机号码" autocomplete="off" style="width: 270px;padding-left: 39px;height: 25px;" >
<div class="forgetpsw" style="position:absolute; margin-left:259px; font-size: 11px; margin-top: -49px;"> 获取动态码
• </div>
<br>
• <input class="inpupt" type="text" placeholder="动态码" autocomplete="off" style="width: 270px;padding-left: 39px;height: 25px;">
• </div>
</div>
<button id="btn" style="background-color: red;font-size: 10px; width: 200px;height: 30px;">登录</button>`
</div>
<div class="text1" style="font-size: 10px;line-height: 40px; margin-left: 158px;">登录即同意
<a href="">
<span style="color: red;">《使用协议》</span>
</a>
<a href="">
<span style="color: red;">《隐私权条款》</span>
</a>
</div>
<!-- 下方链接内容 -->
<div class="line_low">
<a href="">
<img src="./css/img/qq.jfif" style="width: 14px;">
<span id="wb_connect_btn" >QQ登录</span>
</a>
<a href="">
<img src="./css/img/weixin.jfif" style="width: 14px;">
<span id="wb_connect_btn">微信登录</span>
</a>
<a href="">
<img src="./css/img/weibo.jfif" style="width: 14px;">
<span id="wb_connect_btn">微博登录</span>
</a>
</div>
<br>
<!-- 下方链接内容 -->
<div class="line_low1">
<a href="" >123456789@qq.com</a>
<a href="" >联系客服</a> 
<a href="" >帮助中心</a>
</div>
`</body>`
<script>
window.addEventListener('DOMContentLoaded',function(params){
//显示与隐藏 密码操作
//先找到id为eye 的元素进行赋值给eye
let eye = window.document.querySelector('#eye');
//给赋值的eye变量添加单击监听事件，
eye.addEventListener('click',function(params){
//window.alert('ok');此时eye监听事件是好用的
//找到id为password的元素赋值给password，并把password的类型赋值为type
let password = window.document.querySelector('#password');
let type =password.type;
//进行判断，password的类型是否为password，是，则变更属性为text，否则，则变更为password属性
if ('password' == type ) {
password.type ='text';
} else {
password.type ='password';
}
//获取该元素的类样式名称列表
let list = eye.classList;
window.console.log(list);
//循环遍历如果类型 是password且元素列表中元素是icon-eye，则把icon-eye替换成 icon-eye2，睁眼换闭眼
for (let index = 0; index < list.length; index++) {
const element = list[index];
if ('password' == type && "icon-eye" == element) {
list.replace('icon-eye','icon-eye2');
//如果类型 是text且元素列表中元素是icon-eye2，则把icon-eye2替换成 icon-eye，闭眼换睁眼
} else if('text' == type && "icon-eye2" == element) {
list.replace('icon-eye2','icon-eye');
}
}
})
//切换tab表单，并作判断循环切换登录样式
let titles = window.document.querySelectorAll('.title1');
window.console.log(titles);
let content_lists = window.document.querySelectorAll('.content_list');
window.console.log(content_lists);
//外部循环添加事件监听
for (let index = 0; index < titles.length; index++) {
const title = titles[index];
title.addEventListener('click',function(params){
//内部循环调整css样式
for (let index = 0; index < titles.length; index++) {
//当前下标的表头 需要移除当前的样式，红色
titles[index].classList.remove('current_list');
window.console.log(titles[index]);
//并且把对应的下标的列表内容清除样式
content_lists[index].style.display = 'none';
}
//当前单击选择的表头名字添加current_list样式
title.classList.add('current_list');
//当前与表头下标对应的item列表内容的样式设置为block，
//即页面只显示这一个块状元素，其他元素跟他在同一行的会*换行，
//挤到下一行那里去，
content_lists[index].style.display = 'block';
window.console.log(content_lists[index]);
});
}
});
</script>
注意：背景图片设置的时候，要铺满整个页面且norepeat
`background-color:#f7f7f7;` • `background-position: center;` • `background-repeat: no-repeat;` • `background-size: 100%;`