专栏首页前端说吧JS-DOM2级封装练习题--点击登录弹出登录对话框

JS-DOM2级封装练习题--点击登录弹出登录对话框

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
<meta name="author" content="gjf-702004176@qq.com" />
		<title>Document-DOM2级封装练习题</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
 
			.head {
				font-size: 12px;
				padding: 6px 0 0 10px;
			}
 
			#login_box {
				width: 300px;
				height: 150px;
				background: #eee;
				border: 1px solid #ccc;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -150px;
				margin-top: -75px;
				display: none;
			}
 
			#login_box p {
				height: 20px;
				border-bottom: 1px solid #ccc;
				font-size: 12px;
				padding: 6px 0 0 5px;
				font-weight: bold;
			}
 
			#close {
				width: 14px;
				height: 14px;
				background-color: red;
				position: absolute;
				right: 4px;
				top: 6px;
			}
		</style>
		<script>
			window.onload = function() {
				var login_btn = document.getElementById('login'),
					login_box = document.getElementById('login_box'),
					close = document.getElementById('close');
 // 封装添加事件监听程序,封装到一个函数addEvent中,接受三个参数:要执行的对象(就是获取的id变量名)、事件类型(click。mouseover等)、执行的函数(这里表示调用显示函数/隐藏函数)
				function addEvent(ele, type, hander) {
					if(ele.addEventListener) {//如果浏览器支持addEventListener方法,(适配于除ie8及以下浏览器之外的浏览器)
						ele.addEventListener(type, hander, false);//就使用这个方法,true表示事件捕获,false表示事件冒泡
					} else if(ele.attachEvent) {//如果是ie8及以下的浏览器,
						ele.attachEvent('on' + type, hander);//就用这个方法,因为传进来的type事件都不必要添加‘on’,但是ie少不了on,就在type前加上‘on’,不用加false或ture,因为ie只支持冒泡,默认是false也只有false
					} else {
						ele['on' + type] = hander;//不支持dom2级操作的话,就调用dom0级的样式,就比如obj.onclick = function(){}一样,ele=obj,onclick='on'+type,hander=function(){};值得注意的是,1:需要加'on',因为传过来type时不用加on但是dom0级调用事件是要有on的。2:[]的处理方式,而不是'.',因为变量不能调用字符串的方法,其实ele.onclick === ele['onclick'],这两个写法完全相等。所以不能使用'.'的情况下,用['']的方法。
					}
				}
				// 显示登录层函数
				function showLogin() {//普通的通过js操作css样式的代码,只不过定义成了一个函数封装起来一会方便调用。
					// 执行代码
					login_box.style.display = "block";
				}
				// 隐藏登录层函数
				function hideLogin() {
					// 执行代码
					login_box.style.display = "none";
				}
				//点击登录按钮显示登录层 
				// 执行代码
				addEvent(login_btn,'click', showLogin);//调用函数,传三个参数,分别是要承载、执行事件的按钮id变量名,事件名称-不加on,触发这个事件后会调用或执行的函数(名)
				//点击关闭按钮隐藏登录层
				// 执行代码
				addEvent(close,'click', hideLogin);//同上,添加了一个单机时隐藏的事件。
			}
		</script>
	</head>
	<body>
		<div class="head">亲,您好!<input type="button" value="登 录" id="login"></div>
		<div id="login_box">
			<p>用户登录</p><span id="close"></span>
		</div>
	</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • css笔记 - 张鑫旭css课程笔记之 overflow 篇

    如果overflow-x、overflow-y的值相同,则等同于overflow设置了这个值。

    xing.org1^
  • Vue-路由配置和使用步骤整理

    xing.org1^
  • vue-echarts在vue中的使用

    Vue-ECharts 默认在 webpack 环境下会引入未编译的源码版本,Vue CLI 创建项目可能会遇到默认配置把 node_modules 中的文件排...

    xing.org1^
  • SpringSecurity实现自定义登录界面

      前面通过入门案例介绍,我们发现在SpringSecurity中如果我们没有使用自定义的登录界面,那么SpringSecurity会给我们提供一个系统登录界面...

    用户4919348
  • 使用PyInstaller打包webssh

    接前一篇博客,为了使webssh更容易安装部署,我在想是不是可以把webssh打包成一个独立的可执行文件,这样使用起来不是更方便呢。于是乎我想到了是不是可以使用...

    kongxx
  • 我把 Toolbar 转了一下变成了菜单

    侧滑菜单我们见的太多了,有没有想过有别的方式弹出菜单? 比如,让 Toolbar 变成菜单?

    NanBox
  • python第二大神器requests

    如果你没有安装pip3 请自行百度安装,本公众号已和百度达成合作不会的都可以去百度哦,不收费。

    不断折腾
  • Python中socket的UDP学习(3)

    萌海无涯
  • 第十七章 Python网络编程

    在网络上的两个程序通过一个双向的通信连接实现数据的交换,这个链接的一端称为一个Socket(套接字),用于描述IP地址和端口。

    py3study
  • 第33天 初识socket编程

      MAC:  mac地址是在每一个计算机出厂的时候就会烧录进网卡内的一串数字,用来唯一的表示一台计算机

    py3study

扫码关注云+社区

领取腾讯云代金券