2021-05-19

最新推荐文章于 2022-08-09 14:52:18 发布

Bbilili

最新推荐文章于 2022-08-09 14:52:18 发布

阅读量481

点赞数

分类专栏：学习文章标签： javascript

本文链接：https://blog.csdn.net/tt123_321/article/details/117034659

版权

学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.上课案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset=";utf-8";>
		<title></title>
		<style>
			.box {
		        position: relative;
		        width: 400px;
		        border: 1px solid #ccc;
		        margin: 100px auto;
		        padding: 2px;
		      }
		      .box input {
		        width: 370px;
		        height: 30px;
		        border: 0;
		        outline: none;
		      }
		      .box img {
		        position: absolute;
		        top: 4px;
		        right: 6px;
		        width: 24px;
		        cursor: pointer;
		      }
		    </style>
	</head>
	<body>
		<div class=";box";>
			<label for=";";>
				<img src=";images/close.png"; alt=";"; id=";eye";>
			</label>
			<input type=";password"; name=";"; id=";pwd";>
		</div>

		<script type=";text/javascript";>
			//【案例】显示隐藏密码明文
			// 案例分析：在登录页面，为了优化用户体验 ，方便用户进行密码输入。
			//因此在设计密码框时，会有一个“眼睛”图片，充当按钮功能，单击可以切换按钮的状态，控制密码的显示和隐藏。
			//实现步骤如下：
			// 准备一个父盒子div
			// 在父盒子中放入两个子元素，一个input元素和一个img元素
			// 单击眼睛图片切换input的type值（text和password）

			/Ǘ.获取元素
			var pwd=document.querySelector(";#pwd";);
			var img1=document.querySelector(";#eye";);
			/ǘ.注册事件处理程序
			var i=true;
			img1.onclick=function(){
				if(i==true){
					pwd.type=";text";;
					img1.src=";images/open.png";;
					i=false;
				}
				else if(i==false)
					
				{
					pwd.type=";password";;
					img1.src=";images/close.png";;
					i=true;
				}
				
			}
			
		</script>
	</body>
</html>

效果图

Bbilili

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
2021-05-19

1.上课案例<!DOCTYPE html><html> <head> <meta charset=";utf-8";> <title></title> <style> .box { position: relative; width: 400px; border: 1px solid #ccc; margin: 100
复制链接

扫一扫