标签：eye 登录 元素 密码 html 登陆 icon password 页面
目录
一、需求思路：
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%;`
标签：eye,登录,元素,密码,html,登陆,icon,password,页面 来源： https://blog.csdn.net/weixin_55866233/article/details/118655380
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。