如何简化这段js代码

window.onload=function(){
	aa();
}
function aa(){
	var body=document.body,
		p=document.createElement('p'),
		span=document.createElement('span'),
		h3=document.createElement('h3');
		h3.innerHTML='X';
		span.appendChild(h3);
		body.appendChild(span);
		body.appendChild(p);
		span.className='hide';
		p.className='hide';
	var	btn=document.getElementById('btn');
		btn.onclick=bb;
		h3.onclick=cc;
		document.onclick=cc;
	}
function bb(event){
	event?event:window.event;
	event.stopPropagation?event.stopPropagation():cancelBubble=true;
	var span=document.getElementsByTagName('span')[0],
		p=document.getElementsByTagName('p')[0],
		h3=document.getElementsByTagName('h3')[0];
		span.className='show';
		p.className='show';  
}
function cc(){
	var span=document.getElementsByTagName('span')[0],
		p=document.getElementsByTagName('p')[0],
		h3=document.getElementsByTagName('h3')[0];		
		span.className='hide';
		p.className='hide'; 
}

bb和cc写在外部它的上一级作用域还是aa吗，

这段代码怎么样才能精简

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>带遮罩的登陆框</title>
		<link rel="stylesheet" type="text/css" href="css/1.css"/>
		<script src="js/1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<input type="button" id="btn" value="按钮" />
		<img src="http://pic.ytqmx.com:82/2013/0331/07/17.jpg"/>
		<img src="http://pic.ytqmx.com:82/2013/0331/07/18.jpg"/>
	</body>
</html>

*{
	margin: 0;
	padding: 0;
}
#btn{
	cursor: pointer;
}
p{
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: darkgray;
	opacity: 0.5;
	z-index: 80;
}
span{
	width: 300px;
	height: 200px;
	background: cadetblue;
	position: fixed;
	left: 50%;
	top: 50%;
	margin-top: -100px;
	margin-left: -150px;
	z-index: 100;
}
h3{
	position: absolute;
	right: 10px;
	top: 5px;
	cursor:  pointer;
}
.hide{
	display: none;
}
.show{
	display: block;
}

清风流光

浏览 1385回答 4

4回答

Stardust1001

可以把一样的语句块写成函数

0 0

随时随地看视频慕课网APP